completed random choice

tsr-kairi · Jul 1, 2021 · 5c19aed · 5c19aed
1 parent 656d66a
commit 5c19aed
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 0 deletions.
diff --git a/Day 13 - Random Choice Picker/app.js b/Day 13 - Random Choice Picker/app.js
@@ -0,0 +1,75 @@
+const tagsEl = document.getElementById("tags");
+const textarea = document.getElementById("textarea");
+
+textarea.focus();
+
+textarea.addEventListener("keyup", (e) => {
+  createTags(e.target.value);
+
+  // randomSelect...
+
+  if (e.key === "Enter") {
+    setTimeout(() => {
+      e.target.value = "";
+    }, 10);
+
+    randomSelect();
+  }
+});
+
+
+function createTags(input) {
+  const tags = input
+    .split(",")
+    .filter((t) => t.trim() !== "")
+    .map((t) => t.trim());
+
+  tagsEl.innerHTML = "";
+
+  tags.forEach((t) => {
+    const tagEl = document.createElement("span");
+    tagEl.classList.add("tag");
+    tagEl.innerText = t;
+    tagsEl.appendChild(tagEl);
+  });
+}
+
+function randomSelect() {
+  const times = 30;
+
+  const interval = setInterval(() => {
+    const randomTag = pickRandomTag();
+
+    highlighTag(randomTag);
+
+    setTimeout(() => {
+      unHighlighTag(randomTag);
+    }, 100);
+  }, 100);
+
+
+  setTimeout(() => {
+    clearInterval(interval)
+
+    setTimeout(() => {
+        const randomTag = pickRandomTag()
+
+        highlighTag(randomTag)
+    },100)
+
+  }, times * 100);
+}
+
+function pickRandomTag() {
+  const tags = document.querySelectorAll(".tag");
+
+  return tags[Math.floor(Math.random() * tags.length)];
+}
+
+function highlighTag(tag) {
+  tag.classList.add("highlight");
+}
+
+function unHighlighTag(tag) {
+  tag.classList.remove("highlight");
+}
diff --git a/Day 13 - Random Choice Picker/index.html b/Day 13 - Random Choice Picker/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <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 id="tags">
+        <!-- <span class="tag"></span>
+        <span class="tag highlight"></span>
+        <span class="tag"></span> -->
+      </div>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 13 - Random Choice Picker/style.css b/Day 13 - Random Choice Picker/style.css
@@ -0,0 +1,56 @@
+@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #2b88f0;
+  font-family: "Muli", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+h3 {
+  color: #fff;
+  margin: 10px 0 20px;
+  text-align: center;
+}
+
+.container {
+  width: 470px;
+}
+
+textarea {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100px;
+  font-family: inherit;
+  padding: 10px;
+  margin: 0 0 20px;
+  font-size: 16px;
+}
+textarea:focus {
+  outline: 0;
+}
+
+.tag {
+  background-color: #f0932b;
+  color: #fff;
+  border-radius: 50px;
+  padding: 8px 16px;
+  margin: 0 5px 10px 0;
+  font-size: 14px;
+  display: inline-block;
+}
+
+.tag.highlight {
+  background-color: #273c75;
+}