+ 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. +
\ No newline at end of file diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js new file mode 100644 index 00000000..a4be505b --- /dev/null +++ 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); +}); \ No newline at end of file diff --git a/exercises/01.2-Your-First-Style/solution.hide.html b/exercises/01.2-Your-First-Style/solution.hide.html new file mode 100644 index 00000000..3907bb3c --- /dev/null +++ b/exercises/01.2-Your-First-Style/solution.hide.html @@ -0,0 +1,14 @@ + + + + + + + Hello! I am an anchor in red, change my color to yellow + + diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js index 8e94018b..0eabdf65 100644 --- 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 index 998d973a..03e672a3 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -3,6 +3,9 @@ diff --git a/exercises/01.3-Your-Second-Style/solution.hide.html b/exercises/01.3-Your-Second-Style/solution.hide.html new file mode 100644 index 00000000..9b239409 --- /dev/null +++ b/exercises/01.3-Your-Second-Style/solution.hide.html @@ -0,0 +1,14 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js index 2e0fa1a3..147aabc5 100644 --- 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 new file mode 100644 index 00000000..5250e305 --- /dev/null +++ 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 index a583e81e..f36df975 100644 --- 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=``; - let bodyInlineStyle=document.getElementsByTagName("body"); + test("The body tag should not contains any inline style", ()=>{ + document.querySelector("head").innerHTML = ``; 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=``; - // 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=``; - - 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 new file mode 100644 index 00000000..8c72a684 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js index cfde6b1f..b223105f 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/02.1-Background/tests.js @@ -1,67 +1,53 @@ -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"); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - - - - }); - afterEach(() => { - jest.resetModules(); - }); - it("The body tag should not contains any inline style", function () { +describe("All the styles should be applied", ()=>{ + const body = document.querySelector("body"); + const link = document.querySelector("link"); + const title = document.querySelector('title'); + + test("The body tag should not contains any inline style", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let bodyInlineStyle=document.getElementsByTagName("body"); - let emptyBodyInlineStyle={}; - expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); - // expect(bodyInlineStyle[0].style._values.background - repeat).toBe( - // undefined - // ); - - console.log(bodyInlineStyle[0].style._values); + ).innerHTML = ``; + let emptyBodyInlineStyle = {}; + expect(body.style._values).toEqual(emptyBodyInlineStyle); }); - it("the background-size should be 'contain' without quotes", function () { + test("the background-size should be 'contain' without quotes", ()=>{ document.querySelector( "head" - ).innerHTML=``; + ).innerHTML = ``; // get computed styles of any element you like - const body=document.querySelector("body"); - let styles=window.getComputedStyle(body); + let styles = window.getComputedStyle(body); expect(styles["background-size"]).toBe("contain"); }); - it("the background-repeat should be 'inherit' without quotes", function () { + test("the background-repeat should be 'inherit' without quotes", ()=>{ document.querySelector( "head" - ).innerHTML=``; + ).innerHTML = ``; - const body=document.querySelector("body"); - let styles=window.getComputedStyle(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 title = head.querySelector('title').innerHTML - expect(title).toBe('02 Background') + const href = link.getAttribute("href") + expect(href).toBe('./styles.css') + + let titleInner = title.innerHTML + expect(titleInner).toBe('02 Background') }) }); diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/03-Inline-Styles/solution.hide.html new file mode 100644 index 00000000..1c3a3828 --- /dev/null +++ b/exercises/03-Inline-Styles/solution.hide.html @@ -0,0 +1,17 @@ + + + +| Hello | +
| My brother | +
Hello!
+World!
+ + diff --git a/exercises/04-Class-Selector/test.js b/exercises/04-Class-Selector/test.js new file mode 100644 index 00000000..58c20d17 --- /dev/null +++ b/exercises/04-Class-Selector/test.js @@ -0,0 +1,40 @@ +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"); + +describe("Both p tags should have a blue background", () => { + const body = document.querySelector("body") + const p = document.querySelectorAll("p"); + 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) + + let title = head.querySelector('title').innerHTML + expect(title).toBe('04 Class selector') + }); + + test("The body tag should not contains any inline style", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let emptyBodyInlineStyle = {}; + expect(body.style._values).toEqual(emptyBodyInlineStyle) + }); + + test("There should be two p tags", () => { + expect(p.length).toBe(2) + }); + test("Both p tags should have a class name 'b-blue' without the quotation marks", () => { + p.forEach(e=>{ + let eClass = e.getAttribute("class"); + expect(eClass).toBe("b-blue") + }) + }); +}); diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html index 2af5a24c..1525b6cf 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/04.1-Combined-Rules/index.html @@ -2,9 +2,7 @@ -