Skip to content

fixed text, styles, and added an instruccion #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Apr 12, 2023
Merged

fixed text, styles, and added an instruccion #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6d85a2f
Update solution.hide.css
josemoracard Apr 11, 2023
899ba6d
Update tests.js
josemoracard Apr 11, 2023
8faa409
Update README.es.md
josemoracard Apr 11, 2023
4b90749
Update README.md
josemoracard Apr 11, 2023
31640a5
Update solution.hide.css
josemoracard Apr 11, 2023
963ebaa
Update styles.css
josemoracard Apr 11, 2023
1a03a65
Update tests.js
josemoracard Apr 11, 2023
e09f439
Update test.js
josemoracard Apr 11, 2023
9ecb581
Update tests.js
josemoracard Apr 11, 2023
2cd2ff5
Update tests.js
josemoracard Apr 11, 2023
58022d1
Update tests.js
josemoracard Apr 11, 2023
1d76734
Update tests.js
josemoracard Apr 11, 2023
2be6b49
Update test.js
josemoracard Apr 11, 2023
f5f4148
Update tests.js
josemoracard Apr 11, 2023
b39fc10
Update README.md
josemoracard Apr 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions exercises/01.1-The-Style-Tag/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ jest.dontMock('fs');

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

test("There should be a p tag", ()=>{
test("There should be a <p> tag", ()=>{
expect(p).toBeTruthy();
})

test("The p tag color should be blue", ()=>{
test("The <p> tag color should be blue", ()=>{
let styles = window.getComputedStyle(p);
expect(styles["color"]).toBe("blue");
});

test("The p tag should not contain any inline style", ()=>{
test("The <p> tag should not contain any inline style", ()=>{
let emptyBodyInlineStyle = {};
expect(p.style._values).toEqual(emptyBodyInlineStyle);
});
});
4 changes: 2 additions & 2 deletions exercises/01.2-Your-First-Style/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{
expect(styles["color"]).toBe("yellow");
});

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

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

Expand Down
6 changes: 3 additions & 3 deletions exercises/02-Separate-Stylesheet/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ describe("All the styles should be applied", ()=>{
const link = document.querySelector("link");
const body = document.querySelector("body");

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

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

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

test("Your body tag background color should be blue", ()=>{
test("Your <body> tag background color should be blue", ()=>{
let styles = window.getComputedStyle(body)
expect(styles["background-color"]).toBe("blue")
})
Expand Down
4 changes: 2 additions & 2 deletions exercises/02.1-Background/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=>{
const link = document.querySelector("link");
const title = document.querySelector('title');

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

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

Expand Down
2 changes: 1 addition & 1 deletion exercises/03-Inline-Styles/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ jest.dontMock("fs");

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

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

Expand Down
10 changes: 5 additions & 5 deletions exercises/04-Class-Selector/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ document.documentElement.innerHTML = html.toString();

jest.dontMock("fs");

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

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

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

test("There should be two p tags", () => {
test("There should be two <p> tags", () => {
expect(p.length).toBe(2)
});
test("Both p tags should have a class name 'b-blue'", () => {
test("Both <p> tags should have a class name 'b-blue'", () => {
p.forEach(e=>{
let eClass = e.getAttribute("class");
expect(eClass).toBe("b-blue")
Expand Down
4 changes: 2 additions & 2 deletions exercises/04.1-Combined-Rules/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=> {
const link = document.querySelector("link");
const title = document.querySelector('title');

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

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

Expand Down
4 changes: 3 additions & 1 deletion exercises/08-Rounded-Image/README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La

1. Usa `border-radius`.

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).
2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada.

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).

## 💡 Pista:

Expand Down
4 changes: 3 additions & 1 deletion exercises/08-Rounded-Image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ The obvious way to create a rounded profile picture is to create an image tag an

1. Use `border-radius`.

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).
2. Use the properties `width` and `height` to make the image a square shape.

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).


## 💡 Hint:
Expand Down
4 changes: 2 additions & 2 deletions exercises/08-Rounded-Image/solution.hide.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ body {
.rounded {
object-fit: cover;
object-position: top;
width: 200px;
height: 200px;
width: 250px;
height: 250px;
border-radius: 100%;
}
10 changes: 5 additions & 5 deletions exercises/08-Rounded-Image/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ describe("All the styles should be applied", () => {

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

test("The img tag should exist", () => {
test("The <img> tag should exist", () => {
expect(img).toBeTruthy();
})

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

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

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

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

Expand Down
1 change: 1 addition & 0 deletions exercises/09-Anchor-Styles/solution.hide.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
text-decoration: none;
text-align: center;
color: black;
font-size: 22px;
}

a.threeDimension:active {
Expand Down
3 changes: 2 additions & 1 deletion exercises/09-Anchor-Styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
text-decoration: none;
text-align: center;
color: black;
font-size: 22px;
}

a.threeDimension:active {
/* your code here*/

}
}
4 changes: 2 additions & 2 deletions exercises/09-Anchor-Styles/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe("All the styles should be applied", () => {
expect(cssArray).toBe(".threeDimension");
})

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

});

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

Expand Down