From ce1e43c2e8b7200d3fa28e7e0ba23ba2174c1024 Mon Sep 17 00:00:00 2001 From: olanikegloria Date: Thu, 16 May 2024 08:35:00 +0100 Subject: [PATCH 1/3] created the color picker files --- Source-Code/ChoicePicker/index.html | 24 ++++++++++++ Source-Code/ChoicePicker/script.js | 61 +++++++++++++++++++++++++++++ Source-Code/ChoicePicker/style.css | 48 +++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 Source-Code/ChoicePicker/index.html create mode 100644 Source-Code/ChoicePicker/script.js create mode 100644 Source-Code/ChoicePicker/style.css diff --git a/Source-Code/ChoicePicker/index.html b/Source-Code/ChoicePicker/index.html new file mode 100644 index 0000000..50c69db --- /dev/null +++ b/Source-Code/ChoicePicker/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + +
+

Enter all of the choices divided by a comma (','). +
Press enter when you're done

+ +
+ +
+ Choice 1 + Choice 2 + Choice 3 +
+ + + + \ No newline at end of file diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js new file mode 100644 index 0000000..07ea8a7 --- /dev/null +++ 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() + } +}) \ No newline at end of file diff --git a/Source-Code/ChoicePicker/style.css b/Source-Code/ChoicePicker/style.css new file mode 100644 index 0000000..f573783 --- /dev/null +++ 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; +} \ No newline at end of file From 5b13821b4d65c36a6f4c5451650400f1191eb466 Mon Sep 17 00:00:00 2001 From: olanikegloria Date: Thu, 16 May 2024 15:36:21 +0100 Subject: [PATCH 2/3] used ES6 syntax --- Source-Code/ChoicePicker/script.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js index 07ea8a7..c6e7f59 100644 --- a/Source-Code/ChoicePicker/script.js +++ b/Source-Code/ChoicePicker/script.js @@ -3,7 +3,7 @@ const textarea = document.getElementById('textarea') textarea.focus() -function createTags(input){ +const createTags = (input) => { const tags = input.split(',').filter(tag=> tag.trim()!=='').map(tag => tag.trim()) tagsEl.innerHTML = '' tags.forEach(tag => { @@ -15,20 +15,20 @@ function createTags(input){ }); } -function pickRandomTag(){ +const pickRandomTag = ()=>{ const tags = document.querySelectorAll('.tag') return tags[Math.floor(Math.random()* tags.length)] } -function highlightTag(tag){ +const highlightTag = (tag)=>{ tag.classList.add('highlight') } -function unHighlightTag(tag){ +const unHighlightTag = (tag)=>{ tag.classList.remove('highlight') } -function randomSelect() { +const randomSelect = () => { const times = 30 const interval = setInterval(()=>{ const randomTag = pickRandomTag() From 571f59ebabbde391a633d0a108212150e4d832ec Mon Sep 17 00:00:00 2001 From: olanikegloria Date: Thu, 16 May 2024 15:47:56 +0100 Subject: [PATCH 3/3] fix stylelint and eslint errors --- Source-Code/ChoicePicker/script.js | 111 ++++++++++++++--------------- Source-Code/ChoicePicker/style.css | 72 ++++++++++--------- 2 files changed, 92 insertions(+), 91 deletions(-) diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js index c6e7f59..a5d62d9 100644 --- a/Source-Code/ChoicePicker/script.js +++ b/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() - } -}) \ No newline at end of file + 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(); + } +}); \ No newline at end of file diff --git a/Source-Code/ChoicePicker/style.css b/Source-Code/ChoicePicker/style.css index f573783..ad607c3 100644 --- a/Source-Code/ChoicePicker/style.css +++ b/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; -} \ No newline at end of file + background-color: plum; +}