gdscigdtuw · shivangisahay14 · Oct 31, 2020
diff --git a/Shivangi Sahay/to do list/css/font-awesome.css b/Shivangi Sahay/to do list/css/font-awesome.css
diff --git a/Shivangi Sahay/to do list/css/style.css b/Shivangi Sahay/to do list/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 Sahay/to do list/fonts/FontAwesome.otf b/Shivangi Sahay/to do list/fonts/FontAwesome.otf
diff --git a/Shivangi Sahay/to do list/fonts/fontawesome-webfont.eot b/Shivangi Sahay/to do list/fonts/fontawesome-webfont.eot
diff --git a/Shivangi Sahay/to do list/fonts/fontawesome-webfont.svg b/Shivangi Sahay/to do list/fonts/fontawesome-webfont.svg
diff --git a/Shivangi Sahay/to do list/fonts/fontawesome-webfont.ttf b/Shivangi Sahay/to do list/fonts/fontawesome-webfont.ttf
diff --git a/Shivangi Sahay/to do list/fonts/fontawesome-webfont.woff b/Shivangi Sahay/to do list/fonts/fontawesome-webfont.woff
diff --git a/Shivangi Sahay/to do list/fonts/fontawesome-webfont.woff2 b/Shivangi Sahay/to do list/fonts/fontawesome-webfont.woff2
diff --git a/Shivangi Sahay/to do list/img/bg.jpg b/Shivangi Sahay/to do list/img/bg.jpg
diff --git a/Shivangi Sahay/to do list/img/bg.png b/Shivangi Sahay/to do list/img/bg.png
diff --git a/Shivangi Sahay/to do list/img/bg1.jpg b/Shivangi Sahay/to do list/img/bg1.jpg
diff --git a/Shivangi Sahay/to do list/img/bg2.jpg b/Shivangi Sahay/to do list/img/bg2.jpg
diff --git a/Shivangi Sahay/to do list/img/images.jpg b/Shivangi Sahay/to do list/img/images.jpg
diff --git a/Shivangi Sahay/to do list/index.html b/Shivangi Sahay/to do list/index.html
@@ -0,0 +1,36 @@
+<!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">
+				<i class="fa fa-refresh"></i>
+
+			</div>
+			<div id="date"></div>
+		</div>
+		<div class="content">
+			<ul id="list">
+				<li class="item">
+				<i class="fa fa-circle-thin co" job="complete"></i>
+				<p class="text">Drink Coffee</p>
+				<i class="fa fa-trash-o de" job="delete"></i> 
+			</li>
+
+			</ul>
+         </div>
+         <div class="add-to-do">
+         	<i class="fa fa-plus-circle"></i>
+         	<input type="text" id="input" placeholder="Add in to-do items">
+         </div>
+    </div>
+    <script src="js/app.js" type="text/javascript"></script>
+</body>
+</html> 
diff --git a/Shivangi Sahay/to do list/js/app.js b/Shivangi Sahay/to do list/js/app.js
@@ -0,0 +1,71 @@
+const clear = document.querySelector(".clear");
+const dateElement = document.getElementById("date");
+const list = document.getElementById("list");
+const input = document.getElementById("input");
+
+const options = {weekday : "long" ,month: "short" , day: "numeric"}
+const today = new  Date();
+console.log(today);
+const CHECK = "fa-check-circle";
+const UNCHECK = "fa-circle-thin";
+const LINE_THROUGH = "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);
+        }
+    }
+});
+
+list.addEventListener("click",function(event){
+    const element = event.target;
+    const elementJob = element.attributes.job.value;
+
+    if(elementJob == "complete"){
+        completeToDo(element);
+    }
+    else if(elementJob == "delete"){
+        removeToDo(element);
+    }
+
+    })
+
+
+function completeToDo(element){
+element.classList.toggle(UNCHECK);
+element.classList.toggle(CHECK);
+element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
+
+}
+
+
+
+function removeToDo(element){
+    element.parentNode.parentNode.removeChild(element.parentNode);
+}
+
+
+
+function clearall(){
+    const myNode = document.getElementById("list");
+    myNode.innerHTML = '';
+
+}