Ok time for another JS exercise! Here is what I got, as always with my code below :)
Exercise: Create a Dynamic List with JavaScript
-
HTML Setup: In your HTML file, add an input field (for entering text) and a button labeled "Add to List". Also, include an empty unordered list (
<ul>) element. -
JavaScript Task: Write JavaScript code that does the following:
- When the button is clicked, it should take the text from the input field and create a new list item (
<li>) in the unordered list. - Each new list item should contain the text from the input field.
- After adding to the list, clear the input field so it's ready for new text.
- When the button is clicked, it should take the text from the input field and create a new list item (
- Extra Challenge: Add a feature to remove a list item when it's clicked. This requires you to add an event listener to each list item that removes it from the list when clicked.
This exercise will help you understand how to manipulate the Document Object Model (DOM) to dynamically add and remove elements, and handle user events in JavaScript.
My Code
Ok I can get kind of close to the result, but I can’t figure out how to append a list and also I can’t figure out how to put it on the webpage. Here is my code, and below my solution with support from ChatGPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise: Create a Dynamic List with JavaScript</title>
</head>
<body>
<input type="text" name="input" id="js-input">
<button id="js-add">Add to List</button>
<ul id="js-list"></ul>
<script>
let list = ['a', 'b', 'c'] /* in the real code this will be empty first */
document.getElementById('js-add').onclick = function () {
let item = document.getElementById('js-input').value
/* somehow add item to the list */
/* somehow display the list on the website */
}
</script>
</body>
</html>
And here is how the code should look like (JS only, the rest was fine)
<script>
let list = ['a', 'b', 'c']
document.getElementById('js-add').onclick = function () {
let item = document.getElementById('js-input').value
list.push(item);
// Create a new list item element
let li = document.createElement('li');
li.textContent = item;
// Append the new list item to the unordered list
document.getElementById('js-list').appendChild(li);
// Clear the input field
document.getElementById('js-input').value = '';
}
</script>
My Learnings:
-
list.push(item)adds an Item to my list -
document.createElement('[html element]')can be used to create HTML elements (instead of editing innerHTML, which is kind of ‘dirty coding’ I guess) -
.appendChild([object])adds an object inside an other html object
Oh yea and this would have been the code for the bonus task
// Add an event listener to the list item for the removal feature (Extra Challenge)
li.addEventListener('click', function() {
this.remove();
});
Ok will try to do this out of my head again next time!
Happy coding everyone!
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.