jblu/to-do-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

created todo list

Browse Source
This commit is contained in:
Jonathan Branan 2024-09-03 15:23:20 -05:00
commit 7f170d4f15
2 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
e.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<h2>Items</h2>
<div id="items"></div>
<input id="itemInput" type="text" placeholder="Add an item"/>
<button onclick="addItem()">Add Item</button>
<script src="e.js"></script>
</body>
</html>

62
e.js Normal file
View File

@ -0,0 +1,62 @@
let items = []
const itemsDiv = document.getElementById("items")
const input = document.getElementById("itemInput")
const storageKey = "items"
document.addEventListener("DOMContentLoaded", loadItems)
function renderItems() {
itemsDiv.innerHTML = null;
for (const [idx, item] of Object.entries(items)) {
const container = document.createElement("div")
container.style.marginBottom = "10px"
const text = document.createElement("p")
text.style.display = "inline"
text.style.marginRight = "10px"
text.textContent = item;
const button = document.createElement("button")
button.textContent = "Delete"
button.onclick = () => removeItem(idx)
container.appendChild(text)
container.appendChild(button)
itemsDiv.appendChild(container)
}
}
function loadItems() {
const oldItems = localStorage.getItem(storageKey)
if(oldItems) items = JSON.parse(oldItems)
renderItems()
}
function saveItems() {
const stringItems = JSON.stringify(items)
localStorage.setItem(storageKey, stringItems)
renderItems()
}
function addItem() {
const value = input.value
if (!value) {
alert("You cannot add an empty item")
return
}
items.push(value)
renderItems()
input.value = ""
saveItems()
}
function removeItem(idx) {
items.splice(idx, 1)
renderItems()
saveItems()
}
document.addEventListener("DOMContentLoaded", loadItems)