update milestone effects #23 #11

- instead of just the streak number changing color, now the whole `streak-div` gets a colored background that is the same as the background color of the button on the milestone "popup"
- add another color for backgrounds: peach

Author: blahosyl

README.md

@@ -114,6 +114,7 @@ Wave
 |dark-blue	|#004056| 
 |med-blue		|#2E7E8E| 
 |light-blue	|#1ADAE8|
+|peach			|#FCBFAB|
 |med-orange	|#DC3A04|
 |light-orange	|#FCAF02|
 |red			|#EB0000| 
@@ -132,6 +133,10 @@ The paired colors have the following contrasts:
 |med-orange 	| white	| 4.51:1	|✅ |only used for graphical objects|
 |light-orange |black	|11.27:1	|✅	 |	|
 |light-blue 	|black 	|12.23:1	|✅ |	|
+|light-blue 	|dark-blue|6.55:1	|✅ |	|
+|peach		 	|dark-blue|7.05:1	|✅ |	|
+
+
 
 
 Web Disability Simulator

assets/css/style.css

@@ -3,6 +3,7 @@
   --dark-blue: #004056;
   --med-blue: #2E7E8E;
   --light-blue: #1ADAE8;
+  --peach: #FCBFAB;
   --med-orange: #DC3A04;
   --light-orange: #FCAF02;
   --red: #EB0000;
@@ -223,6 +224,7 @@ a {
   display: flex;
   margin-top: 1rem;
   font-size: large;
+  padding: 0.2rem;
 }
 
 /* the number showing the user's perfect streak count */

assets/js/script.js

@@ -33,8 +33,10 @@ const solutionDiv = document.getElementById('solution');
 const submitButton = document.getElementById('submit-button');
 // the New Game button
 const newGameButton = document.getElementById('new-game-button');
-// the streak counter from the bottom of the page
+// the streak counter at the bottom of the page
 const streakCounter = document.getElementById('streak-counter');
+// the div containing the perfect streak text and counter at the bottom of the page
+const streakDiv = document.getElementById('streak-div');
 
 // Milestones
 const milestoneSection = document.getElementById('milestone-section');
@@ -380,7 +382,7 @@ function showMilestones() {
   switch (streak) {
     case 0:
       // change color of streak number
-      streakCounter.style.color='black';
+      streakDiv.style.backgroundColor='var(--white)';
       break;
     case 1:
       // set streak milestone color
@@ -392,9 +394,9 @@ function showMilestones() {
       streakDisplay.textContent = streak;
       streakText.style.backgroundColor=color;
       // change color of Continue button
-      continueGameButton.style.backgroundColor=buttonColor;
-      // change color of streak number
-      streakCounter.style.color=color;
+      continueGameButton.style.backgroundColor = buttonColor;
+      // change color of the streak div
+      streakDiv.style.backgroundColor = buttonColor;
       // run new game after milestone "popup"
       newGame();
       break;
@@ -408,25 +410,25 @@ function showMilestones() {
       streakDisplay.textContent = streak;
       streakText.style.backgroundColor=color;
       // change color of Continue button
-      continueGameButton.style.backgroundColor=buttonColor;
-      // change color of streak number
-      streakCounter.style.color=color;
+      continueGameButton.style.backgroundColor = buttonColor;
+      // change color of the streak div
+      streakDiv.style.backgroundColor = buttonColor;
       // run new game after milestone "popup"
       newGame();
       break;
     case 3:
       // set streak milestone color
       color = 'var(--med-orange)';
-      buttonColor = 'var(--light-orange)';
+      buttonColor = 'var(--peach)';
       // show the `milestoneSection`
       showMilestone();
       // show streak count on `milestoneSection`
       streakDisplay.textContent = streak;
       streakText.style.backgroundColor=color;
       // change color of Continue button
-      continueGameButton.style.backgroundColor=buttonColor;
-      // change color of streak number
-      streakCounter.style.color=color;
+      continueGameButton.style.backgroundColor = buttonColor;
+      // change color of the streak div
+      streakDiv.style.backgroundColor = buttonColor;
       // run new game after milestone "popup"
       newGame();
       break;