created todo list

2024-09-03 15:23:20 -05:00 · 2024-09-03 15:23:20 -05:00 · 7f170d4f15
commit 7f170d4f15
2 changed files with 78 additions and 0 deletions
--- a/e.html
+++ b/e.html
@ -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>
--- a/e.js
+++ b/e.js
@ -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)