Skip to content

Commit d3d1cb8

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request #109 from josemoracard/jose2-08-to
fixed text, styles, and added an instruccion
2 parents c8135eb + b39fc10 commit d3d1cb8

File tree

14 files changed

+37
-31
lines changed

14 files changed

+37
-31
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ jest.dontMock('fs');
77

88
const p = document.querySelector("p");
99

10-
test("There should be a p tag", ()=>{
10+
test("There should be a <p> tag", ()=>{
1111
expect(p).toBeTruthy();
1212
})
1313

14-
test("The p tag color should be blue", ()=>{
14+
test("The <p> tag color should be blue", ()=>{
1515
let styles = window.getComputedStyle(p);
1616
expect(styles["color"]).toBe("blue");
1717
});
1818

19-
test("The p tag should not contain any inline style", ()=>{
19+
test("The <p> tag should not contain any inline style", ()=>{
2020
let emptyBodyInlineStyle = {};
2121
expect(p.style._values).toEqual(emptyBodyInlineStyle);
22-
});
22+
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{
1313
expect(styles["color"]).toBe("yellow");
1414
});
1515

16-
test("The body tag should not contain any inline style", ()=>{
16+
test("The <body> tag should not contain any inline style", ()=>{
1717
let bodyInlineStyle = document.getElementsByTagName("body");
1818
let emptyBodyInlineStyle = {};
1919
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
@@ -24,7 +24,7 @@ describe("All the styles should be applied", ()=>{
2424
expect(a.style._values).toEqual(emptyBodyInlineStyle);
2525
});
2626

27-
test("You should not change the existing head tag elements", ()=>{
27+
test("You should not change the existing <head> tag elements", ()=>{
2828
let head = document.querySelector('head')
2929
expect(head).toBeTruthy()
3030

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ describe("All the styles should be applied", ()=>{
1010
const link = document.querySelector("link");
1111
const body = document.querySelector("body");
1212

13-
test("The body tag should not contain any inline style", ()=>{
13+
test("The <body> tag should not contain any inline style", ()=>{
1414
document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
1515
let emptyBodyInlineStyle={};
1616
expect(body.style._values).toEqual(emptyBodyInlineStyle)
1717
});
1818

19-
test("You should not change the existing head tag elements", ()=>{
19+
test("You should not change the existing <head> tag elements", ()=>{
2020
let head = document.querySelector('head')
2121
expect(head).toBeTruthy()
2222

@@ -27,7 +27,7 @@ describe("All the styles should be applied", ()=>{
2727
expect(href).toEqual('./styles.css')
2828
});
2929

30-
test("Your body tag background color should be blue", ()=>{
30+
test("Your <body> tag background color should be blue", ()=>{
3131
let styles = window.getComputedStyle(body)
3232
expect(styles["background-color"]).toBe("blue")
3333
})

‎exercises/02.1-Background/tests.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=>{
1111
const link = document.querySelector("link");
1212
const title = document.querySelector('title');
1313

14-
test("The body tag should not contain any inline style", ()=>{
14+
test("The <body> tag should not contain any inline style", ()=>{
1515
document.querySelector(
1616
"head"
1717
).innerHTML = `<style>${css.toString()}</style>`;
@@ -37,7 +37,7 @@ describe("All the styles should be applied", ()=>{
3737
expect(styles["background-repeat"]).toBe("repeat");
3838
});
3939

40-
test("You should not change the existing head tag elements", ()=>{
40+
test("You should not change the existing <head> tag elements", ()=>{
4141
let head = document.querySelector('head')
4242
expect(head).toBeTruthy()
4343

‎exercises/03-Inline-Styles/tests.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ jest.dontMock("fs");
77

88
describe("The Table tag should contain inline style background: green", ()=>{
99

10-
test("You should not change the existing head tag elements", ()=>{
10+
test("You should not change the existing <head> tag elements", ()=>{
1111
let head = document.querySelector('head')
1212
expect(head).toBeTruthy()
1313

‎exercises/04-Class-Selector/test.js

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

77
jest.dontMock("fs");
88

9-
describe("Both p tags should have a blue background", () => {
9+
describe("Both <p> tags should have a blue background", () => {
1010
const body = document.querySelector("body")
1111
const p = document.querySelectorAll("p");
12-
test("You should not change the existing head tag elements", () => {
12+
test("You should not change the existing <head> tag elements", () => {
1313
let head = document.querySelector('head')
1414
expect(head).toBeTruthy()
1515

@@ -20,18 +20,18 @@ describe("Both p tags should have a blue background", () => {
2020
expect(title).toBe('04 Class selector')
2121
});
2222

23-
test("The body tag should not contain any inline style", () => {
23+
test("The <body> tag should not contain any inline style", () => {
2424
document.querySelector(
2525
"head"
2626
).innerHTML = `<style>${css.toString()}</style>`;
2727
let emptyBodyInlineStyle = {};
2828
expect(body.style._values).toEqual(emptyBodyInlineStyle)
2929
});
3030

31-
test("There should be two p tags", () => {
31+
test("There should be two <p> tags", () => {
3232
expect(p.length).toBe(2)
3333
});
34-
test("Both p tags should have a class name 'b-blue'", () => {
34+
test("Both <p> tags should have a class name 'b-blue'", () => {
3535
p.forEach(e=>{
3636
let eClass = e.getAttribute("class");
3737
expect(eClass).toBe("b-blue")

‎exercises/04.1-Combined-Rules/tests.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=> {
1111
const link = document.querySelector("link");
1212
const title = document.querySelector('title');
1313

14-
test("The body tag should not contain any inline style", ()=> {
14+
test("The <body> tag should not contain any inline style", ()=> {
1515
document.querySelector(
1616
"head"
1717
).innerHTML = `<style>${css.toString()}</style>`;
@@ -113,7 +113,7 @@ describe("All the styles should be applied", ()=> {
113113
expect(padLeft).toBeFalsy();
114114
});
115115

116-
test("You should not change the existing head tag elements", ()=> {
116+
test("You should not change the existing <head> tag elements", ()=> {
117117
let head = document.querySelector('head')
118118
expect(head).toBeTruthy()
119119

‎exercises/08-Rounded-Image/README.es.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La
1212

1313
1. Usa `border-radius`.
1414

15-
2. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
15+
2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada.
16+
17+
3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
1618

1719
## 💡 Pista:
1820

‎exercises/08-Rounded-Image/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ The obvious way to create a rounded profile picture is to create an image tag an
1010

1111
1. Use `border-radius`.
1212

13-
2. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
13+
2. Use the properties `width` and `height` to make the image a square shape.
14+
15+
3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
1416

1517

1618
## 💡 Hint:

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
.rounded {
55
object-fit: cover;
66
object-position: top;
7-
width: 200px;
8-
height: 200px;
7+
width: 250px;
8+
height: 250px;
99
border-radius: 100%;
1010
}

‎exercises/08-Rounded-Image/tests.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ describe("All the styles should be applied", () => {
1313

1414
const img = document.querySelector(".rounded")
1515

16-
test("The img tag should exist", () => {
16+
test("The <img> tag should exist", () => {
1717
expect(img).toBeTruthy();
1818
})
1919

20-
test("The width of the img tag should be equal to its height and vice versa", () => {
20+
test("The width of the <img> tag should be equal to its height and vice versa", () => {
2121
document.querySelector(
2222
"head"
2323
).innerHTML = `<style>${css.toString()}</style>`;
@@ -42,7 +42,7 @@ describe("All the styles should be applied", () => {
4242
expect(height).toBe(width);
4343
});
4444

45-
test("The object-fit value of the img tag should be 'cover'", () => {
45+
test("The object-fit value of the <img> tag should be 'cover'", () => {
4646
document.querySelector(
4747
"head"
4848
).innerHTML = `<style>${css.toString()}</style>`;
@@ -51,7 +51,7 @@ describe("All the styles should be applied", () => {
5151
expect(imgStyle["object-fit"]).toBe("cover");
5252
});
5353

54-
test("The object-position value of the img tag should be 'top'", () => {
54+
test("The object-position value of the <img> tag should be 'top'", () => {
5555
document.querySelector(
5656
"head"
5757
).innerHTML = `<style>${css.toString()}</style>`;
@@ -60,7 +60,7 @@ describe("All the styles should be applied", () => {
6060
expect(imgStyle["object-position"]).toBe("top");
6161
});
6262

63-
test("You should not change the existing head tag elements", () => {
63+
test("You should not change the existing <head> tag elements", () => {
6464
let head = document.querySelector('head')
6565
expect(head).toBeTruthy()
6666

‎exercises/09-Anchor-Styles/solution.hide.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
text-decoration: none;
88
text-align: center;
99
color: black;
10+
font-size: 22px;
1011
}
1112

1213
a.threeDimension:active {

‎exercises/09-Anchor-Styles/styles.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
text-decoration: none;
99
text-align: center;
1010
color: black;
11+
font-size: 22px;
1112
}
1213

1314
a.threeDimension:active {
1415
/* your code here*/
1516

16-
}
17+
}

‎exercises/09-Anchor-Styles/tests.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe("All the styles should be applied", () => {
2020
expect(cssArray).toBe(".threeDimension");
2121
})
2222

23-
test("The 'a' tag in the index.html should not be deleted", () => {
23+
test("The <a> tag in the index.html should not be deleted", () => {
2424
// we can read from the source code
2525
// console.log(html.toString());
2626
expect(html.toString().indexOf(`<a`) > -1).toBeTruthy();
@@ -71,7 +71,7 @@ describe("All the styles should be applied", () => {
7171

7272
});
7373

74-
test("You should not change the existing head tag elements", () => {
74+
test("You should not change the existing <head> tag elements", () => {
7575
let head = document.querySelector('head')
7676
expect(head).toBeTruthy()
7777

0 commit comments

Comments
 (0)