Extend the JavaScript code below to interact with the displayed HTML elements.Enter a new todo in the input field. Once you click the button, the new todo item should appear at the bottom of the list.Confirm your code by creating a new todo!

HTML snippet

<input type="text" id="input" placeholder="To do..."/>
<button type="button" id="button">Add</button>
<ul id="list">
<li>Read a book</li>
<li>Lunch with Caro</li>
<li>Feed the dog</li>
</ul>

JavaScript snippet

const input = document.getElementById('input');
const button = document.getElementById('button');
const list = document.getElementById('list');

button.addEventListener('click', () => {
  // complete the code snippet
});

Preview