From 34083180c47d89508995f015cf05501f65c4f0c8 Mon Sep 17 00:00:00 2001 From: Divine Afolayan Date: Wed, 20 Dec 2023 18:21:04 +0100 Subject: [PATCH] update --- README.md | 7 +++ images/checklist.svg | 1 + index.html | 29 ++++++++++ index.js | 44 ++++++++++++++ styles.css | 134 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 215 insertions(+) create mode 100644 README.md create mode 100644 images/checklist.svg create mode 100644 index.html create mode 100644 index.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..d54f2c9 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Todo + +## Functionality + +1. Add todos +2. Remove todos +3. Cross out todos diff --git a/images/checklist.svg b/images/checklist.svg new file mode 100644 index 0000000..e6a1900 --- /dev/null +++ b/images/checklist.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a8cb65 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + Todo + + +
+
+

Todo

+
+ + +
+
    +
    +
    + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..6af78f4 --- /dev/null +++ b/index.js @@ -0,0 +1,44 @@ +const input = document.getElementById("add-box"); +const addBtn = document.getElementById("add-todo"); +const list = document.getElementById("list") + +function addTodo() { + if (input.value === "") { + alert("Please enter in some text to the input box :)") + } else { + let listItem = document.createElement("li"); + listItem.innerHTML = input.value.trim(); + + let cancel = document.createElement("span"); + cancel.innerHTML = "\u00d7"; + + listItem.appendChild(cancel); + list.appendChild(listItem); + + cancel.addEventListener("click", removeTodo); + listItem.addEventListener("click", toggleChecked); + } + input.value = ""; +} + +function removeTodo(event) { + event.target.parentElement.remove(); +} + +function toggleChecked(event) { + event.target.classList.toggle("checked") +} + +addBtn.addEventListener("click", addTodo); + +function handleKeyPress(event) { + if (input.value.trim() === "" && event.keyCode === 13) { + alert("Please enter in some text to the input box :)") + } + + if (input.value.trim() !== "" && event.keyCode === 13) { + addTodo(); + } +} + +input.addEventListener("keypress", handleKeyPress) \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e69f809 --- /dev/null +++ b/styles.css @@ -0,0 +1,134 @@ +* { + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; +} + +body { + display: flex; + align-items: center; + justify-content: center; + color: rgb(34, 56, 67); +} + +.container { + width: 100%; + background-color: rgb(216, 180, 160); + min-height: 100vh; + padding: 10px; +} + +.card { + margin: 100px auto 100px; + max-width: 500px; + min-height: 100px; + padding: 40px 30px; + background-color: rgb(239, 241, 243); + border-radius: 20px; + text-align: center; +} + +#add-box { + text-indent: 10px; + outline: none; + border: none; + width: 70%; + height: 40px; + border-radius: 25px; + background-color: rgba(255, 255, 255, 0.9); + font-size: 20px; + font-weight: 400; + transition: width 0.3s ease; + color: rgb(34, 56, 67); + padding: 12px; +} + +#add-box:focus { + background-color: rgba(255, 255, 255, 0.95); +} + +h1 { + color: rgb(34, 56, 67); + font-weight: 900; + margin-bottom: 10px; +} + +.checklist { + width: 60px; + height: 35px; +} + +.search { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 25px; +} + +#add-todo { + width: 25%; + height: 40px; + border-radius: 25px; + background-color: rgb(215, 122, 97); + border: none; + font-size: 20px; + font-weight: 500; + color: rgb(34, 56, 67); + cursor: pointer; + user-select: none; +} + +#add-todo:hover { + background-color: rgb(238, 147, 122); +} + +#list { + max-width: 500px; + list-style-type: none; + text-align: left; + background-color: rgb(239, 241, 243); +} + +#list li { + margin-bottom: 5px; + font-size: 20px; + font-weight: 400; + padding: 15px; + cursor: pointer; + user-select: none; + position: relative; + /* background-color: rgb(219, 211, 216); */ + border-radius: 5px; + color: rgb(34, 56, 67); + background-color: rgb(239, 241, 243); + white-space: pre-wrap; /* This line makes the text wrap */ + word-break: break-word; +} + +#list li:last-child { + margin-bottom: 0; +} + +.checked { + color: #555; + text-decoration: line-through; +} + +#list li span { + position: absolute; + padding-left: 10px; + padding-right: 18px; + right: 0; + top: 5px; + width: 1px; + height: 40px; + font-size: 22px; + color: rgb(215, 122, 97); + line-height: 40px; + text-align: center; +} + +#list li span:hover { + color: rgb(238, 147, 122); +} \ No newline at end of file