feat: add exercise E The Odin Project (#50287)

* feat: add exercise E The Odin Project * Apply suggestions from code review Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> * Apply suggestions from code review Co-authored-by: Niraj Nandish <nirajnandish@icloud.com> --------- Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Niraj Nandish <nirajnandish@icloud.com>
2026-04-18 19:00:54 -04:00 · 2023-05-10 14:55:00 +02:00
parent d34be97fe2
commit ae9c274fec
1 changed files with 128 additions and 5 deletions
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md
@@ -7,38 +7,161 @@ dashedName: css-foundations-exercise-e

 # --description--

-description
+Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't.
+
+The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that aren't descendants of that element unstyled.
+
+1. You should see a `yellow` background for `p` elements that are descendants of the `div` element.
+1. You should see a text color of `red` for elements that are descendants of the `div` element.
+1. You should see a font size of `20px` for elements that are descendants of the `div` element.
+1. You should center align text for elements that are descendants of the `div` element.

 # --hints--

-Test 1
+You should have a background color of `yellow` on your descendants.

 ```js
+const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
+const styleTwo =  new __helpers.CSSHelp(document).getStyle('div p');
+const styleThree =  new __helpers.CSSHelp(document).getStyle('div .text');
+const styleFour =  new __helpers.CSSHelp(document).getStyle('.container p');
+
+const styles = [styleOne, styleTwo, styleThree, styleFour];
+
+function getCorrectStyle(){
+    for(let i = 0; i < styles.length; i++){
+        if(styles[i] != undefined){
+            return styles[i];
+        }
+    }
+}
+
+assert(getCorrectStyle()?.backgroundColor === 'yellow');

 ```

-Test 2
+You should have a text color of `red` on your descendants.

 ```js
+const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
+const styleTwo =  new __helpers.CSSHelp(document).getStyle('div p');
+const styleThree =  new __helpers.CSSHelp(document).getStyle('div .text');
+const styleFour =  new __helpers.CSSHelp(document).getStyle('.container p');
+
+const styles = [styleOne, styleTwo, styleThree, styleFour];
+
+function getCorrectStyle(){
+    for(let i = 0; i < styles.length; i++){
+        if(styles[i] != undefined){
+            return styles[i];
+        }
+    }
+}
+
+assert(getCorrectStyle()?.color === 'red');

 ```

-Test 3
+You should have a font size of `20px` on your descendants.

 ```js
+const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
+const styleTwo =  new __helpers.CSSHelp(document).getStyle('div p');
+const styleThree =  new __helpers.CSSHelp(document).getStyle('div .text');
+const styleFour =  new __helpers.CSSHelp(document).getStyle('.container p');
+
+const styles = [styleOne, styleTwo, styleThree, styleFour];
+
+function getCorrectStyle(){
+    for(let i = 0; i < styles.length; i++){
+        if(styles[i] != undefined){
+            return styles[i];
+        }
+    }
+}
+
+assert(getCorrectStyle()?.fontSize === '20px');

 ```

+You should center align the text on your descendants.
+
+```js
+const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
+const styleTwo =  new __helpers.CSSHelp(document).getStyle('div p');
+const styleThree =  new __helpers.CSSHelp(document).getStyle('div .text');
+const styleFour =  new __helpers.CSSHelp(document).getStyle('.container p');
+
+const styles = [styleOne, styleTwo, styleThree, styleFour];
+
+function getCorrectStyle(){
+    for(let i = 0; i < styles.length; i++){
+        if(styles[i] != undefined){
+            return styles[i];
+        }
+    }
+}
+
+assert(getCorrectStyle()?.textAlign === 'center');
+
+```

 # --seed--

 ## --seed-contents--

-```html
+```css
+```

+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Descendant Combinator</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div class="container">
+      <p class="text">This should be styled.</p>
+    </div>
+    <p class="text">This should be unstyled.</p>
+    <p class="text">This should be unstyled.</p>
+    <div class="container">
+      <p class="text">This should be styled.</p>
+      <p class="text">This should be styled.</p>
+    </div>
+  </body>
+</html>
 ```

 # --solutions--

 ```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Descendant Combinator</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div class="container">
+      <p class="text">This should be styled.</p>
+    </div>
+    <p class="text">This should be unstyled.</p>
+    <p class="text">This should be unstyled.</p>
+    <div class="container">
+      <p class="text">This should be styled.</p>
+      <p class="text">This should be styled.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.container .text {
+  background-color: yellow;
+  color: red;
+  font-size: 20px;
+  text-align: center;
+}
 ```