From ae9c274fec4afe4c16db29525ec493fa597cfbb3 Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Wed, 10 May 2023 14:55:00 +0200
Subject: [PATCH] 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>
---
 .../css-foundations-exercise-e.md             | 133 +++++++++++++++++-
 1 file changed, 128 insertions(+), 5 deletions(-)

diff --git 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
index 0fef651b9a7..a721563d96d 100644
--- 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;
+}
 ```