From c9b6b9a5ca082fe7c1b6f58d7713f785a9eb6a5c Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Mon, 15 Sep 2025 01:08:27 +0200 Subject: add: graphs et rushs --- graphs/js/todoList/index.html | 17 +++++++++++ graphs/js/todoList/style.css | 64 ++++++++++++++++++++++++++++++++++++++++++ graphs/js/todoList/todoList.js | 27 ++++++++++++++++++ 3 files changed, 108 insertions(+) create mode 100644 graphs/js/todoList/index.html create mode 100644 graphs/js/todoList/style.css create mode 100644 graphs/js/todoList/todoList.js (limited to 'graphs/js/todoList') 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 @@ + + + + + My To-do List + + + + +

My To-do List

+
+ + +
+ + + 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); +}); -- cgit v1.2.3