Merge pull request TheOdinProject#190 from Zekumoru/fix_exercise_solution

thatblindgeye · web-flow · commit 8bea2cf448a7 · 2022-11-19T07:25:06.000-05:00
02-class-id-selectors: Change solution
diff --git a/foundations/02-class-id-selectors/solution/solution.css b/foundations/02-class-id-selectors/solution/solution.css
@@ -3,7 +3,7 @@
   font-family: Verdana, "DejaVu Sans", sans-serif;
 }
 
-.oddly-cool {
+.adjust-font-size {
   font-size: 24px;
 }
 
@@ -12,8 +12,16 @@
   font-size: 36px;
 }
 
+/*
+    In the id selector 'four' below, we could have also
+    added a rule to set the font size to 24px.
+
+    However, since the elements 'Number 3' and 'Number 4'
+    in the HTML file share the same font size, we reused
+    the 'adjust-font-size' class above to help reduce
+    duplicate code.
+*/
 #four {
   background-color: hsl(120, 100%, 75%);
-  font-size: 24px;
   font-weight: bold;
 }
diff --git a/foundations/02-class-id-selectors/solution/solution.html b/foundations/02-class-id-selectors/solution/solution.html
@@ -10,8 +10,8 @@
   <body>
     <p class="odd">Number 1 - I'm a class!</p>
     <div id="two">Number 2 - I'm one ID.</div>
-    <p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
-    <div id="four">Number 4 - I'm another ID.</div>
+    <p class="odd adjust-font-size">Number 3 - I'm a class, but cooler!</p>
+    <div id="four" class="adjust-font-size">Number 4 - I'm another ID.</div>
     <p class="odd">Number 5 - I'm a class!</p>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`font-family: Verdana, "DejaVu Sans", sans-serif;`
`4`	`4`	`}`
`5`	`5`
`6`		`-.oddly-cool {`
	`6`	`+.adjust-font-size {`
`7`	`7`	`font-size: 24px;`
`8`	`8`	`}`
`9`	`9`
`@@ -12,8 +12,16 @@`
`12`	`12`	`font-size: 36px;`
`13`	`13`	`}`
`14`	`14`
	`15`	`+/*`
	`16`	`+ In the id selector 'four' below, we could have also`
	`17`	`+ added a rule to set the font size to 24px.`
	`18`	`+`
	`19`	`+ However, since the elements 'Number 3' and 'Number 4'`
	`20`	`+ in the HTML file share the same font size, we reused`
	`21`	`+ the 'adjust-font-size' class above to help reduce`
	`22`	`+ duplicate code.`
	`23`	`+*/`
`15`	`24`	`#four {`
`16`	`25`	`background-color: hsl(120, 100%, 75%);`
`17`		`- font-size: 24px;`
`18`	`26`	`font-weight: bold;`
`19`	`27`	`}`