MASIGNASUKAv102
6510051498749449419

Random Choice Picker

Random Choice Picker
Add Comments
Sunday, April 23, 2023

 Random Choice Picker

Below Given is the HTML Source Code :-


 <html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
   <title>Random Choser</title>
   <link href="style.css" rel="stylesheet"></link>
</head>
<body>
   <body>
       <div class="container">
        <h3>Enter All the choices divided by a Comma (','). <br/>Press Enter when you're Done </h3>
        <textarea id="textarea" placeholder="Enter Choices Here......"></textarea>
      <div id="tags"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>


       <html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
   <title>Random Choser</title>
   <link href="style.css" rel="stylesheet"></link>
</head>
<body>
   <body>
       <div class="container">
        <h3>Enter All the choices divided by a Comma (','). <br/>Press Enter when you're Done </h3>
        <textarea id="textarea" placeholder="Enter Choices Here......"></textarea>
      <div id="tags"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
Below Given is the CSS Source Code :-


 *{
    box-sizing: border-box;
}  
body{
    background-color: #2b88f0; 
    font-family: 'Muli', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
h3{
    columns: #fff;
    margin: 10px 0 20px;
    text-align: center;
}
.container{
    width: 500px;
}
textarea{
    display: block;
    height: 10vh;
    border: none;
    width: 100%;
    font-family: inherit;
    padding: 10px;
    margin: 0 0 20px;
    font-size: 16px;
}
.tags{
    background-color: #f0932b;
    color: black;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 0 5px 10px 0;
    font-size: 14px;
    display: inline-block;
}
.tags.highlight{
    background-color: #273c75;
}


     *{
    box-sizing: border-box;
}  
body{
    background-color: #2b88f0; 
    font-family: 'Muli', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
h3{
    columns: #fff;
    margin: 10px 0 20px;
    text-align: center;
}
.container{
    width: 500px;
}
textarea{
    display: block;
    height: 10vh;
    border: none;
    width: 100%;
    font-family: inherit;
    padding: 10px;
    margin: 0 0 20px;
    font-size: 16px;
}
.tags{
    background-color: #f0932b;
    color: black;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 0 5px 10px 0;
    font-size: 14px;
    display: inline-block;
}
.tags.highlight{
    background-color: #273c75;
}
Below Given is the javascript Source Code :-


 const tagsEl = document.GetElementByid('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) =>{
  createTags(e.target.value)

  if(e.key === 'Enter'){
    setTimeout(()=>{
      e.target.value = ''
    }, 10)
    randomSelect()
  }
})

function createTags(input){
  const tags = input.split(',').filter(tag => tag.trin() !== '').map(tag => tag.trin())
  tagsInnner.HTML = ''
 
  tags.forEach(tags => {
   const tagsEl = document.createElement('span')
   tagsEl.classList.add('tag')
   tagsEl.innerText = tag 
   tagsEl.appendChild(tagEl)
  })
}
function randomSelect(){
  const times = 30

  const interval =setinterval(() => {
    const randomTag = pickrandomtag()

    highlightTag(randomTag)
    setTimeout(() => {
      unHighlighTag(randomTag)

    },100)
  },100);

  setTimeout(() => {
    clearInterval(interval)

    setTimeout(() => {
      const randomTag = pickrandomtag()

      highlightTag(randomTag)
    },100)
  },times * 100)
}
function pickrandomtag(){
  const tags = document.querySelectorAll('.tag')
  return tags[Math.floor(Math.random() * tags.length)]
}
function highlightTag(tag){
  tag.classList.add ('highlight')
}
function unHighlighTag(tag){
  tag.classList.remove('highlight')
}



     const tagsEl = document.GetElementByid('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) =>{
  createTags(e.target.value)

  if(e.key === 'Enter'){
    setTimeout(()=>{
      e.target.value = ''
    }, 10)
    randomSelect()
  }
})

function createTags(input){
  const tags = input.split(',').filter(tag => tag.trin() !== '').map(tag => tag.trin())
  tagsInnner.HTML = ''
 
  tags.forEach(tags => {
   const tagsEl = document.createElement('span')
   tagsEl.classList.add('tag')
   tagsEl.innerText = tag 
   tagsEl.appendChild(tagEl)
  })
}
function randomSelect(){
  const times = 30

  const interval =setinterval(() => {
    const randomTag = pickrandomtag()

    highlightTag(randomTag)
    setTimeout(() => {
      unHighlighTag(randomTag)

    },100)
  },100);

  setTimeout(() => {
    clearInterval(interval)

    setTimeout(() => {
      const randomTag = pickrandomtag()

      highlightTag(randomTag)
    },100)
  },times * 100)
}
function pickrandomtag(){
  const tags = document.querySelectorAll('.tag')
  return tags[Math.floor(Math.random() * tags.length)]
}
function highlightTag(tag){
  tag.classList.add ('highlight')
}
function unHighlighTag(tag){
  tag.classList.remove('highlight')
}
CodeVerse

comment 0 Comments

more_vert