pickerChoice

const input = document.querySelector('.input')
const word = document.querySelector('.word')
const addbtn = document.querySelector('.add')
const randombtn = document.querySelector('.random')

let inputValues = [];

addbtn.addEventListener('click', function() {
  textInput = input.value
  inputValues.push(textInput)
  input.value = '';
  displayInput();
})

randombtn.addEventListener('click', function() {
  if (inputValues.length > 0) {
    const randomIndx = Math.floor(Math.random() * inputValues.length);
    const random = inputValues[randomIndx]
    const newEl = document.createElement('p')
    newEl.textContent = random;
    word.appendChild(newEl)
  }
})

let displayInput = () => {
  word.innerHTML = inputValues.map(input => {
    return `<p>${input} <button class="deletebtn">remove</button></p>`;
  }).join('');

  // Add event listeners to the delete buttons
  const deleteButtons = document.querySelectorAll('.deletebtn');
  deleteButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.target.parentElement.remove();
      // Remove the deleted input from the array
      const inputIndex = inputValues.indexOf(button.parentElement.textContent.trim());
      if (inputIndex > -1) {
        inputValues.splice(inputIndex, 1);
      }
    });
  });
}