From b376aaadb133a9be245765da46c33bf4a1b34840 Mon Sep 17 00:00:00 2001
From: Nithin Kalluru <kallurunithin8771@gmail.com>
Date: Sat, 13 May 2023 12:38:43 +0530
Subject: [PATCH] added todo list

---
 submissions/todo.html | 74 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 submissions/todo.html
diff --git a/submissions/todo.html b/submissions/todo.html
new file mode 100644
index 0000000..39fee24
--- /dev/null
+++ b/submissions/todo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To-Do list</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <style>
+        .add-todo-input {
+            outline: none;
+        }
+
+        .add-todo-input:focus {
+            border: none !important;
+            box-shadow: none !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="container shadow p-2 m-5 bg-light rounded">
+        <div class="row m-1 p-4">
+            <div class="col">
+                <div class="p-1 h1 text-primary text-center mx-auto display-inline-block">
+                    <u>My Todo-s</u>
+                </div>
+            </div>
+        </div>
+        <div class="row m-1 p-3">
+            <div class="col col-11 mx-auto">
+                <div class="row shadow p-3 mb-5 bg-body rounded align-items-center justify-content-center">
+                    <input type="text" id="user_input" class="form-control form-control-lg add-todo-input bg-transparent rounded border-0" placeholder="Add new...">
+                    <button id="enter" type="button" class="btn btn-primary">Add</button>
+                </div>
+            </div>
+        </div>
+        <div class="todo-list">
+            <ul></ul>
+        </div>
+    </div>
+    <script>
+        var button = document.getElementById("enter");
+        var input = document.getElementById("user_input");
+        var ul = document.querySelector("ul");
+
+        function inputLength() {
+            return input.value.length;
+        }
+
+        function createListElement() {
+            var li = document.createElement("li");
+            li.appendChild(document.createTextNode(input.value));
+            ul.appendChild(li);
+            input.value = "";
+        }
+
+        function addListAfterClick() {
+            if (inputLength() > 0) {
+                createListElement();
+            }
+        }
+
+        function addListAfterKeypress(event) {
+            if (inputLength() > 0 && event.keyCode === 13) {
+                createListElement();
+            }
+        }
+
+        button.addEventListener("click", addListAfterClick);
+
+        input.addEventListener("keypress", addListAfterKeypress);
+    </script>
+</body>
+</html>
\ No newline at end of file
