To-Do Example - Basic Version
Here is the code for our JavaScript-based to-do web application with basic functionality to add and remove to-do items.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="CS4640 To-Do List">
<meta name="description" content="An example to-do list using DOM manipulation">
<title>To-do List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script>
// Add a to-do item to the table
function addTodo() {
// Get the item form element
let item = document.getElementById("item");
// Get the table element
let table = document.getElementById("todos");
// Insert a new row (with cells) at the end of the table
let newRow = table.insertRow(table.rows.length);
let newCell = newRow.insertCell(0);
newCell.textContent = item.value;
newCell = newRow.insertCell(1);
// Add HTML with a button (with event listener attached)
newCell.innerHTML = "<button class='btn btn-danger' onclick='removeTodo();'>X</button>";
item.value = "";
// Add event listener to the new row that sets a property in
// the table itself as to which row the mouse is currently over
newRow.addEventListener("mouseover", function() {
table.clickedRow = this.rowIndex;
});
}
// Remove a to-do item by deleting the row that the mouse
// is currently over.
function removeTodo() {
let table = document.getElementById("todos");
table.deleteRow(table.clickedRow);
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<form name="todo-add" onsubmit="addTodo(); return false;">
<h1>To Do List</h1>
<label for="item" class="form-label">Item: </label>
<div class="input-group">
<input type="text" class="form-control" placeholder="To-Do Item" autofocus id="item" name="item"/>
<input type="button" class="btn btn-primary" value="Add Item" onclick="addTodo();"/>
</div>
</form>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-12">
<table id="todos" class="table table-striped">
<tr class="table-dark">
<th style="width: 80%;">Item</th>
<th style="width: 20%;">Operation</th>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>