created the color picker files

olanikegloria · olanikegloria · commit ce1e43c2e8b7 · 2024-05-16T08:35:00.000+01:00
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,61 @@
+const tagsEl = document.getElementById('tags')
+const textarea = document.getElementById('textarea')
+
+textarea.focus()
+
+function 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)
+        
+    });
+}
+
+function pickRandomTag(){
+    const tags = document.querySelectorAll('.tag')
+    return tags[Math.floor(Math.random()* tags.length)]
+}
+
+function highlightTag(tag){
+    tag.classList.add('highlight')
+}
+
+function unHighlightTag(tag){
+    tag.classList.remove('highlight')
+}
+
+function 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,48 @@
+*{
+    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;
+}
