4GeeksAcademy · tommygonzaleza · Sep 12, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/exercises/04.3-id-Selector/solution.hide.html b/exercises/04.3-id-Selector/solution.hide.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04.3 ID selector
+		</title>
+	</head>
+
+	<body>
+		<span id="button1">I should look like a button</span>
+	</body>
+</html>
diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js
@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock('fs');
+
+const span = document.querySelector("span");
+const link = document.querySelector("link");
+
+test("There should be a span tag", () => {
+    expect(span).toBeTruthy()
+});
+
+test("The span tag should have id 'button1'", () => {
+    expect(span).toBeTruthy();
+    let id = span.id
+    expect(id).toBeTruthy();
+    expect(id).toBe('button1');
+});
+
+test("The span tag should not contain any inline style", () => {
+    let emptyBodyInlineStyle = {};
+    expect(span).toBeTruthy()
+    expect(span.style._values).toEqual(emptyBodyInlineStyle);
+});
+
+test("You should not change the existing head tag elements", () => {
+    let head = document.querySelector('head');
+    expect(head).toBeTruthy();
+
+    let meta = head.querySelector("meta");
+    expect(meta).toBe(null);
+
+    const href = link.getAttribute("href");
+    expect(href).toBe('./styles.css');
+});
diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md
@@ -9,7 +9,7 @@ Se trata del nivel de especificidad. Si especificas que tu `div` con `id="thirdi
 
 ## 📝 Instrucciones:
 
-1. Anula el color de fondo (`background-color`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde.
+1. Anula el color de fondo (`background`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde.
 
 ## 💡 Pista:
 

diff --git a/exercises/05-Specificity/README.md b/exercises/05-Specificity/README.md
@@ -13,7 +13,7 @@ It's all about the level of Specificity. If you specify that your `div` with `id
 
 ## 📝 Instrucciones:
 
-1. Override the `background-color` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
+1. Override the `background` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
 
 
 ### 💡 Hint:

diff --git a/exercises/05-Specificity/solution.hide.css b/exercises/05-Specificity/solution.hide.css
@@ -0,0 +1,11 @@
+ul li {
+	background: blue;
+}
+
+#thirditem {
+	background: yellow;
+}
+/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
+#thirditem {
+	background: green !important;
+}
diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css
@@ -1,9 +1,8 @@
-ul li{
+ul li {
 	background: blue;
 }
 
-#thirditem{
+#thirditem {
 	background: yellow;
-} 
+}
 /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
-
diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js
@@ -1,61 +1,50 @@
-const fs=require("fs");
-const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+document.documentElement.innerHTML = html.toString();
 
-jest.dontMock("fs");
+jest.dontMock('fs');
 
 describe("All the styles should be applied", function () {
-  beforeEach(() => {
-    //here I import the HTML into the document
-    document.documentElement.innerHTML=html.toString();
 
-  });
-  afterEach(() => {
-    jest.resetModules();
-  });
-
-
-  it("You should not change the existing head tag elements", function () {
+  test("You should not change the existing head tag elements", function () {
     let head = document.querySelector('head')
     expect(head).toBeTruthy()
-    
+
     let meta = head.querySelector("meta")
     expect(meta).not.toBe(null)
-    
+
     const pathname = new URL(document.querySelector('link').href).pathname
     expect(pathname).toBe('/styles.css')
-    
+
     let title = head.querySelector('title')
     expect(title).not.toBe(null)
   })
-  it("You should not delete or edit the existing code", function () {
 
-    document.querySelector(
-      "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
-    let cssArray=document.styleSheets[0].cssRules[0].selectorText;
-    // console.log("cssArray:",cssArray)
-    let cssArrayBackground= document.styleSheets[0].cssRules[0].style.background
-    console.log("back:",cssArrayBackground)
-    let thirdItSelector=document.styleSheets[0].cssRules[1].selectorText;
-    let thirdItBackground = document.styleSheets[0].cssRules[1].style.background
+  test("You should not delete or edit the existing code", function () {
+    document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
+
+    let cssArray = document.styleSheets[0].cssRules[0].selectorText;
+    let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background;
+    let thirdItSelector = document.styleSheets[0].cssRules[1].selectorText;
+    let thirdItBackground = document.styleSheets[0].cssRules[1].style.background;
+
     expect(thirdItSelector).toBe("#thirditem");
     expect(thirdItBackground).toBe("yellow");
     expect(cssArray).toBe("ul li");
     expect(cssArrayBackground).toBe("blue");
   })
-  it("You should use a more specific rule using the !important annotation ", function () {
+  test("You should use a more specific rule using the !important annotation ", function () {
 
     document.querySelector(
       "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
-    let cssArray=document.styleSheets[0].cssRules;
-    // console.log("NEW", cssArray[2].style._importants)
-    let orangeHoverSelector="";
-    for (let i=0; i<cssArray.length; i++) {
-      if (cssArray[i].selectorText==="#thirditem"&&cssArray[i].style._importants.background==="important") {
-        orangeHoverSelector=cssArray[i].style.background;
+    ).innerHTML = `<style>${css.toString()}</style>`;
+    let cssArray = document.styleSheets[0].cssRules;
+    let orangeHoverSelector = "";
+    for (let i = 0; i < cssArray.length; i++) {
+      if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important") {
+        orangeHoverSelector = cssArray[i].style.background;
       }
     }
 

diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md
@@ -4,17 +4,17 @@
 
 1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: `../../.learn/assets/background-vertical.jpg?raw=true`
 
-2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
+2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
 
 3. Cambia el color del `h1` a rojo(`red`).
 
 4. Haz todos los `h2` tengan subrayado.
 
-5. Centra el `h1`.
+5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
 
-6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
+6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto).
 
-7. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto), y luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
+7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
 
 8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo).
 

diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md
@@ -8,17 +8,17 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU"
 
 1. Set this URL as the background image of the page, and repeat it vertically only: `../../.learn/assets/background-vertical.jpg?raw=true`
 
-2. Change the font-type of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
+2. Change the font-family of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
 
 3. Change the color of `h1` to `red`.
 
 4. Make all the `h2's` with an `underline`.
 
-5. Center the `h1` to the middle.
+5. Add a `left padding` to the whole document of `20px` to make it easier to read.
 
-6. Add a `left padding` to the whole document of `20px` to make it easier to read.
+6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". 
 
-7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph.
+7. Then apply a `padding` of `5px` to all sides of that paragraph.
 
 8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it).
 

diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html
@@ -8,27 +8,27 @@
 	</head>
 
 	<body>
-		<h1>The learning essay</h1>
-		<h2>3 reasons you know you are learning</h2>
-		<p id="id1">
-			We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
-		</p>
-		<ol>
-			<li>You are able to complete the exercises by yourself.</li>
-			<li>You understand what the teacher is talking about</li>
-			<li>Your are able to have conversations about the topic</li>
-		</ol>
-		<h2>3 reasons you know love what you are learning</h2>
-		<ul>
-			<li>Time passes fast.</li>
-			<li>
-				You are anxious to finish this excercise and start the next one.
-			</li>
-			<li>Is 12am and you don't want to go to sleep.</li>
-		</ul>
-		<p>
-			If you can't sleep, what better than watching videos of cats?
-			<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
-		</p>
+		<div style="width: 640px">
+			<h1>The learning essay</h1>
+			<h2>3 reasons you know you are learning</h2>
+			<p id="id1">
+				We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
+			</p>
+			<ol>
+				<li>You are able to complete the exercises by yourself.</li>
+				<li>You understand what the teacher is talking about</li>
+				<li>Your are able to have conversations about the topic</li>
+			</ol>
+			<h2>3 reasons you know love what you are learning</h2>
+			<ul>
+				<li>Time passes fast.</li>
+				<li>You are anxious to finish this excercise and start the next one.</li>
+				<li>Is 12am and you don't want to go to sleep.</li>
+			</ul>
+			<p>
+				If you can't sleep, what better than watching videos of cats?
+				<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
+			</p>
+		</div>
 	</body>
-</html>
+</html>
diff --git a/exercises/06-Practicing-Rules/solution.hide.css b/exercises/06-Practicing-Rules/solution.hide.css
@@ -0,0 +1,25 @@
+/* add your styles here */
+body {
+	background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y;
+	font-family: "Times New Roman";
+	padding-left: 20px;
+}
+
+#id1 {
+	background: rgba(255, 255, 255, 0.2);
+	padding: 5px;
+}
+
+h1 {
+	font-family: "Courier";
+	color: red;
+}
+
+h2 {
+	text-decoration: underline;
+}
+
+a:hover {
+	color: green;
+	text-decoration: none;
+}
diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css
@@ -1 +1 @@
-/* add your styles here */
+/* add your styles here */
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		/* add your styles here */
		/* add your styles here */