uploaded again

Abhijitkr · Jan 26, 2019 · daad7bf · daad7bf
1 parent 8825c2d
commit daad7bf
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <title>MY TODO LIST</title>
+</head>
+<body>
+    <div class="main">
+      <div class="container">
+        <div class="space">
+        <h1>MY AWESOME TODO</h1>
+        <form>
+          <input class="rounded insert" id="input" type="text">
+          <button type="button" class="rounded btn btn-primary btn-block" id="add">Add TODO</button>
+          <button type="button" class="rounded btn btn-danger btn-block" id="remove">Remove Done TODO</button>
+          <button type="button" class="rounded btn btn-warning btn-block" id="removeAll">Remove All TODOS</button>
+        </form>
+      </div>
+        <ul class="visual" id="todos">
+          <li class="myCheck"><input type="checkbox"><label>Examples :-</label></li>
+          <li class="myCheck"><input type="checkbox"><label>Do your Homework</label></li>
+          <li class="myCheck"><input type="checkbox"><label>Go To GYM</label></li>
+          <li class="myCheck"><input type="checkbox"><label>Attend the meeting</label></li>
+          <li class="myCheck"><input type="checkbox"><label>Assignment</label></li>
+        </ul>
+      </div>
+    </div>
+</body>
+<script src="script.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,59 @@
+var ul = document.getElementById('todos')
+var li
+
+
+var addButton = document.getElementById('add')
+addButton.addEventListener('click', addItem)
+
+var removeButton = document.getElementById('remove')
+removeButton.addEventListener('click', removeItem)
+
+var removeAllButton = document.getElementById('removeAll')
+removeAllButton.addEventListener('click', removeAllItem)
+
+function addItem(){
+    var input = document.getElementById('input')
+    var item = input.value
+    ul = document.getElementById('todos')
+    var textNode = document.createTextNode(item)
+    if(item === ''){
+        const myPara = document.createElement('p')
+        myPara.textContent = 'Enter your TODO!'
+        document.querySelector('form').appendChild(myPara)
+        setTimeout(() => {
+            myPara.textContent = ''
+        }, 5500)
+    }
+    else {
+        li = document.createElement('li')
+        var checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        // checkbox.setAttribute('id', 'check')
+        var label = document.createElement('label')
+        ul.appendChild(label)
+        li.appendChild(checkbox)
+        label.appendChild(textNode)
+        li.appendChild(label)
+        ul.insertBefore(li, ul.childNodes[0])
+        setTimeout(() => {
+            li.className = 'visual'
+        }, 2)
+        input.value = ''
+    }  
+}
+
+function removeItem(){
+    li = ul.children
+    for(let i=0; i<li.length; i++){
+         while(li[i] && li[i].children[0].checked){
+             ul.removeChild(li[i])
+}
+    }
+
+}
+
+function removeAllItem(){
+    while(ul.hasChildNodes()){
+        ul.removeChild(ul.firstChild)
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,87 @@
+.main{
+    background-color: #3c6382; 
+    height: 100vh;
+    font-family: 'Merriweather', serif;
+}
+.container{
+    background-color: white; 
+    height: 100vh;
+    width: 22em;
+    border: 7px solid #38ada9;
+    border-radius: 10px!important;
+    overflow: auto;
+    box-sizing: border-box;
+}
+.space{
+    padding: 48px;
+    padding-bottom: 0;
+}
+.insert{
+    width: 100%;
+}
+.rounded{
+    border-radius: 10px!important;
+}
+h1, p{
+    margin-bottom: 1em;
+    text-align: center;
+    font-weight: bold;
+}
+input{
+    margin-bottom: 2em;
+    border: 1px solid #95afc0;
+}
+#removeAll{
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+#todos{
+    list-style: none;
+}
+ul { 
+    padding-left: 0;
+    margin-top: 20px;
+}
+li{
+    border: 2px solid #95afc0;
+    border-radius: 10px!important;
+    height: 40px;
+    padding-top: 3.8px;
+    padding-left: 3.3px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    color: #2f3542;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+label{
+    position: relative;
+    bottom: 8px;
+    padding-left: 3.3px;
+}
+input[type="checkbox"] {
+    height: 27px;
+    width: 30px;
+}
+/* #check:checked:after{
+    content: '\2714';
+    font-size: 27px;
+    position: relative;
+    bottom: 6px;
+    left: 3.5px;
+    font-weight: bold;
+    color: black;
+} */
+input[type="checkbox"]:checked + label{
+    text-decoration: line-through;
+    color: rgba(0, 0, 0, .3);
+}
+.myCheck{
+    opacity: 1;
+    border-radius: 10px;
+}
+.visual{
+    opacity: 1 !important;
+    border-radius: 10px;
+}
+