From af0e3d32688d257ef1b0d870d4cdf0363b857bf6 Mon Sep 17 00:00:00 2001
From: Ritesh Arora <ritesharora2909@gmail.com>
Date: Mon, 25 Jan 2021 03:55:40 +0530
Subject: [PATCH] todo

---
 Project_4/to_do_list.html | 173 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 Project_4/to_do_list.html
diff --git a/Project_4/to_do_list.html b/Project_4/to_do_list.html
new file mode 100644
index 00000000..799f6864
--- /dev/null
+++ b/Project_4/to_do_list.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+    crossorigin="anonymous">
+  <title>To_do_list</title>
+  <!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
+  <!-- <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> -->
+
+  <style>
+   
+        .card {
+        margin: 0 auto; 
+        float: none; 
+        margin-bottom: 10px; 
+        align-items: center;
+        margin-top: 5%;
+}
+
+
+ul li {
+  cursor: pointer;
+  position: relative;
+  padding: 12px 8px 12px 40px;
+  list-style-type: none;
+  background: #eee;
+  font-size: 18px;
+  transition: 0.2s;
+  user-select: none;
+}
+
+ul li:nth-child(odd) {
+  background: #f9f9f9;
+}
+
+ul li:hover {
+  background: #ddd;
+}
+
+ul li.checked {
+  background: #888;
+  color: black;
+  text-decoration: line-through;
+}
+ul li.checked::before {
+  content: '';
+  position: absolute;
+  border-color: #fff;
+  border-style: solid;
+  border-width: 0 2px 2px 0;
+  top: 10px;
+  left: 16px;
+  transform: rotate(45deg);
+  height: 15px;
+  width: 7px;
+}
+.close {
+
+    cursor: pointer;
+    position: absolute;
+  right: 0;
+  top: 0;
+  padding: 12px 16px 12px 16px;
+ 
+}
+
+
+
+    </style>
+</head>
+
+<body>
+  <div>
+    <div class="card">
+      <h1><u>
+To do List
+      </u>
+          </h1>
+      <div class="mb-3">
+        <label for="exampleInputEmail1" class="form-label" align="center">Enter Your Day</label>
+        <input type="text" class="form-control" id="myInput" aria-describedby="emailHelp">
+      </div>
+      <div class="p-4">
+        <button onclick="newElement()" class="btn btn-primary addBtn" id='submit' type="submit">ADD</button>
+      </div>
+    </div>
+  </div>
+  <div class="m-5">
+    <ul class="list-group m-5 " id="myUL">
+
+    </ul>
+  </div>
+
+<br><br>
+
+  <div align="center" >
+    <h1 align="center"> <u>Benefits of To Do Lists</u> </h1>
+     <br><br>
+       <h3> Creates order - A to do list is an orderly way to organize how to do the things you want to do. 
+        <br></h3>
+       <h3>  Prioritize - Manage tasks effectively.
+        <br></h3>
+       <h3> 
+        Accountability.
+        <br></h3>
+       <h3> 
+        Rescheduling and organizing your time.Feeling Productive.
+        <br></h3>
+       <h3>  Feeling Productive.</h3> 
+       
+       
+     
+  </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+  crossorigin="anonymous"></script>
+<script>
+  var myNodelist = document.getElementsByTagName("LI");
+  var i;
+  for (i = 0; i < myNodelist.length; i++) {
+    var span = document.createElement("SPAN");
+    var txt = document.createTextNode("\u00D7");
+    span.className = "close";
+    span.appendChild(txt);
+    myNodelist[i].appendChild(span);
+  }
+
+  var close = document.getElementsByClassName("close");
+  var i;
+  for (i = 0; i < close.length; i++) {
+    close[i].onclick = function () {
+      var div = this.parentElement;
+      div.style.display = "none";
+    }
+  }
+
+  var list = document.querySelector('ul');
+  list.addEventListener('click', function (ev) {
+    if (ev.target.tagName === 'LI') {
+      ev.target.classList.toggle('checked');
+    }
+  }, false);
+
+  function newElement() {
+    var li = document.createElement("li");
+    var inputValue = document.getElementById("myInput").value;
+    var t = document.createTextNode(inputValue);
+    li.appendChild(t);
+    if (inputValue === '') {
+      alert("Enter the data Please");
+    } else {
+      document.getElementById("myUL").appendChild(li);
+    }
+    document.getElementById("myInput").value = "";
+
+    var span = document.createElement("SPAN");
+    var txt = document.createTextNode("\u00D7");
+    span.className = "close";
+    span.appendChild(txt);
+    li.appendChild(span);
+    for (i = 0; i < close.length; i++) {
+      close[i].onclick = function () {
+        var div = this.parentElement;
+        div.style.display = "none";
+      }
+    }
+  }
+</script>
+
+</html>
\ No newline at end of file
