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>

0 commit comments

Comments
 (0)