- Create a new HTML file and add the necessary HTML structure.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="form">
<input type="text" id="input" placeholder="Add a new item">
<button type="submit">Add</button>
</form>
<ul id="list"></ul>
</body>
</html>
[/dm_code_snippet]
- Add a
<script>tag to your HTML file and include the necessary JavaScript code to handle the form submission and add new items to the list. You can use thesubmitevent on the form element to trigger the addition of a new item to the list.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="form">
<input type="text" id="input" placeholder="Add a new item">
<button type="submit">Add</button>
</form>
<ul id="list"></ul>
<script>
// Get form element
const form = document.getElementById('form');
// Get input element
const input = document.getElementById('input');
// Get list element
const list = document.getElementById('list');
// Add item to list
function addItem() {
// Get input value
const value = input.value;
// Create new list item element
const li = document.createElement('li');
// Set list item text to input value
li.textContent = value;
// Append list item to list
list.appendChild(li);
// Clear input field
input.value = '';
}
// Handle form submission
form.addEventListener('submit', event => {
// Prevent default form submission behavior
event.preventDefault();
// Add item to list
addItem();
});
</script>
</body>
</html>
[/dm_code_snippet]
- To allow users to remove items from the list, you can add a delete button next to each list item. You can use the
clickevent on the delete button to remove the corresponding list item from the DOM.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="form">
<input type="text" id="input" placeholder="Add a new item">
<button type="submit">Add</button>
</form>
<ul id="list"></ul>
<script>
// Get form element
const form = document.getElementById('form');
// Get input element
const input = document.getElementById('input');
// Get list element
const list = document.getElementById('list');
// Add item to list
function addItem(value) {
// Create new list item element
const li = document.createElement('li');
// Set list item text to input value
li.textContent = value;
// Create delete button element
const deleteButton = document.createElement('button');
// Set delete button text
deleteButton.textContent = 'Delete';
// Append delete button to list item
li.appendChild(deleteButton);
// Append list item to list
list.appendChild(li);
}
// Handle form submission
form.addEventListener('submit', event => {
// Prevent default form submission behavior
event.preventDefault();
// Add item to list
addItem(input.value);
// Clear input field
input.value = '';
});
// Handle delete button clicks
list.addEventListener('click', event => {
// Check if event target is a delete button
if (event.target.tagName === 'BUTTON') {
// Remove list item from DOM
event.target.parentElement.remove();
}
});
</script>
</body>
</html>
[/dm_code_snippet]
