Skip to content

fixed text, link, styles 4.2 to 07 #108

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
tommygonzaleza merged 10 commits into from
Apr 12, 2023
Merged

fixed text, link, styles 4.2 to 07 #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e0593db
Update test.js
josemoracard Apr 11, 2023
d5786e7
Update styles.css
josemoracard Apr 11, 2023
7c45a43
Update styles.css
josemoracard Apr 11, 2023
f254559
Update tests.js
josemoracard Apr 11, 2023
d1eba3f
Update index.html
josemoracard Apr 11, 2023
0928cec
Update index.html
josemoracard Apr 11, 2023
0fc9574
Update index.html
josemoracard Apr 11, 2023
4a39434
Update test.js
josemoracard Apr 11, 2023
7810dfe
Update tests.js
josemoracard Apr 11, 2023
c8c602e
Update tests.js
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
11 changes: 5 additions & 6 deletions exercises/04.2-Apply-several-classes/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
.card {
display: inline-block;
width: 50px;
height: 80px;
position: relative;
width: 150px;
height: 240px;
border: 1px solid black;
text-align: center;
line-height: 80px;
line-height: 240px;
border-radius: 5px;
font-size: 1.5rem;
}
.card:after {
font-size: 70%;
font-size: 80%;
font-weight: bold;
}

Expand Down
4 changes: 2 additions & 2 deletions exercises/04.2-Apply-several-classes/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ jest.dontMock("fs");
describe("You should change the class on the div tag", () => {
const div = document.querySelector("div");

test("The div class should NOT have the spades class", () => {
test('The <div> should NOT have the "spades" class', () => {
expect(div.classList.contains("spade")).toBe(false);
});

test("The div class should have the heart class", () => {
test('The <div> should have the "heart" class', () => {
expect(div.classList.contains("heart")).toBe(true);
});
});
9 changes: 6 additions & 3 deletions exercises/04.3-id-Selector/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
#button1 {
background: #BDBDBD;
border: #5E5E5E;
border-radius: 5px;
background-color: #4caf50; /* Green */
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
border-radius: 5px;
}
8 changes: 4 additions & 4 deletions exercises/04.3-id-Selector/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@ jest.dontMock('fs');
const span = document.querySelector("span");
const link = document.querySelector("link");

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

test("The span tag should have the id 'button1'", () => {
test("The <span> tag should have the id 'button1'", () => {
expect(span).toBeTruthy();
let id = span.id
expect(id).toBeTruthy();
expect(id).toBe('button1');
});

test("The span tag should not contain any inline style", () => {
test("The <span> tag should not contain any inline style", () => {
let emptyBodyInlineStyle = {};
expect(span).toBeTruthy()
expect(span.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/05-Specificity/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ jest.dontMock('fs');

describe("All the styles should be applied", function () {

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

Expand All @@ -35,7 +35,7 @@ describe("All the styles should be applied", function () {
expect(cssArray).toBe("ul li");
expect(cssArrayBackground).toBe("blue");
})
test("You should use a more specific rule using the !important annotation ", function () {
test("You should use a more specific rule using the !important annotation", function () {

document.querySelector(
"head"
Expand All @@ -51,4 +51,4 @@ describe("All the styles should be applied", function () {
expect(orangeHoverSelector).toBe("green");
});

});
});
2 changes: 1 addition & 1 deletion exercises/06-Practicing-Rules/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h2>3 reasons you love what you are learning</h2>
</ul>
<p>
If you can't sleep, what better than watching videos of cats?
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
<a href="https://www.youtube.com/shorts/k931WvWU0Vg">click here</a>
</p>
</div>
</body>
Expand Down
8 changes: 4 additions & 4 deletions exercises/06-Practicing-Rules/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe("All the styles should be applied", () => {
let styles = window.getComputedStyle(body);
expect(styles["padding-left"]).toBe("20px");
});
test("The font-family in the h1 tag should be 'Courier'", () => {
test("The font-family in the <h1> tag should be 'Courier'", () => {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand All @@ -46,7 +46,7 @@ describe("All the styles should be applied", () => {
// get computed styles of any element you like
expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\"");
});
test("The color in the h1 tag should be 'red'", () => {
test("The color in the <h1> tag should be 'red'", () => {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand All @@ -55,7 +55,7 @@ describe("All the styles should be applied", () => {
// get computed styles of any element you like
expect(h1TagStyles["color"]).toBe("red");
});
test("the text-decoration in the h2 tag should be 'underline'", () => {
test("the text-decoration in the <h2> tag should be 'underline'", () => {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand Down Expand Up @@ -102,7 +102,7 @@ describe("All the styles should be applied", () => {
}
expect(orangeHoverSelector).toBe('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
24 changes: 12 additions & 12 deletions exercises/07-Very-Specific-Rules/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2>3 reasons you know love what you are learning</h2>
</ul>
<p>
If you can't sleep, what better than watching videos of cats?
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
<a href="https://www.youtube.com/shorts/k931WvWU0Vg">click here</a>
</p>

<table>
Expand All @@ -34,47 +34,47 @@ <h2>3 reasons you know love what you are learning</h2>
<td>Gender</td>
</tr>
<tr>
<td>12 years</td>
<td>12</td>
<td>Male</td>
</tr>
<tr>
<td>22 years</td>
<td>22</td>
<td>Female</td>
</tr>
<tr>
<td>11 years</td>
<td>11</td>
<td>Male</td>
</tr>
<tr>
<td>21 years</td>
<td>21</td>
<td>Male</td>
</tr>
<tr>
<td>22 years</td>
<td>22</td>
<td>Female</td>
</tr>
<tr>
<td>10 years</td>
<td>10</td>
<td>Male</td>
</tr>
<tr>
<td>13 years</td>
<td>13</td>
<td>Female</td>
</tr>
<tr>
<td>13 years</td>
<td>13</td>
<td>Male</td>
</tr>
<tr>
<td>10 years</td>
<td>10</td>
<td>Male</td>
</tr>
<tr>
<td>11 years</td>
<td>11</td>
<td>Male</td>
</tr>
<tr>
<td>11 years</td>
<td>11</td>
<td>Male</td>
</tr>
</table>
Expand Down