tag should exists", function() {
+ test("The
tag should exists", () => {
document.querySelector(
"head"
).innerHTML = ``;
expect(document.querySelector("div")).toBeTruthy();
});
- it("the width in the div Tag should be '200px'", function() {
+ test("the width in the div Tag should be '200px'", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -38,7 +32,7 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["width"]).toBe("200px");
});
- it("the height in the div Tag should be '200px'", function() {
+ test("the height in the div Tag should be '200px'", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -47,7 +41,7 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["height"]).toBe("200px");
});
- it("the border radius in the div Tag should be '100%'", function() {
+ test("the border radius in the div Tag should be '100%'", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -56,7 +50,7 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["border-radius"]).toBe("100%");
});
- it("the background position x in the div Tag should be 'center'", function() {
+ test("the background position x in the div Tag should be 'center'", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -65,7 +59,7 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["background-position-x"]).toBe("center");
});
- it("the background position y in the div Tag should be 'center'", function() {
+ test("the background position y in the div Tag should be 'center'", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -74,7 +68,7 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["background-position-y"]).toBe("center");
});
- it("the background image in the div Tag should exists", function() {
+ test("the background image in the div Tag should exists", () => {
// get computed styles of any element you like
document.querySelector(
"head"
@@ -83,17 +77,15 @@ describe("All the styles should be applied", function() {
let idTagStyles = window.getComputedStyle(divTag);
expect(idTagStyles["background-image"]).toBeTruthy();
});
- 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).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)
+
+ expect(meta).toBeTruthy()
+
+ let href = link.getAttribute('href')
+ expect(href).toBe('./styles.css')
+
+ expect(title).toBeTruthy()
})
});
From 2ff5fcafa6d3e0bb1426504ba16b627236da6831 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Thu, 4 Aug 2022 17:37:26 +0000
Subject: [PATCH 12/32] added solution
---
exercises/09-Anchor-Styles/solution.hide.css | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css
index e69de29b..b3e6a36b 100644
--- a/exercises/09-Anchor-Styles/solution.hide.css
+++ b/exercises/09-Anchor-Styles/solution.hide.css
@@ -0,0 +1,15 @@
+.threeDimension {
+ display: block;
+ border: 1px solid;
+ border-color: #aaa #000 #000 #aaa;
+ width: 8em;
+ background: #fc0;
+ text-decoration: none;
+ text-align: center;
+ color: black;
+}
+
+a.threeDimension:active {
+ /* your code here*/
+ border-color: #000 #aaa #aaa #000;
+}
\ No newline at end of file
From e5ae3f25e771f0ce5d39970048b612e2c4f306aa Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Thu, 4 Aug 2022 17:37:58 +0000
Subject: [PATCH 13/32] added test to prevent user from changing default styles
plus minor improvements
---
exercises/09-Anchor-Styles/tests.js | 98 +++++++++++++++++------------
1 file changed, 58 insertions(+), 40 deletions(-)
diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js
index cab43954..73192e4f 100644
--- a/exercises/09-Anchor-Styles/tests.js
+++ b/exercises/09-Anchor-Styles/tests.js
@@ -1,68 +1,86 @@
-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");
-let cssArray=null;
-jest.dontMock("fs");
+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();
-describe("All the styles should be applied", function () {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML=html.toString();
+jest.dontMock('fs');
- //apply the styles from the stylesheet if needed
+let cssArray = null;
-
- });
- afterEach(() => {
- jest.resetModules();
- });
-
- it("You should not add your rules above the existing code", function () {
+describe("All the styles should be applied", () => {
+ const meta = document.querySelector("meta")
+ const title = document.querySelector('title')
+ const link = document.querySelector('link')
+ test("You should not add your rules above the existing code", () => {
document.querySelector(
"head"
- ).innerHTML=``;
- let cssArray=document.styleSheets[0].cssRules[0].selectorText;
+ ).innerHTML = ``;
+ let cssArray = document.styleSheets[0].cssRules[0].selectorText;
expect(cssArray).toBe(".threeDimension");
})
- it("the 'a' tag in the index.html should not be deleted", function () {
+ test("the 'a' tag in the index.html should not be deleted", () => {
// we can read from the source code
// console.log(html.toString());
- expect(html.toString().indexOf(`-1).toBeTruthy();
+ expect(html.toString().indexOf(` -1).toBeTruthy();
});
- it("The border-color rule for the 'threeDimension active ' property should match the instruction color", function () {
+ test("The border-color rule for the 'threeDimension active ' property should match the instruction color", () => {
// get computed styles of any element you like
// let cssArray=document.styleSheets[0].cssRules;
document.querySelector(
"head"
- ).innerHTML=``;
- let cssArray=document.styleSheets[0].cssRules;
+ ).innerHTML = ``;
+ let cssArray = document.styleSheets[0].cssRules;
- let orangeHoverSelector="";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === "a.threeDimension:active") {
+ orangeHoverSelector = cssArray[i].style['border-color'];
}
}
-
expect(orangeHoverSelector).toBe("#000 #aaa #aaa #000");
+
+ });
+ test("You should not change the default styles", () => {
+ // get computed styles of any element you like
+ // let cssArray=document.styleSheets[0].cssRules;
+ document.querySelector(
+ "head"
+ ).innerHTML = ``;
+ let cssArray = document.styleSheets[0].cssRules;
+
+ let borderColor = "";
+ let color = "";
+ let background = "";
+ let width = "";
+ for (let i = 0; i < cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".threeDimension") {
+ borderColor = cssArray[i].style["border-color"];
+ color = cssArray[i].style['color'];
+ background = cssArray[i].style['background'];
+ width = cssArray[i].style['width'];
+ expect(borderColor).toBe("#aaa #000 #000 #aaa");
+ expect(color).toBe("black");
+ expect(background).toBe("#fc0");
+ expect(width).toBe("8em");
+ }
+ }
+
});
- 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).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)
+
+ expect(meta).toBeTruthy()
+
+ let href = link.getAttribute('href')
+ expect(href).toBe('./styles.css')
+
+ expect(title).toBeTruthy()
})
});
From b512f717377fe13c5b66cfab03336c81531a4c51 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Thu, 4 Aug 2022 19:22:40 +0000
Subject: [PATCH 14/32] added solutions for html and css
---
exercises/10-Your-Own-Font/solution.hide.css | 4 ++++
exercises/10-Your-Own-Font/solution.hide.html | 20 +++++++++++++++++++
2 files changed, 24 insertions(+)
create mode 100644 exercises/10-Your-Own-Font/solution.hide.html
diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css
index e69de29b..371e026b 100644
--- a/exercises/10-Your-Own-Font/solution.hide.css
+++ b/exercises/10-Your-Own-Font/solution.hide.css
@@ -0,0 +1,4 @@
+.myTitle {
+ /*your code here*/
+ font-family: 'Roboto'; /*Varies depending on the font you chose*/
+}
diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html
new file mode 100644
index 00000000..b2268633
--- /dev/null
+++ b/exercises/10-Your-Own-Font/solution.hide.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+ 10 Your Own Font
+
+
+
+
Date: Thu, 4 Aug 2022 19:23:45 +0000
Subject: [PATCH 15/32] fixed issue with CSS rules, improved tests
---
exercises/10-Your-Own-Font/tests.js | 60 +++++++++++++----------------
1 file changed, 27 insertions(+), 33 deletions(-)
diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js
index dd13147d..52e13aa6 100644
--- a/exercises/10-Your-Own-Font/tests.js
+++ b/exercises/10-Your-Own-Font/tests.js
@@ -1,53 +1,47 @@
-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");
-
-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
- // document.querySelector(
- // "head"
- // ).innerHTML=``;
- });
- afterEach(() => {
- jest.resetModules();
- });
+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');
+
+let cssArray = null;
+
+describe("All the styles should be applied", ()=>{
+ const link = document.querySelectorAll("link")
+ test("the font-family in the .myTitle should exists", ()=>{
+ document.querySelector(
+ "head"
+ ).innerHTML = ``;
- it("the font-family in the .myTitle should exists", function () {
// get computed styles of any element you like
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
// console.log("%%% ", cssArray)
- let orangeHoverSelector="";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myTitle") {
// console.log("%%% ", cssArray[i].selectorText)
- orangeHoverSelector=cssArray[i].style['font-family'];
+ orangeHoverSelector = cssArray[i].style['font-family'];
}
}
expect(orangeHoverSelector).toBeTruthy();
});
- it('the h1 tag should have a class "myTitle"', function () {
+ test('the h1 tag should have a class "myTitle"', ()=>{
//or use query selector to compare hoy mane scriptags do we have
- const h=document.querySelector("h1");
+ const h = document.querySelector("h1");
expect(h.classList.contains("myTitle")).toBeTruthy();
});
- it("The link should be included in the head tag", function () {
+ test("The link should be included in the head tag", ()=>{
// let headContent=document.getElementsByTagName("*")
// console.log("###", headContent[1].innerHTML)
- console.log("###", document.head.childNodes)
- expect(document.querySelectorAll("link").length).toBe(2);
+ expect(link.length).toBe(2);
});
- it("The Head tag should not includes a Style tag", function () {
- expect(html.toString().indexOf(`-1).toBeFalsy();
+ test("The Head tag should not includes a Style tag", ()=>{
+ expect(html.toString().indexOf(` -1).toBeFalsy();
});
});
From a01e4bf84c31401661d13f72b9f7a0d3e0f2703f Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Thu, 4 Aug 2022 19:38:45 +0000
Subject: [PATCH 16/32] added solution
---
exercises/11-Font-Awesome-Icons/solution.hide.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/11-Font-Awesome-Icons/solution.hide.html
index bd68c2a7..e9778b12 100644
--- a/exercises/11-Font-Awesome-Icons/solution.hide.html
+++ b/exercises/11-Font-Awesome-Icons/solution.hide.html
@@ -9,9 +9,9 @@
My unique font
+ + + \ No newline at end of file From e4452cc9bc10c0beeb41aadd3cb757c5300d9b3b Mon Sep 17 00:00:00 2001 From: ErnestoXG-
-
- Hello -
- Flag -
- Heart +
- Hello +
- Hello +
- Hello