Skip to content

Commit 7c58c65

Browse files
tommygonzalezatommygonzaleza
committed
Some solutions and tests modified
1 parent 9aa151e commit 7c58c65

File tree

16 files changed

+68
-71
lines changed

16 files changed

+68
-71
lines changed

‎exercises/04.3-id-Selector/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99

1010
<body>
11-
<span>I should look like a button</span>
11+
<span id="button1">I should look like a button</span>
1212
</body>
1313
</html>

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,29 @@ jest.dontMock('fs');
88
const span = document.querySelector("span");
99
const link = document.querySelector("link");
1010

11-
test("There should be a span tag", ()=>{
11+
test("There should be a span tag", () => {
1212
expect(span).toBeTruthy()
13-
})
14-
test("The span tag should have id 'button1'", ()=>{
13+
});
14+
15+
test("The span tag should have id 'button1'", () => {
16+
expect(span).toBeTruthy();
1517
let id = span.id
16-
expect(id).toBe('button1')
18+
expect(id).toBe('button1');
1719
});
18-
test("The span tag should not contain any inline style", ()=>{
20+
21+
test("The span tag should not contain any inline style", () => {
1922
let emptyBodyInlineStyle = {};
23+
expect(span).toBeTruthy()
2024
expect(span.style._values).toEqual(emptyBodyInlineStyle);
2125
});
2226

23-
test("You should not change the existing head tag elements", ()=>{
24-
let head = document.querySelector('head')
25-
expect(head).toBeTruthy()
27+
test("You should not change the existing head tag elements", () => {
28+
let head = document.querySelector('head');
29+
expect(head).toBeTruthy();
2630

27-
let meta = head.querySelector("meta")
28-
expect(meta).toBe(null)
31+
let meta = head.querySelector("meta");
32+
expect(meta).toBe(null);
2933

30-
const href = link.getAttribute("href")
31-
expect(href).toBe('./styles.css')
32-
});
34+
const href = link.getAttribute("href");
35+
expect(href).toBe('./styles.css');
36+
});

‎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/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: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,15 @@ describe("All the styles should be applied", function () {
2121
let title = head.querySelector('title')
2222
expect(title).not.toBe(null)
2323
})
24-
24+
2525
test("You should not delete or edit the existing code", function () {
26+
document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
2627

27-
document.querySelector(
28-
"head"
29-
).innerHTML = `<style>${css.toString()}</style>`;
3028
let cssArray = document.styleSheets[0].cssRules[0].selectorText;
31-
let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background
32-
console.log("back:", cssArrayBackground)
29+
let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background;
3330
let thirdItSelector = document.styleSheets[0].cssRules[1].selectorText;
34-
let thirdItBackground = document.styleSheets[0].cssRules[1].style.background
31+
let thirdItBackground = document.styleSheets[0].cssRules[1].style.background;
32+
3533
expect(thirdItSelector).toBe("#thirditem");
3634
expect(thirdItBackground).toBe("yellow");
3735
expect(cssArray).toBe("ul li");

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ <h2>3 reasons you know you are learning</h2>
2121
<h2>3 reasons you know love what you are learning</h2>
2222
<ul>
2323
<li>Time passes fast.</li>
24-
<li>
25-
You are anxious to finish this excercise and start the next one.
26-
</li>
24+
<li>You are anxious to finish this excercise and start the next one.</li>
2725
<li>Is 12am and you don't want to go to sleep.</li>
2826
</ul>
2927
<p>
3028
If you can't sleep, what better than watching videos of cats?
3129
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
3230
</p>
3331
</body>
34-
</html>
32+
</html>

‎exercises/06-Practicing-Rules/tests.js‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ document.documentElement.innerHTML = html.toString();
66

77
jest.dontMock('fs');
88

9-
describe("All the styles should be applied", ()=> {
9+
describe("All the styles should be applied", () => {
1010
let meta = document.querySelector("meta")
1111
let link = document.querySelector("link")
1212
let title = document.querySelector('title')
1313

14-
test("the background should match", ()=> {
14+
test("the background should match", () => {
1515
document.querySelector(
1616
"head"
1717
).innerHTML = `<style>${css.toString()}</style>`;
@@ -21,32 +21,32 @@ describe("All the styles should be applied", ()=> {
2121
`url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y`
2222
);
2323
});
24-
test("the font-family should be 'Times New Roman'", ()=> {
24+
test("the font-family should be 'Times New Roman'", () => {
2525
document.querySelector(
2626
"head"
2727
).innerHTML = `<style>${css.toString()}</style>`;
2828
let body = document.querySelector("body");
2929
let styles = window.getComputedStyle(body);
30-
expect(styles["font-family"]).toBe("\"Times New Roman\"");
30+
expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\"");
3131
});
32-
test("the padding-left should be '20px'", ()=> {
32+
test("the padding-left should be '20px'", () => {
3333
document.querySelector(
3434
"head"
3535
).innerHTML = `<style>${css.toString()}</style>`;
3636
let body = document.querySelector("body");
3737
let styles = window.getComputedStyle(body);
3838
expect(styles["padding-left"]).toBe("20px");
3939
});
40-
test("the font-family in the H1 Tag should be 'Courier'", ()=> {
40+
test("the font-family in the H1 Tag should be 'Courier'", () => {
4141
document.querySelector(
4242
"head"
4343
).innerHTML = `<style>${css.toString()}</style>`;
4444
let h1Tag = document.querySelector("h1");
4545
let h1TagStyles = window.getComputedStyle(h1Tag);
4646
// get computed styles of any element you like
47-
expect(h1TagStyles["font-family"]).toBe("\"Courier\"");
47+
expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\"");
4848
});
49-
test("the color in the H1 Tag should be 'red'", ()=> {
49+
test("the color in the H1 Tag should be 'red'", () => {
5050
document.querySelector(
5151
"head"
5252
).innerHTML = `<style>${css.toString()}</style>`;
@@ -55,7 +55,7 @@ describe("All the styles should be applied", ()=> {
5555
// get computed styles of any element you like
5656
expect(h1TagStyles["color"]).toBe("red");
5757
});
58-
test("the text-align in the H1 Tag should be 'center'", ()=> {
58+
test("the text-align in the H1 Tag should be 'center'", () => {
5959
document.querySelector(
6060
"head"
6161
).innerHTML = `<style>${css.toString()}</style>`;
@@ -64,7 +64,7 @@ describe("All the styles should be applied", ()=> {
6464
// get computed styles of any element you like
6565
expect(h1TagStyles["text-align"]).toBe("center");
6666
});
67-
test("the text-decoration in the H2 Tag should be 'underline'", ()=> {
67+
test("the text-decoration in the H2 Tag should be 'underline'", () => {
6868
document.querySelector(
6969
"head"
7070
).innerHTML = `<style>${css.toString()}</style>`;
@@ -73,7 +73,7 @@ describe("All the styles should be applied", ()=> {
7373
let h2TagStyles = window.getComputedStyle(h2Tag);
7474
expect(h2TagStyles["text-decoration"]).toBe("underline");
7575
});
76-
test("the padding in the #id1 Tag should be '5px'", ()=> {
76+
test("the padding in the #id1 Tag should be '5px'", () => {
7777
document.querySelector(
7878
"head"
7979
).innerHTML = `<style>${css.toString()}</style>`;
@@ -82,48 +82,44 @@ describe("All the styles should be applied", ()=> {
8282
let idTagStyles = window.getComputedStyle(idTag);
8383
expect(idTagStyles["padding"]).toBe("5px");
8484
});
85-
test("the background-color in the #id1 Tag should be 'semi transparent white'", ()=> {
85+
test("the background-color in the #id1 Tag should be 'semi transparent white'", () => {
8686
document.querySelector(
8787
"head"
8888
).innerHTML = `<style>${css.toString()}</style>`;
8989
// get computed styles of any element you like
9090
const idTag = document.querySelector("#id1");
9191
let idTagStyles = window.getComputedStyle(idTag);
92-
console.log("$$$:", idTagStyles)
9392
expect(idTagStyles["background-color"]).toBe("rgba(255, 255, 255, 0.2)");
9493
});
95-
test("The a hover underline should be removed", ()=> {
94+
test("The a hover underline should be removed", () => {
9695
document.querySelector(
9796
"head"
9897
).innerHTML = `<style>${css.toString()}</style>`;
9998
let cssArray = document.styleSheets[0].cssRules;
100-
// console.log("$$$:", cssArray)
10199
let orangeHoverSelector = "";
102100
for (let i = 0; i < cssArray.length; i++) {
103101
if (cssArray[i].selectorText === "a:hover") {
104102
orangeHoverSelector = cssArray[i].style['text-decoration'];
105-
console.log("$$$:", orangeHoverSelector)
106103
}
107104
}
108105
expect(orangeHoverSelector).toBe("none");
109106
});
110107

111-
test("The a hover color should be green", ()=> {
108+
test("The a hover color should be green", () => {
112109
document.querySelector(
113110
"head"
114111
).innerHTML = `<style>${css.toString()}</style>`;
115-
116112
let cssArray = document.styleSheets[0].cssRules;
117-
console.log("$$$:", cssArray[0])
118113
let orangeHoverSelector = "";
114+
119115
for (let i = 0; i < cssArray.length; i++) {
120116
if (cssArray[i].selectorText === "a:hover") {
121117
orangeHoverSelector = cssArray[i].style.color;
122118
}
123119
}
124120
expect(orangeHoverSelector).toBe('green');
125121
});
126-
test("You should not change the existing head tag elements", ()=> {
122+
test("You should not change the existing head tag elements", () => {
127123
let head = document.querySelector('head')
128124
expect(head).toBeTruthy()
129125

‎exercises/07-Very-Specific-Rules/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
/** Insert your code here **/
22

3+
ul li {
4+
color: red !important;
5+
}
6+
7+
ol li:nth-child(2) {
8+
background-color: green;
9+
}
10+
11+
tr:nth-child(odd) {
12+
background: yellow;
13+
}
14+
315
/*********** READ ONLY BLOCK ******
416
You CANNOT UPDATE anything from here on,
517
only add lines of code on top of this lines

‎exercises/08-Rounded-Image/solution.hide.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@ body {
22
background: #bdbdbd;
33
}
44
.rounded {
5-
border-radius: 100%;
6-
background-image: url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/einstein.png?raw=true");
7-
background-position-x: center;
8-
background-position-y: center;
9-
background-size: contain;
105
object-fit: cover;
116
width: 200px;
127
height: 200px;
8+
border-radius: 100%;
139
}

0 commit comments

Comments
 (0)