From e07a33267c71ee96a454ecf4abedc66823172b5e Mon Sep 17 00:00:00 2001
From: Gaurav <gaurav2ice@gmail.com>
Date: Mon, 2 Aug 2021 23:46:00 +0530
Subject: [PATCH] ToDoList

---
 gv.html | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 172 insertions(+)
 create mode 100644 gv.html
diff --git a/gv.html b/gv.html
new file mode 100644
index 0000000..cf15ccf
--- /dev/null
+++ b/gv.html
@@ -0,0 +1,172 @@
+<!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>Document</title>
+    <style>
+    body{
+        margin: 0;
+        min-width: 250px;
+    }
+    *{
+        box-sizing: border-box;
+    }
+    ul{
+        margin: 0;
+        padding: 0;
+    }
+    ul li{
+        cursor: pointer;
+        position: relative;
+        padding: 14px 10px 14px 45px;
+        background: rgba(238, 238, 238, 0.623);
+        font-size: 20px;
+        transition: 0.3s;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+    }
+    ul li:nth-child(odd){
+        background: #f9f9f918;
+    }
+    ul li:hover{
+        background: rgb(138, 119, 168);
+    }
+    ul li.checked{
+        background: #888;
+        color: #fff;
+        text-decoration: line-through;
+    }
+    
+    ul li.checked::before{
+        content: ' ';
+        position: absolute;
+        border-color: rgba(255, 255, 255, 0.164);
+        border-style: solid;
+        border-width: 0 2px 2px 0;
+        top: 12px;
+        left: 18px;
+        transform: rotate(45deg);
+        height: 16px;
+        width: 8px;
+    }
+    .close{
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 14px 18px 14px 18px;
+
+    }
+    .close:hover{
+        background-color: #3649f4;
+        color: beige;
+    }
+    .header{
+        background-color: #0d709e;
+        padding: 30px 40px;
+        color:beige;
+        text-align : center;
+    }
+    .header:after{
+        content: " ";
+        display: table;
+        clear:both;
+
+    }
+    input{
+        margin: 0;
+        border: darkgray;
+        border-radius: 0;
+        width: 80%;
+        padding:  10px;
+        font-size: 18px;
+        float: left;
+    }
+    .addBtn{
+        width: 30%;
+        background:lightslategrey;
+        color: #555;
+        float: left;
+        text-align: center;
+        font-size: 18px;
+        cursor: pointer;
+        border-radius: 0;
+        transition: 0.3s;
+
+    }
+    .addBtn:hover {
+        background-color: #bbb;
+    }
+
+    </style>
+</head>
+<body>
+    <div id="mytd" class="header">
+        <h1 style="margin: 2rem;"> My To Do List</h1>
+        <input type="text" id="myinput" placeholder="Title....">
+        <span onclick="newElement()" class="addBtn">ADD+</span>
+    </div>
+    <ul id="myUL">
+        <li>Html</li>
+        <li class="checked">CSS</li>
+        <li class="checked">JS</li>
+        <li>Bootcamp</li>
+        <li>React</li>
+    </ul>
+    <script>
+    
+var mytodolist = document.getElementsByTagName("LI");
+var i;
+for (i = 0; i < mytodolist.length; i++) {
+  var span = document.createElement("SPAN");
+  var txt = document.createTextNode("\u00D7");
+  span.className = "close";
+  span.appendChild(txt);
+  mytodolist[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("You must write something!");
+  } 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>
+</body>
+</html>
\ No newline at end of file
