diff --git a/my code/13-random-choice-picker/index.html b/my code/13-random-choice-picker/index.html new file mode 100644 index 0000000..00687b2 --- /dev/null +++ b/my code/13-random-choice-picker/index.html @@ -0,0 +1,28 @@ + + + + + + + + 13 random choice picker + + + + + +
+
+ Enter all of the choices divided by a comma (','). +
+
+ Press enter when you're done +
+ + +
+
+ + + + \ No newline at end of file diff --git a/my code/13-random-choice-picker/script.js b/my code/13-random-choice-picker/script.js new file mode 100644 index 0000000..f900096 --- /dev/null +++ b/my 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)]; +} diff --git a/my code/13-random-choice-picker/style.css b/my code/13-random-choice-picker/style.css new file mode 100644 index 0000000..0446bdf --- /dev/null +++ b/my 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); +}