To-Do Example - AJAX Version
Here is the code for our JavaScript-based to-do web application, which includes an AJAX request to get the current forecast from the National Weather Service for Charlottesville.
<!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>
function addTodo() {
let item = document.getElementById("item");
let table = document.getElementById("todos");
let newRow = table.insertRow(table.rows.length);
let newCell = newRow.insertCell(0);
newCell.textContent = item.value;
newCell = newRow.insertCell(1);
newCell.innerHTML = "<button class='btn btn-danger' onclick='removeTodo();'>X</button>";
item.value = "";
newRow.addEventListener("mouseover", function() {
table.clickedRow = this.rowIndex;
});
}
function removeTodo() {
let table = document.getElementById("todos");
table.deleteRow(table.clickedRow);
}
async function getForecast() {
const response = await fetch("https://api.weather.gov/gridpoints/LWX/50,26/forecast");
if (!response.ok) {
throw new Error("Could not query API");
}
const forecast = await response.json();
document.getElementById("forecast").innerHTML = "<b>"+
forecast.properties.periods[0].name+"</b>: "+
forecast.properties.periods[0].detailedForecast;
document.getElementById("forecastimg").innerHTML = "<img src='"+
forecast.properties.periods[0].icon+"' alt='"+
forecast.properties.periods[0].shortForecast+"'>";
}
</script>
</head>
<body onload="getForecast();">
<div class="container">
<div class="row">
<form name="todo-add" onsubmit="addTodo(); return false;">
<h1>Daily Planner</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">
<div class="card">
<h4 class="card-header">To Do List</h4>
<div class="card-body">
<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>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-12">
<div class="card">
<h4 class="card-header">Forecast</h4>
<p class="card-body" id="forecast">
</p>
<div class="card-footer" id="forecastimg"></div>
</div>
</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>