day 13 completed

4 years ago · 76d46a0056
parent 45b27b8387
commit 76d46a0056
3 changed files with 145 additions and 0 deletions
--- a/code/13-random-choice-picker/index.html
+++ b/code/13-random-choice-picker/index.html
@ -0,0 +1,28 @@
+<!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">
+    <title>13 random choice picker</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="head">
+            Enter all of the choices divided by a comma (',').
+        </div>
+        <div class="head">
+            Press enter when you're done
+        </div>
+        <textarea name="field" id="field" cols="30" rows="10" placeholder="Enter choices here..."></textarea>
+
+        <div id="labels"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/13-random-choice-picker/script.js
+++ b/code/13-random-choice-picker/script.js
@ -0,0 +1,63 @@
+const textarea = document.getElementById("field");
+const label = document.getElementById("labels");
+
+textarea.focus();
+
+textarea.addEventListener("keyup", (e) => {
+  createTags(e.target.value);
+
+  if (e.key == "Enter") {
+    setTimeout(() => {
+      e.target.value = "";
+    }, 10);
+
+    randomSelect();
+  }
+});
+
+function createTags(str) {
+  const tags = str
+    .split(",")
+    .map((tag) => tag.trim())
+    .filter((tag) => tag !== "");
+  console.log(tags);
+
+  label.innerHTML = "";
+
+  tags.forEach((tag) => {
+    const tagEl = document.createElement("span");
+    tagEl.classList.add("tag");
+    tagEl.innerText = tag;
+
+    label.appendChild(tagEl);
+  });
+}
+
+function randomSelect() {
+  const times = 30;
+
+  const interval = setInterval(() => {
+    const randomTag = randomTagPicker();
+    console.log(randomTag);
+
+    randomTag.classList.add("highlight");
+
+    setTimeout(() => {
+      randomTag.classList.remove("highlight");
+    }, 100);
+  }, 100);
+
+  setTimeout(() => {
+    clearInterval(interval);
+
+    setTimeout(() => {
+      randomTagPicker().classList.add("highlight");
+    }, 100);
+  }, times * 100);
+}
+
+function randomTagPicker() {
+  const tags = document.querySelectorAll(".tag");
+
+  return tags[Math.floor(Math.random() * tags.length)];
+}
--- a/code/13-random-choice-picker/style.css
+++ b/code/13-random-choice-picker/style.css
@ -0,0 +1,54 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: cornflowerblue;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 600px;
+}
+
+.head {
+  font-family: sans-serif;
+  font-weight: 600;
+  color: #fff;
+  font-size: 24px;
+}
+
+textarea {
+  margin-top: 20px;
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  font-family: sans-serif;
+}
+
+#labels {
+  margin-top: 30px;
+}
+
+.tag {
+  padding: 10px 15px;
+  color: #fff;
+  font-family: sans-serif;
+  font-weight: 500;
+  background-color: rgb(230, 126, 0);
+  border-radius: 50px;
+  margin: 3px 5px;
+  display: inline-block;
+}
+
+.tag.highlight {
+  background-color: rgb(15, 4, 61);
+}