add random choice picker

solygambas · solygambas · commit b4024b27d1c3 · 2021-01-14T07:56:41.000+01:00
diff --git a/13-random choice picker/index.html b/13-random choice picker/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Random Choice Picker</title>
+  </head>
+  <body>
+    <div class="container">
+      <h3>
+        Enter all of the choices divided by a comma (',').<br />
+        Press enter when you're done
+      </h3>
+      <textarea placeholder="Enter choices here..." id="textarea"></textarea>
+    </div>
+    <div id="tags"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/13-random choice picker/script.js b/13-random choice picker/script.js
@@ -0,0 +1,53 @@
+const tagsElements = document.getElementById("tags");
+const textarea = document.getElementById("textarea");
+
+const createTags = (input) => {
+  const tags = input
+    .split(",")
+    .filter((tag) => tag.trim() !== "")
+    .map((tag) => tag.trim());
+  tagsElements.innerHTML = "";
+  tags.forEach((tag) => {
+    const tagElement = document.createElement("span");
+    tagElement.classList.add("tag");
+    tagElement.innerText = tag;
+    tagsElements.appendChild(tagElement);
+  });
+};
+
+const pickRandomTag = () => {
+  const tags = document.querySelectorAll(".tag");
+  return tags[Math.floor(Math.random() * tags.length)];
+};
+
+const highlightTag = (tag) => tag.classList.add("highlight");
+
+const unHighlightTag = (tag) => tag.classList.remove("highlight");
+
+const randomSelect = () => {
+  const times = 30;
+  const interval = setInterval(() => {
+    const randomTag = pickRandomTag();
+    highlightTag(randomTag);
+    setTimeout(() => {
+      unHighlightTag(randomTag);
+    }, 100);
+  }, 100);
+
+  setTimeout(() => {
+    clearInterval(interval);
+    setTimeout(() => {
+      const randomTag = pickRandomTag();
+      highlightTag(randomTag);
+    }, 100);
+  }, times * 100);
+};
+
+textarea.focus();
+textarea.addEventListener("keyup", (e) => {
+  createTags(e.target.value);
+  if (e.key === "Enter") {
+    setTimeout(() => (e.target.value = ""), 10);
+    randomSelect();
+  }
+});
diff --git a/13-random choice picker/style.css b/13-random choice picker/style.css
@@ -0,0 +1,52 @@
+@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #2b88f0;
+  font-family: "Muli", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+h3 {
+  color: #fff;
+  margin: 10px 0 20px;
+  text-align: center;
+}
+
+.container {
+  width: 500px;
+}
+
+textarea {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100px;
+  font-family: inherit;
+  padding: 10px;
+  margin: 0 0 20px;
+  font-size: 16px;
+}
+
+.tag {
+  background-color: #f0932b;
+  color: #fff;
+  border-radius: 50px;
+  padding: 10px 20px;
+  margin: 0 5px 10px 0;
+  font-size: 14px;
+  display: inline-block;
+}
+
+.tag.highlight {
+  background-color: #273c75;
+}
