fix stylelint and eslint errors

Author: olanikegloria

Source-Code/ChoicePicker/script.js

@@ -1,61 +1,60 @@
-const tagsEl = document.getElementById('tags')
-const textarea = document.getElementById('textarea')
+const tagsEl = document.getElementById('tags');
+const textarea = document.getElementById('textarea');
 
-textarea.focus()
+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 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()
-    }
-})
+  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();
+  }
+});

Source-Code/ChoicePicker/style.css

@@ -1,48 +1,50 @@
-*{
-    box-sizing: border-box;
+* {
+  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;
+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;
+
+h3 {
+  color: white;
+  margin: 10px 0 20px;
+  text-align: center;
 }
-.container{
-    width: 500px
+
+.container {
+  width: 500px;
 }
 
 textarea {
-    border: none;
-    display: block;
-    width: 100%;
-    height: 100px;
-    font-family: inherit;
-    padding: 10px;
-    font-size: 16px;
-    margin: 0 0 20px;
+  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;
+  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;
-}
+  background-color: plum;
+}