diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
| commit | c9b6b9a5ca082fe7c1b6f58d7713f785a9eb6a5c (patch) | |
| tree | 3e4f42f93c7ae89a364e4d51fff6e5cec4e55fa9 /graphs/js/todoList | |
add: graphs et rushs
Diffstat (limited to 'graphs/js/todoList')
| -rw-r--r-- | graphs/js/todoList/index.html | 17 | ||||
| -rw-r--r-- | graphs/js/todoList/style.css | 64 | ||||
| -rw-r--r-- | graphs/js/todoList/todoList.js | 27 |
3 files changed, 108 insertions, 0 deletions
diff --git a/graphs/js/todoList/index.html b/graphs/js/todoList/index.html new file mode 100644 index 0000000..116cd2c --- /dev/null +++ b/graphs/js/todoList/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en" > + <head> + <meta charset="utf-8"> + <title>My To-do List</title> + <script src="todoList.js" defer></script> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <h1>My To-do List</h1> + <div> + <input id="textBox" type="text" placeholder="Enter a task..."> + <button id="addButton">Add Item</button> + </div> + <ul id="todoList"></ul> + </body> +</html> diff --git a/graphs/js/todoList/style.css b/graphs/js/todoList/style.css new file mode 100644 index 0000000..ebdd8d7 --- /dev/null +++ b/graphs/js/todoList/style.css @@ -0,0 +1,64 @@ +body { + background-color: #f2f2f2; + font-family: Arial, sans-serif; +} + +h1 { + text-align: center; + margin-top: 20px; +} + +div { + display: flex; + justify-content: center; + width: 70%; + margin-right: auto; + margin-left: auto; +} + +input[type="text"] { + padding: 10px; + border: none; + border-radius: 5px; + margin-right: 10px; + width: 70%; +} + +#todoList { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 30px; + list-style-type: decimal; +} + +.todoItem { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + margin-bottom: 10px; + width: 80%; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); +} + +.todoText { + flex-grow: 1; + margin-right: 10px; + padding-left: 10px; +} + +button { + padding: 5px 10px; + background-color: #f44336; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #e53935; +} diff --git a/graphs/js/todoList/todoList.js b/graphs/js/todoList/todoList.js new file mode 100644 index 0000000..34b2edf --- /dev/null +++ b/graphs/js/todoList/todoList.js @@ -0,0 +1,27 @@ +const input = document.getElementById("textBox"); +const addBtn = document.getElementById("addButton"); +const list = document.getElementById("todoList"); + +addBtn.addEventListener("click", () => { + if (input.value === "") { + return; + } + + const todo = document.createElement("li"); + + todo.classList.add("todoItem"); + const label = document.createElement("span"); + + label.innerHTML = input.value; + input.value = ""; + label.classList.add("todoText"); + todo.appendChild(label); + const del = document.createElement("button"); + + del.innerHTML = "Delete"; + del.addEventListener("click", () => { + list.removeChild(todo); + }); + todo.appendChild(del); + list.appendChild(todo); +}); |