TODO list

interview question

by leethelobster

HTML

<input type="text" id="input" value="type something...">
<button id="btn-add">add</button>

<ul id="list-container"></ul>

JavaScript

// recreate this todo list https://www.w3schools.com/howto/howto_js_todolist.asp

let lists = ['gym', 'eggs', 'bread'];

const elContainer = document.getElementById('list-container');
const addBtn = document.getElementById('btn-add');
const input = document.getElementById('input');

let populateList = () => {
	elContainer.innerHTML = lists.map((list) => {
    return `<li>${list}</li>`;
  }).join('');
}

// remove something from the list
elContainer.addEventListener('click', (e) => {
  lists.splice(lists.indexOf(e.target.innerHTML), 1);
  populateList();
});

// add something to the list
addBtn.addEventListener('click', () => {
	lists.push(input.value);
  populateList();
});

populateList();