To Do Application

We can add and remove items from our to do list. It would be better to keep track of items across page loads, but we will try that for homework.

todo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="CS4640 In Class Example">
  <meta name="description" content="An example to-do list using DOM manipulation">  
    
  <title>My To-do Items</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> 
  
  <script type="text/javascript">
	function addTodo() {
		var item = document.getElementById("item");
		var table = document.getElementById("todos");
		
		var newRow = table.insertRow(table.rows.length);
		newRow.insertCell(0).textContent = item.value;
		
		newRow.insertCell(1).innerHTML = "<button class=\"btn btn-sm btn-danger\" onclick=\"deleteTodo()\">Done</button>";
		
		newRow.addEventListener("mouseover", function() {
			table.clickedRow = this.rowIndex;
		});
		
		item.value = "";
	}
	
	function deleteTodo() {
		var table = document.getElementById("todos");
		var delRow = table.clickedRow;
		
		console.log(table.rows[delRow].cells[0].innerHTML);
		
		table.deleteRow(delRow);
	}
  </script>
       
</head>

<body>

    <div class="container">
        <div class="row">
        <form name="todo-add">
            <h1>My 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>Item</th>
                        <th>Operation</th>
                    </tr>
                </table>
    
            </div>
        </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>