Merge pull request #108 from josemoracard/jose1-4.2-to-07

tommygonzaleza · web-flow · commit c8135eb5b78b · 2023-04-12T15:42:31.000-04:00
fixed text, link, styles 4.2 to 07
diff --git a/exercises/04.2-Apply-several-classes/styles.css b/exercises/04.2-Apply-several-classes/styles.css
@@ -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;
 }
 
diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/04.2-Apply-several-classes/test.js
@@ -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);
     });
 });
diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/04.3-id-Selector/styles.css
@@ -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;
 }
diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js
@@ -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();
 
diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js
@@ -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()
 
@@ -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"
@@ -51,4 +51,4 @@ describe("All the styles should be applied", function () {
     expect(orangeHoverSelector).toBe("green");
   });
 
-});
+});
diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html
@@ -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>
diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js
@@ -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>`;
@@ -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>`;
@@ -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>`;
@@ -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()
 
diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html
@@ -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>
@@ -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>
