DEV Community 👩‍💻👨‍💻

Mr.Habibi
Mr.Habibi

Posted on

Item insertion on Enter key

Hi everyone! I made a Item insertion with javascript. Try the code below: (fill the input and press enter to add an item)

This happen with this magic javascript code:

const mainInput = document.getElementById('main-input')
const itemList = document.getElementById('item-list')

mainInput.addEventListener('keydown', (ev) => {
  if (ev.key === "Enter") {
    ev.preventDefault()
    if (mainInput.value !== "") {
      const newItem = document.createElement('p')
      newItem.classList.add('item')
      itemList.appendChild(newItem)
      newItem.innerText = mainInput.value
      mainInput.value = ""
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈