4GeeksAcademy · tommygonzaleza · Aug 29, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md
@@ -19,7 +19,6 @@ Mira este ejemplo:
 ```HTML
 <style>
     a {
-        /* cambia este estilo a yellow */
         color: pink;
     }
 </style>

diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md
@@ -18,7 +18,6 @@ Look at this example:
 ```HTML
 <style>
     a {
-        /* change this style to yellow */
         color: pink;
     }
 </style>

diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
@@ -1 +1 @@
-<!-- your code here -->
+<!-- your code here -->
diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/01-Hello-World/solution.hide.html
@@ -0,0 +1,7 @@
+<!-- your code here -->
+<style>
+	a {
+		color: pink;
+	}
+</style>
+<a href="https://google.com" target="_blank">Click me to open google.com</a>
diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Hello-World/test.js
@@ -0,0 +1,34 @@
+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 a = document.querySelector("a");
+
+test("There should be an anchor tag", ()=>{
+    expect(a).toBeTruthy()
+})
+
+test("The anchor tag should be pink", ()=>{
+    let styles = window.getComputedStyle(a);
+    expect(styles["color"]).toBe("pink");
+});
+
+test("There should be a href attribute pointing to 'https://google.com'", ()=>{
+    let href = a.getAttribute('href');
+    expect(href).toBeTruthy();
+    expect(href).toBe("https://google.com");
+})
+
+test("There should be a target attribute pointing to '_blank'", ()=>{
+    let target = a.getAttribute('target');
+    expect(target).toBeTruthy();
+    expect(target).toBe("_blank");
+})
+
+test("The anchor tag should not contains any inline style", ()=>{
+    let emptyBodyInlineStyle = {};
+    expect(a.style._values).toEqual(emptyBodyInlineStyle);
+});
diff --git a/exercises/01.1-The-Style-Tag/solution.hide.html b/exercises/01.1-The-Style-Tag/solution.hide.html
@@ -0,0 +1,12 @@
+<!-- add a style tag and select the p tag and make it color blue -->
+<style>
+	/* the website CSS Styles go here */
+	p {
+		color: blue;
+	}
+</style>
+<p>
+	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
+	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
+	math,writing, and confidence.
+</p>
diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js
@@ -0,0 +1,22 @@
+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 p = document.querySelector("p");
+
+test("There should be a p tag", ()=>{
+    expect(p).toBeTruthy();
+})
+
+test("The p tag color should be blue", ()=>{
+    let styles = window.getComputedStyle(p);
+    expect(styles["color"]).toBe("blue");
+});
+
+test("The p tag should not contain any inline style", ()=>{
+    let emptyBodyInlineStyle = {};
+    expect(p.style._values).toEqual(emptyBodyInlineStyle);
+});
diff --git a/exercises/01.2-Your-First-Style/solution.hide.html b/exercises/01.2-Your-First-Style/solution.hide.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			a {
+				/* change this style to blue */
+				color: yellow;
+			}
+		</style>
+	</head>
+	<body>
+		Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
+	</body>
+</html>
diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js
@@ -1,31 +1,30 @@
-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');
+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();
-  });
+describe("All the styles should be applied", ()=>{
+  const a = document.querySelector("a");
 
-  it("The background should be blue", function() {
-    const body = document.querySelector("body");
-    var styles = window.getComputedStyle(body);
-    expect(styles["background"]).toBe("blue");
+  test("The anchor tag should be yellow", ()=>{
+    let styles = window.getComputedStyle(a);
+    expect(styles["color"]).toBe("yellow");
   });
-  it("The body tag should not contains any inline style", function() {
+
+  test("The body tag should not contain any inline style", ()=>{
     let bodyInlineStyle = document.getElementsByTagName("body");
     let emptyBodyInlineStyle = {};
     expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
-    // console.log(bodyInlineStyle[0].style._values.background);
   });
-  it("You should not change the existing head tag elements", function () {
+
+  test("The anchor tag should not contain any inline style", ()=>{
+    let emptyBodyInlineStyle = {};
+    expect(a.style._values).toEqual(emptyBodyInlineStyle);
+  });
+
+  test("You should not change the existing head tag elements",  ()=>{
     let head = document.querySelector('head')
     expect(head).toBeTruthy()
 

diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html
@@ -3,6 +3,9 @@
 	<head>
 		<style>
 			/* Your code here */
+			body {
+				background-color: blue;
+			}
 		</style>
 	</head>
 	<body>

diff --git a/exercises/01.3-Your-Second-Style/solution.hide.html b/exercises/01.3-Your-Second-Style/solution.hide.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			/* Your code here */
+			body {
+				background: blue;
+			}
+		</style>
+	</head>
+	<body>
+		Hello! My background should be blue!
+	</body>
+</html>
diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
@@ -1,33 +1,27 @@
-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');
+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();
-  });
+describe("All the styles should be applied", ()=>{
+  const body = document.querySelector("body");
 
-  it("The background should be blue", function() {
-    const body = document.querySelector("body");
-    var styles = window.getComputedStyle(body);
+  test("The background should be blue", ()=>{
+    let styles = window.getComputedStyle(body);
     expect(styles["background"]).toBe("blue");
   });
-  it("The body tag should not contains any inline style", function() {
-    let bodyInlineStyle = document.getElementsByTagName("body");
+
+  test("The body tag should not contains any inline style", ()=>{
     let emptyBodyInlineStyle = {};
-    expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
-    // console.log(bodyInlineStyle[0].style._values.background);
+    expect(body.style._values).toEqual(emptyBodyInlineStyle);
   });
-  it("You should not change the existing head tag elements", function () {
+
+  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)
   })

diff --git a/exercises/02-Separate-Stylesheet/solution.hide.css b/exercises/02-Separate-Stylesheet/solution.hide.css
@@ -0,0 +1,7 @@
+/* your styles here:
+    1. Select the body tag.
+    2. Add the background rule equal to blue.
+ */
+body {
+	background: blue;
+}
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
@@ -1,64 +1,34 @@
 const fs=require("fs");
 const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
+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");
 
-describe("All the styles should be applied", function () {
-  beforeEach(() => {
-    //here I import the HTML into the document
-    document.documentElement.innerHTML=html.toString();
+describe("All the styles should be applied", ()=>{
+  const link = document.querySelector("link");
+  const body = document.querySelector("body");
 
-    //apply the styles from the stylesheet if needed
-
-
-
-  });
-  afterEach(() => {
-    jest.resetModules();
-  });
-  it("The body tag should not contains any inline style", function () {
-    document.querySelector(
-      "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
-    let bodyInlineStyle=document.getElementsByTagName("body");
+  test("The body tag should not contains any inline style", ()=>{
+    document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
     let emptyBodyInlineStyle={};
-    expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
-    // expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
-    //   undefined
-    // );
-
-    console.log(bodyInlineStyle[0].style._values);
+    expect(body.style._values).toEqual(emptyBodyInlineStyle)
   });
 
-  it("the background-size should be 'contain' without quotes", function () {
-    document.querySelector(
-      "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
-    // get computed styles of any element you like
-    const body=document.querySelector("body");
-    let styles=window.getComputedStyle(body);
-    expect(styles["background-size"]).toBe("contain");
-  });
-
-  it("the background-repeat should be 'inherit' without quotes", function () {
-    document.querySelector(
-      "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
-
-    const body=document.querySelector("body");
-    let styles=window.getComputedStyle(body);
-    expect(styles["background-repeat"]).toBe("inherit");
-  });
-  it("You should not change the existing head tag elements", function () {
+  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 pathname = new URL(document.querySelector('link').href).pathname
-    expect(pathname).toBe('/styles.css')
+    let href = link.getAttribute("href")
+    expect(href).toEqual('./styles.css')
+  });
+
+  test("Your body tag background color should be blue", ()=>{
+    let styles = window.getComputedStyle(body)
+    expect(styles["background-color"]).toBe("blue")
   })
 });
diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/02.1-Background/solution.hide.css
@@ -0,0 +1,5 @@
+body {
+	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
+	background-size: contain;
+	background-repeat: inherit;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,6 @@ Mira este ejemplo: @@
     ```HTML
     <style>
         a {
-            /* cambia este estilo a yellow */
             color: pink;
         }
     </style>
@@ Expand Down @@