Skip to content

Commit af5afa3

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request 4GeeksAcademy#61 from UmiKami/04.3-id-Selector-to-13-Anchor-Like-Button
04.3 id selector to 13 anchor like button
2 parents 0da679b + b68df77 commit af5afa3

File tree

36 files changed

+597
-563
lines changed

36 files changed

+597
-563
lines changed

‎exercises/04.3-id-Selector/solution.hide.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04.3 ID selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<span id="button1">I should look like a button</span>
12+
</body>
13+
</html>

‎exercises/04.3-id-Selector/test.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 span = document.querySelector("span");
9+
const link = document.querySelector("link");
10+
11+
test("There should be a span tag", () => {
12+
expect(span).toBeTruthy()
13+
});
14+
15+
test("The span tag should have id 'button1'", () => {
16+
expect(span).toBeTruthy();
17+
let id = span.id
18+
expect(id).toBeTruthy();
19+
expect(id).toBe('button1');
20+
});
21+
22+
test("The span tag should not contain any inline style", () => {
23+
let emptyBodyInlineStyle = {};
24+
expect(span).toBeTruthy()
25+
expect(span.style._values).toEqual(emptyBodyInlineStyle);
26+
});
27+
28+
test("You should not change the existing head tag elements", () => {
29+
let head = document.querySelector('head');
30+
expect(head).toBeTruthy();
31+
32+
let meta = head.querySelector("meta");
33+
expect(meta).toBe(null);
34+
35+
const href = link.getAttribute("href");
36+
expect(href).toBe('./styles.css');
37+
});

‎exercises/05-Specificity/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Se trata del nivel de especificidad. Si especificas que tu `div` con `id="thirdi
99

1010
## 📝 Instrucciones:
1111

12-
1. Anula el color de fondo (`background-color`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde.
12+
1. Anula el color de fondo (`background`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde.
1313

1414
## 💡 Pista:
1515

‎exercises/05-Specificity/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ It's all about the level of Specificity. If you specify that your `div` with `id
1313

1414
## 📝 Instrucciones:
1515

16-
1. Override the `background-color` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
16+
1. Override the `background` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
1717

1818

1919
### 💡 Hint:

‎exercises/05-Specificity/solution.hide.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
ul li {
2+
background: blue;
3+
}
4+
5+
#thirditem {
6+
background: yellow;
7+
}
8+
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
9+
#thirditem {
10+
background: green !important;
11+
}

‎exercises/05-Specificity/styles.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
ul li{
1+
ul li {
22
background: blue;
33
}
44

5-
#thirditem{
5+
#thirditem {
66
background: yellow;
7-
}
7+
}
88
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
9-

‎exercises/05-Specificity/tests.js

Lines changed: 25 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,50 @@
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+
const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
document.documentElement.innerHTML = html.toString();
56

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

89
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();
1210

13-
});
14-
afterEach(() => {
15-
jest.resetModules();
16-
});
17-
18-
19-
it("You should not change the existing head tag elements", function () {
11+
test("You should not change the existing head tag elements", function () {
2012
let head = document.querySelector('head')
2113
expect(head).toBeTruthy()
22-
14+
2315
let meta = head.querySelector("meta")
2416
expect(meta).not.toBe(null)
25-
17+
2618
const pathname = new URL(document.querySelector('link').href).pathname
2719
expect(pathname).toBe('/styles.css')
28-
20+
2921
let title = head.querySelector('title')
3022
expect(title).not.toBe(null)
3123
})
32-
it("You should not delete or edit the existing code", function () {
3324

34-
document.querySelector(
35-
"head"
36-
).innerHTML=`<style>${css.toString()}</style>`;
37-
let cssArray=document.styleSheets[0].cssRules[0].selectorText;
38-
// console.log("cssArray:",cssArray)
39-
let cssArrayBackground= document.styleSheets[0].cssRules[0].style.background
40-
console.log("back:",cssArrayBackground)
41-
let thirdItSelector=document.styleSheets[0].cssRules[1].selectorText;
42-
let thirdItBackground = document.styleSheets[0].cssRules[1].style.background
25+
test("You should not delete or edit the existing code", function () {
26+
document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
27+
28+
let cssArray = document.styleSheets[0].cssRules[0].selectorText;
29+
let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background;
30+
let thirdItSelector = document.styleSheets[0].cssRules[1].selectorText;
31+
let thirdItBackground = document.styleSheets[0].cssRules[1].style.background;
32+
4333
expect(thirdItSelector).toBe("#thirditem");
4434
expect(thirdItBackground).toBe("yellow");
4535
expect(cssArray).toBe("ul li");
4636
expect(cssArrayBackground).toBe("blue");
4737
})
48-
it("You should use a more specific rule using the !important annotation ", function () {
38+
test("You should use a more specific rule using the !important annotation ", function () {
4939

5040
document.querySelector(
5141
"head"
52-
).innerHTML=`<style>${css.toString()}</style>`;
53-
let cssArray=document.styleSheets[0].cssRules;
54-
// console.log("NEW", cssArray[2].style._importants)
55-
let orangeHoverSelector="";
56-
for (let i=0; i<cssArray.length; i++) {
57-
if (cssArray[i].selectorText==="#thirditem"&&cssArray[i].style._importants.background==="important") {
58-
orangeHoverSelector=cssArray[i].style.background;
42+
).innerHTML = `<style>${css.toString()}</style>`;
43+
let cssArray = document.styleSheets[0].cssRules;
44+
let orangeHoverSelector = "";
45+
for (let i = 0; i < cssArray.length; i++) {
46+
if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important") {
47+
orangeHoverSelector = cssArray[i].style.background;
5948
}
6049
}
6150

‎exercises/06-Practicing-Rules/README.es.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: `../../.learn/assets/background-vertical.jpg?raw=true`
66

7-
2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
7+
2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
88

99
3. Cambia el color del `h1` a rojo(`red`).
1010

1111
4. Haz todos los `h2` tengan subrayado.
1212

13-
5. Centra el `h1`.
13+
5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
1414

15-
6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
15+
6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto).
1616

17-
7. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto), y luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
17+
7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
1818

1919
8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo).
2020

‎exercises/06-Practicing-Rules/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU"
88

99
1. Set this URL as the background image of the page, and repeat it vertically only: `../../.learn/assets/background-vertical.jpg?raw=true`
1010

11-
2. Change the font-type of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
11+
2. Change the font-family of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
1212

1313
3. Change the color of `h1` to `red`.
1414

1515
4. Make all the `h2's` with an `underline`.
1616

17-
5. Center the `h1` to the middle.
17+
5. Add a `left padding` to the whole document of `20px` to make it easier to read.
1818

19-
6. Add a `left padding` to the whole document of `20px` to make it easier to read.
19+
6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning".
2020

21-
7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph.
21+
7. Then apply a `padding` of `5px` to all sides of that paragraph.
2222

2323
8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it).
2424

‎exercises/06-Practicing-Rules/index.html

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@
88
</head>
99

1010
<body>
11-
<h1>The learning essay</h1>
12-
<h2>3 reasons you know you are learning</h2>
13-
<p id="id1">
14-
We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
15-
</p>
16-
<ol>
17-
<li>You are able to complete the exercises by yourself.</li>
18-
<li>You understand what the teacher is talking about</li>
19-
<li>Your are able to have conversations about the topic</li>
20-
</ol>
21-
<h2>3 reasons you know love what you are learning</h2>
22-
<ul>
23-
<li>Time passes fast.</li>
24-
<li>
25-
You are anxious to finish this excercise and start the next one.
26-
</li>
27-
<li>Is 12am and you don't want to go to sleep.</li>
28-
</ul>
29-
<p>
30-
If you can't sleep, what better than watching videos of cats?
31-
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
32-
</p>
11+
<div style="width: 640px">
12+
<h1>The learning essay</h1>
13+
<h2>3 reasons you know you are learning</h2>
14+
<p id="id1">
15+
We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
16+
</p>
17+
<ol>
18+
<li>You are able to complete the exercises by yourself.</li>
19+
<li>You understand what the teacher is talking about</li>
20+
<li>Your are able to have conversations about the topic</li>
21+
</ol>
22+
<h2>3 reasons you know love what you are learning</h2>
23+
<ul>
24+
<li>Time passes fast.</li>
25+
<li>You are anxious to finish this excercise and start the next one.</li>
26+
<li>Is 12am and you don't want to go to sleep.</li>
27+
</ul>
28+
<p>
29+
If you can't sleep, what better than watching videos of cats?
30+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
31+
</p>
32+
</div>
3333
</body>
34-
</html>
34+
</html>

‎exercises/06-Practicing-Rules/solution.hide.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* add your styles here */
2+
body {
3+
background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y;
4+
font-family: "Times New Roman";
5+
padding-left: 20px;
6+
}
7+
8+
#id1 {
9+
background: rgba(255, 255, 255, 0.2);
10+
padding: 5px;
11+
}
12+
13+
h1 {
14+
font-family: "Courier";
15+
color: red;
16+
}
17+
18+
h2 {
19+
text-decoration: underline;
20+
}
21+
22+
a:hover {
23+
color: green;
24+
text-decoration: none;
25+
}

‎exercises/06-Practicing-Rules/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/* add your styles here */
1+
/* add your styles here */

0 commit comments

Comments
 (0)