gdscigdtuw · shivangigoel1302 · Oct 28, 2020
diff --git a/Shivangi Goel/Todolist/css/font-awesome.css b/Shivangi Goel/Todolist/css/font-awesome.css
diff --git a/Shivangi Goel/Todolist/css/style.css b/Shivangi Goel/Todolist/css/style.css
@@ -0,0 +1,184 @@
+body{
+    padding: 0;
+    margin: 0;
+    background-color: rgba(0,0,0,0.1);
+    font-family: 'Titillium Web', sans-serif;
+}
+
+/* ------------ container ------------ */
+.container{
+    padding:10px;
+    width:380px;
+    margin:0 auto;
+}
+
+/* ------------ header ------------ */
+.header{
+    width: 380px;
+    height:200px;
+    background-image: url('../img/bg2.jpg');
+    background-size: 100% 200%;
+    background-repeat: no-repeat;
+    border-radius: 15px 15px 0 0;
+    position: relative;
+}
+.clear{
+    width : 30px;
+    height: 30px;
+    position: absolute;
+    right:20px;
+    top: 20px;
+}
+.clear i{
+    font-size: 30px;
+    color: #FFF;
+}
+.clear i:hover{
+    cursor: pointer;
+    text-shadow: 1px 3px 5px #000;
+    transform: rotate(45deg);
+}
+#date{
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: #FFF;
+    font-size: 25px;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+/* ------------ content ------------ */
+.content{
+    width:380px;
+    height: 350px;
+    max-height:350px;
+    background-color: #FFF;
+    overflow: auto;
+}
+.content::-webkit-scrollbar { 
+    display: none; 
+}
+.content ul{
+    padding:0;
+    margin:0;
+}
+.item{
+    width:380px;
+    height: 45px;
+    min-height: 45px;
+    position: relative;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.item i.co{
+    position: absolute;
+    font-size: 25px;
+    padding-left:5px;
+    left:15px;
+    top:10px;
+}
+.item i.co:hover{
+    cursor: pointer;
+}
+.fa-check-circle{
+    color:#6eb200;
+}
+.item p.text{
+    position: absolute;
+    padding:0;
+    margin:0;
+    font-size: 20px;
+    left:50px;
+    top:5px;
+    background-color: #FFF;
+    max-width:285px;
+}
+.lineThrough{
+    text-decoration: line-through;
+    color : #ccc;
+}
+.item i.de{
+    position: absolute;
+    font-size: 25px;
+    right:15px;
+    top:10px;
+}
+.item i.de:hover{
+    color:#af0000;
+    cursor: pointer;
+}
+/* ------------ add item ------------ */
+.add-to-do{
+    position: relative;
+    width: 360px;
+    height:40px;
+    background-color: #FFF;
+    padding: 10px;
+    border-top: 1px solid rgba(0,0,0,0.1);
+}
+.add-to-do i{
+    position: absolute;
+    font-size: 40px;
+    color: #4162f6;
+}
+
+.add-to-do input{
+    position: absolute;
+    left: 50px;
+    height: 35px;
+    width: 310px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    padding-left:10px;
+}
+.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: #4162f6;
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 20px;
+}
+.add-to-do input::-moz-placeholder { /* Firefox 19+ */
+    color: #4162f6;
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 20px;
+}
+.add-to-do input:-ms-input-placeholder { /* IE 10+ */
+    color: #4162f6;
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 20px;
+}
+.add-to-do input:-moz-placeholder { /* Firefox 18- */
+    color: #4162f6;
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 20px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Shivangi Goel/Todolist/fonts/FontAwesome.otf b/Shivangi Goel/Todolist/fonts/FontAwesome.otf
diff --git a/Shivangi Goel/Todolist/fonts/fontawesome-webfont.eot b/Shivangi Goel/Todolist/fonts/fontawesome-webfont.eot
diff --git a/Shivangi Goel/Todolist/fonts/fontawesome-webfont.svg b/Shivangi Goel/Todolist/fonts/fontawesome-webfont.svg
diff --git a/Shivangi Goel/Todolist/fonts/fontawesome-webfont.ttf b/Shivangi Goel/Todolist/fonts/fontawesome-webfont.ttf
diff --git a/Shivangi Goel/Todolist/fonts/fontawesome-webfont.woff b/Shivangi Goel/Todolist/fonts/fontawesome-webfont.woff
diff --git a/Shivangi Goel/Todolist/fonts/fontawesome-webfont.woff2 b/Shivangi Goel/Todolist/fonts/fontawesome-webfont.woff2
diff --git a/Shivangi Goel/Todolist/img/bg.jpg b/Shivangi Goel/Todolist/img/bg.jpg
diff --git a/Shivangi Goel/Todolist/img/bg.png b/Shivangi Goel/Todolist/img/bg.png
diff --git a/Shivangi Goel/Todolist/img/bg1.jpg b/Shivangi Goel/Todolist/img/bg1.jpg
diff --git a/Shivangi Goel/Todolist/img/bg2.jpg b/Shivangi Goel/Todolist/img/bg2.jpg
diff --git a/Shivangi Goel/Todolist/img/images.jpg b/Shivangi Goel/Todolist/img/images.jpg
diff --git a/Shivangi Goel/Todolist/index.html b/Shivangi Goel/Todolist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>JavaScript - To Do List</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
+    <link rel="stylesheet" href="css/font-awesome.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="clear" onclick="clearall()">
+                <i class="fa fa-refresh" id="refresh"></i>
+            </div>
+            <div id="date">hgjh</div>
+        </div>
+        <div class="content">
+            <ul id="list">
+
+            </ul>
+        </div>
+        <div>
+            <i class="fa fa-plus-circle"></i>
+            <input type="text" id="input" placeholder="Add A todo">
+        </div>
+    </div>
+</body>
+<script src="js/app.js"></script>
+</html>
diff --git a/Shivangi Goel/Todolist/js/app.js b/Shivangi Goel/Todolist/js/app.js
@@ -0,0 +1,61 @@
+const clear = document.querySelector("clear");
+const list = document.getElementById("list");
+const input = document.getElementById("input");
+const dateElement = document.getElementById("date");
+
+const options ={weekday:"long", month :"short", day:"numeric"};
+
+const today = new Date();
+
+const CHECK = "fa-check-circle";
+const UNCHECK = "fa-circle-thin";
+const LINETHROUGH = "linethrough";
+dateElement.innerHTML= today.toLocaleDateString("en-IN",options);
+
+function addTodo(todo){
+    const item = `<li class="item">
+    <i class="fa fa-circle thin co" job="complete"></i>
+    <p class="text">${todo}</p>
+    <i class="fa fa-trash-o de" job="delete"></i>
+    </li>
+    `
+    const position = "beforeend";
+    list.insertAdjacentHTML(position,item);
+}
+document.addEventListener("keyup",function(event){
+   if(event.key =="Enter"){
+       const todo = input.value;
+       if(todo){
+           addTodo(todo);
+       }
+   }
+});
+
+function complete(element){
+//    element.classList.toggle(CHECK);
+//    element.classList.toggle(UNCHECK);
+//    element.parentNode.querySelector(".text").classList.toggle(LINETHROUGH);
+element.classList.toggle(UNCHECK);
+element.classList.toggle(CHECK);
+element.parentNode.querySelector(".text").classList.toggle(LINETHROUGH);
+}
+
+function removeTodo(element){
+    element.parentNode.parentNode.removeChild(element.parentNode);
+}
+
+list.addEventListener("click",function(event){
+    const element = event.target;
+    const elementjob = element.attributes.job.value;
+    if(elementjob == "complete"){
+        complete(element);
+    }
+    else if(elementjob == "delete"){
+        removeTodo(element);
+    }
+});
+
+function clearall(){
+
+    list.innerHTML = '';
+}