Merge pull request tajulafreen#12 from olanikegloria/choice-picker

tajulafreen · web-flow · commit 404e2981deb8 · 2024-05-16T20:22:06.000+05:30
created the choice picker files
diff --git a/Source-Code/ChoicePicker/index.html b/Source-Code/ChoicePicker/index.html
@@ -0,0 +1,24 @@
+<!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>Document</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">
+     <span class="tag">Choice 1 </span>
+     <span class="tag ">Choice 2</span>
+     <span class="tag">Choice 3</span>
+   </div>
+
+   <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js
@@ -0,0 +1,60 @@
+const tagsEl = document.getElementById('tags');
+const textarea = document.getElementById('textarea');
+
+textarea.focus();
+
+const createTags = (input) => {
+  const tags = input.split(',').filter((tag) => tag.trim() !== '').map((tag) => tag.trim());
+  tagsEl.innerHTML = '';
+  tags.forEach((tag) => {
+    const tagEl = document.createElement('span');
+    tagEl.classList.add('tag');
+    tagEl.innerText = tag;
+    tagsEl.appendChild(tagEl);
+  });
+};
+
+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.addEventListener('keyup', (e) => {
+  createTags(e.target.value);
+  if (e.key === 'Enter') {
+    setTimeout(() => {
+      e.target.value = '';
+    }, 10);
+    randomSelect();
+  }
+});
diff --git a/Source-Code/ChoicePicker/style.css b/Source-Code/ChoicePicker/style.css
@@ -0,0 +1,50 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: blueviolet;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+h3 {
+  color: white;
+  margin: 10px 0 20px;
+  text-align: center;
+}
+
+.container {
+  width: 500px;
+}
+
+textarea {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100px;
+  font-family: inherit;
+  padding: 10px;
+  font-size: 16px;
+  margin: 0 0 20px;
+}
+
+.tag {
+  background-color: #f0932b;
+  color: white;
+  border-radius: 50px;
+  padding: 10px 20px;
+  margin: 0 5px 10px 0;
+  font-size: 14px;
+  display: inline-block;
+}
+
+.tag.highlight {
+  background-color: plum;
+}
