update

Divine-Afolayan · Dec 20, 2023 · 3408318 · 3408318
commit 3408318
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 0 deletions.
diff --git a/README.md 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
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="images/checklist.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="index.js" defer></script>
+    <title>Todo</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="card">
+        <h1>Todo</h1>
+        <div class="search">
+          <input type="search" id="add-box" placeholder="Add todo" />
+          <button id="add-todo">Add</button>
+        </div>
+        <ul id="list"></ul>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/index.js 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)
diff --git a/styles.css 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);
+}