feat: day 13

solygambas · solygambas · commit 9690765af64c · 2025-06-23T15:02:21.000+02:00
diff --git a/013-random choice picker/index.html b/013-random choice picker/index.html
@@ -8,9 +8,10 @@
   </head>
   <body>
     <div class="container">
+      <!-- Improve the Instructions -->
       <h3>
-        Enter all of the choices divided by a comma (',').<br />
-        Press enter when you're done
+        Can't decide? Enter your options below, separated by commas (", ").<br />
+        Press Enter and let us pick for you!
       </h3>
       <textarea placeholder="Enter choices here..." id="textarea"></textarea>
     </div>
diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
@@ -2,10 +2,12 @@ const tagsElements = document.getElementById("tags");
 const textarea = document.getElementById("textarea");
 
 const createTags = (input) => {
-  const tags = input
+  // Prevent Duplicate Choices
+  const tagsArray = input
     .split(",")
     .filter((tag) => tag.trim() !== "")
     .map((tag) => tag.trim());
+  const tags = [...new Set(tagsArray)];
   tagsElements.innerHTML = "";
   tags.forEach((tag) => {
     const tagElement = document.createElement("span");
@@ -25,22 +27,24 @@ const highlightTag = (tag) => tag.classList.add("highlight");
 const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
-  const times = 30;
+  // Adjust Animation Speed
+  const times = 15;
+  const animationSpeed = 200;
   const interval = setInterval(() => {
     const randomTag = pickRandomTag();
     highlightTag(randomTag);
     setTimeout(() => {
       unHighlightTag(randomTag);
-    }, 100);
-  }, 100);
+    }, animationSpeed);
+  }, animationSpeed);
 
   setTimeout(() => {
     clearInterval(interval);
     setTimeout(() => {
       const randomTag = pickRandomTag();
       highlightTag(randomTag);
-    }, 100);
-  }, times * 100);
+    }, animationSpeed);
+  }, times * animationSpeed);
 };
 
 textarea.focus();
diff --git a/013-random choice picker/style.css b/013-random choice picker/style.css
@@ -42,7 +42,8 @@ textarea:focus {
 }
 
 .tag {
-  background-color: #f0932b;
+  /* Customize the Tag Colors */
+  background-color: #353535;
   color: #fff;
   border-radius: 50px;
   padding: 10px 20px;
@@ -52,5 +53,5 @@ textarea:focus {
 }
 
 .tag.highlight {
-  background-color: #273c75;
+  background-color: #6f2dbd;
 }

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,8 @@ textarea:focus {`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.tag {`
`45`		`- background-color: #f0932b;`
	`45`	`+ /* Customize the Tag Colors */`
	`46`	`+ background-color: #353535;`
`46`	`47`	`color: #fff;`
`47`	`48`	`border-radius: 50px;`
`48`	`49`	`padding: 10px 20px;`
`@@ -52,5 +53,5 @@ textarea:focus {`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`.tag.highlight {`
`55`		`- background-color: #273c75;`
	`56`	`+ background-color: #6f2dbd;`
`56`	`57`	`}`