var listLis=document.getElementById('list');
const addbutton=document.querySelector('.fa-plus')
const inputBar=document.querySelector('.show')
function showInput(e){
inputBar.classList.toggle('show')
}
addbutton.addEventListener('click',showInput);
document.getElementById('myText').value='';
inputBar.addEventListener('keypress',seeToIt);
function seeToIt(e){
var textInInput= document.getElementById('myText').value;
var linode=document.createElement('li');
if(e.code=='Enter'){
linode.appendChild("Fpru");
listLis.appendChild(linode)
textInInput='';
}
}
This piece of JavaScript code is for managing a To-Do List. The corresponding HTML code is as follows:
<div id="container">
<h1>To-Do List <i class="fa fa-plus"></i></h1>
<input type="text" id='myText' class="show" placeholder="Add New To-Do">
<ul id='list'>
</ul>
</div>
The issue faced by the user is related to adding new items to the To-Do List. The 'list' element is where the items should be added, and the confusion lies in triggering an event on keypress in the input field to store the li item upon pressing the enter key.