Skip to content

Commit 9f065e2

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request 4GeeksAcademy#60 from UmiKami/01-Hello-World-04.2-Apply-several-classes
01 hello world 04.2 apply several classes
2 parents 5f9ff74 + 91383e5 commit 9f065e2

File tree

28 files changed

+393
-267
lines changed

28 files changed

+393
-267
lines changed

‎exercises/01-Hello-World/README.es.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ Mira este ejemplo:
1919
```HTML
2020
<style>
2121
a {
22-
/* cambia este estilo a yellow */
2322
color: pink;
2423
}
2524
</style>

‎exercises/01-Hello-World/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ Look at this example:
1818
```HTML
1919
<style>
2020
a {
21-
/* change this style to yellow */
2221
color: pink;
2322
}
2423
</style>

‎exercises/01-Hello-World/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!-- your code here -->
1+
<!-- your code here -->

‎exercises/01-Hello-World/solution.hide.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- your code here -->
2+
<style>
3+
a {
4+
color: pink;
5+
}
6+
</style>
7+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

‎exercises/01-Hello-World/test.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4+
document.documentElement.innerHTML = html.toString();
5+
6+
jest.dontMock('fs');
7+
8+
const a = document.querySelector("a");
9+
10+
test("There should be an anchor tag", ()=>{
11+
expect(a).toBeTruthy()
12+
})
13+
14+
test("The anchor tag should be pink", ()=>{
15+
let styles = window.getComputedStyle(a);
16+
expect(styles["color"]).toBe("pink");
17+
});
18+
19+
test("There should be a href attribute pointing to 'https://google.com'", ()=>{
20+
let href = a.getAttribute('href');
21+
expect(href).toBeTruthy();
22+
expect(href).toBe("https://google.com");
23+
})
24+
25+
test("There should be a target attribute pointing to '_blank'", ()=>{
26+
let target = a.getAttribute('target');
27+
expect(target).toBeTruthy();
28+
expect(target).toBe("_blank");
29+
})
30+
31+
test("The anchor tag should not contains any inline style", ()=>{
32+
let emptyBodyInlineStyle = {};
33+
expect(a.style._values).toEqual(emptyBodyInlineStyle);
34+
});

‎exercises/01.1-The-Style-Tag/solution.hide.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!-- add a style tag and select the p tag and make it color blue -->
2+
<style>
3+
/* the website CSS Styles go here */
4+
p {
5+
color: blue;
6+
}
7+
</style>
8+
<p>
9+
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
10+
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
11+
math,writing, and confidence.
12+
</p>

‎exercises/01.1-The-Style-Tag/test.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4+
document.documentElement.innerHTML = html.toString();
5+
6+
jest.dontMock('fs');
7+
8+
const p = document.querySelector("p");
9+
10+
test("There should be a p tag", ()=>{
11+
expect(p).toBeTruthy();
12+
})
13+
14+
test("The p tag color should be blue", ()=>{
15+
let styles = window.getComputedStyle(p);
16+
expect(styles["color"]).toBe("blue");
17+
});
18+
19+
test("The p tag should not contain any inline style", ()=>{
20+
let emptyBodyInlineStyle = {};
21+
expect(p.style._values).toEqual(emptyBodyInlineStyle);
22+
});

‎exercises/01.2-Your-First-Style/solution.hide.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
a {
6+
/* change this style to blue */
7+
color: yellow;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
13+
</body>
14+
</html>

‎exercises/01.2-Your-First-Style/tests.js

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
1-
const fs = require("fs");
2-
const path = require("path");
3-
const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4-
// const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
1+
const fs = require('fs');
2+
const path = require('path');
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4+
document.documentElement.innerHTML = html.toString();
55

6-
jest.dontMock("fs");
6+
jest.dontMock('fs');
77

8-
describe("All the styles should be applied", function() {
9-
beforeEach(() => {
10-
//here I import the HTML into the document
11-
document.documentElement.innerHTML = html.toString();
12-
});
13-
afterEach(() => {
14-
jest.resetModules();
15-
});
8+
describe("All the styles should be applied", ()=>{
9+
const a = document.querySelector("a");
1610

17-
it("The background should be blue", function() {
18-
const body = document.querySelector("body");
19-
var styles = window.getComputedStyle(body);
20-
expect(styles["background"]).toBe("blue");
11+
test("The anchor tag should be yellow", ()=>{
12+
let styles = window.getComputedStyle(a);
13+
expect(styles["color"]).toBe("yellow");
2114
});
22-
it("The body tag should not contains any inline style", function() {
15+
16+
test("The body tag should not contain any inline style", ()=>{
2317
let bodyInlineStyle = document.getElementsByTagName("body");
2418
let emptyBodyInlineStyle = {};
2519
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
26-
// console.log(bodyInlineStyle[0].style._values.background);
2720
});
28-
it("You should not change the existing head tag elements", function () {
21+
22+
test("The anchor tag should not contain any inline style", ()=>{
23+
let emptyBodyInlineStyle = {};
24+
expect(a.style._values).toEqual(emptyBodyInlineStyle);
25+
});
26+
27+
test("You should not change the existing head tag elements", ()=>{
2928
let head = document.querySelector('head')
3029
expect(head).toBeTruthy()
3130

‎exercises/01.3-Your-Second-Style/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<style>
55
/* Your code here */
6+
body {
7+
background-color: blue;
8+
}
69
</style>
710
</head>
811
<body>

‎exercises/01.3-Your-Second-Style/solution.hide.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
/* Your code here */
6+
body {
7+
background: blue;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
Hello! My background should be blue!
13+
</body>
14+
</html>

‎exercises/01.3-Your-Second-Style/tests.js

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
1-
const fs = require("fs");
2-
const path = require("path");
3-
const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4-
// const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
1+
const fs = require('fs');
2+
const path = require('path');
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4+
document.documentElement.innerHTML = html.toString();
55

6-
jest.dontMock("fs");
6+
jest.dontMock('fs');
77

8-
describe("All the styles should be applied", function() {
9-
beforeEach(() => {
10-
//here I import the HTML into the document
11-
document.documentElement.innerHTML = html.toString();
12-
});
13-
afterEach(() => {
14-
jest.resetModules();
15-
});
8+
describe("All the styles should be applied", ()=>{
9+
const body = document.querySelector("body");
1610

17-
it("The background should be blue", function() {
18-
const body = document.querySelector("body");
19-
var styles = window.getComputedStyle(body);
11+
test("The background should be blue", ()=>{
12+
let styles = window.getComputedStyle(body);
2013
expect(styles["background"]).toBe("blue");
2114
});
22-
it("The body tag should not contains any inline style", function() {
23-
let bodyInlineStyle = document.getElementsByTagName("body");
15+
16+
test("The body tag should not contains any inline style", ()=>{
2417
let emptyBodyInlineStyle = {};
25-
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
26-
// console.log(bodyInlineStyle[0].style._values.background);
18+
expect(body.style._values).toEqual(emptyBodyInlineStyle);
2719
});
28-
it("You should not change the existing head tag elements", function () {
20+
21+
test("You should not change the existing head tag elements", ()=>{
2922
let head = document.querySelector('head')
3023
expect(head).toBeTruthy()
24+
3125
let meta = head.querySelector("meta")
3226
expect(meta).toBe(null)
3327
})

‎exercises/02-Separate-Stylesheet/solution.hide.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* your styles here:
2+
1. Select the body tag.
3+
2. Add the background rule equal to blue.
4+
*/
5+
body {
6+
background: blue;
7+
}

‎exercises/02-Separate-Stylesheet/tests.js

Lines changed: 16 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,34 @@
11
const fs=require("fs");
22
const path=require("path");
3-
const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
44
const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
document.documentElement.innerHTML = html.toString();
56

67
jest.dontMock("fs");
78

8-
describe("All the styles should be applied", function () {
9-
beforeEach(() => {
10-
//here I import the HTML into the document
11-
document.documentElement.innerHTML=html.toString();
9+
describe("All the styles should be applied", ()=>{
10+
const link = document.querySelector("link");
11+
const body = document.querySelector("body");
1212

13-
//apply the styles from the stylesheet if needed
14-
15-
16-
17-
});
18-
afterEach(() => {
19-
jest.resetModules();
20-
});
21-
it("The body tag should not contains any inline style", function () {
22-
document.querySelector(
23-
"head"
24-
).innerHTML=`<style>${css.toString()}</style>`;
25-
let bodyInlineStyle=document.getElementsByTagName("body");
13+
test("The body tag should not contains any inline style", ()=>{
14+
document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
2615
let emptyBodyInlineStyle={};
27-
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
28-
// expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
29-
// undefined
30-
// );
31-
32-
console.log(bodyInlineStyle[0].style._values);
16+
expect(body.style._values).toEqual(emptyBodyInlineStyle)
3317
});
3418

35-
it("the background-size should be 'contain' without quotes", function () {
36-
document.querySelector(
37-
"head"
38-
).innerHTML=`<style>${css.toString()}</style>`;
39-
// get computed styles of any element you like
40-
const body=document.querySelector("body");
41-
let styles=window.getComputedStyle(body);
42-
expect(styles["background-size"]).toBe("contain");
43-
});
44-
45-
it("the background-repeat should be 'inherit' without quotes", function () {
46-
document.querySelector(
47-
"head"
48-
).innerHTML=`<style>${css.toString()}</style>`;
49-
50-
const body=document.querySelector("body");
51-
let styles=window.getComputedStyle(body);
52-
expect(styles["background-repeat"]).toBe("inherit");
53-
});
54-
it("You should not change the existing head tag elements", function () {
19+
test("You should not change the existing head tag elements", ()=>{
5520
let head = document.querySelector('head')
5621
expect(head).toBeTruthy()
5722

5823
let meta = head.querySelector("meta")
5924
expect(meta).toBe(null)
6025

61-
const pathname = new URL(document.querySelector('link').href).pathname
62-
expect(pathname).toBe('/styles.css')
26+
let href = link.getAttribute("href")
27+
expect(href).toEqual('./styles.css')
28+
});
29+
30+
test("Your body tag background color should be blue", ()=>{
31+
let styles = window.getComputedStyle(body)
32+
expect(styles["background-color"]).toBe("blue")
6333
})
6434
});

‎exercises/02.1-Background/solution.hide.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
3+
background-size: contain;
4+
background-repeat: inherit;
5+
}

0 commit comments

Comments
 (0)