Added TODO LIST by Mritunjay Kumar

Contributors.html

@@ -406,6 +406,7 @@
       <a class="box-item" href="https://github.com/YogishaNiraula"><span>Yogisha Niraula</span></a>
     <a class="box-item" href="https://github.com/Saurav017"><span>Saurav Purohit</span></a>
      <a class="box-item" href="https://github.com/JuktaGoyari"><span>Jukta Goyari</span></a>
+    <a class="box-item" href="https://github.com/mritunjay7065"><span>Mritunjay Kumar</span></a>
 
 
 

Program's_Contributed_By_Contributors/JavaScript_Programs/To_Do_List_Vanilla_JS/app.js

@@ -0,0 +1,219 @@
+// Selectors
+
+const todoInput = document.querySelector('.todo-input');
+const todoButton= document.querySelector('.todo-button');
+const todoList = document.querySelector('.todo-list');
+const filterOption = document.querySelector('.filter-todo');
+
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded',getTodos) // if page is refreshed then call getTodos() function
+todoButton.addEventListener('click',addTodo)
+todoList.addEventListener('click',deleteCheck)
+filterOption.addEventListener('click',filtertodo)
+
+
+// Functions
+
+function addTodo(event){
+    event.preventDefault(); //prevents form from submitting
+
+    //  TODO div
+    const todoDiv = document.createElement('div')
+    todoDiv.classList.add("todo")
+
+    // create Li
+    const newTodo = document.createElement('li');
+    newTodo.innerText = todoInput.value;// input from from 
+    newTodo.classList.add("todo-item");
+    todoDiv.appendChild(newTodo);
+    // ADDING TODOS TO LOCAL STORAGE !!!!!!!!!!!!!!!!!!!
+    saveLocalTodos(todoInput.value);
+
+    // cHECK MARK/COMPLETE BUTTON
+    const completedButton = document.createElement('button')
+    completedButton.innerHTML = '<i class = "fas fa-check"></i>'
+    completedButton.classList.add("complete-btn")
+    todoDiv.appendChild(completedButton)
+
+    // cHECK DELETE BUTTON
+        const trashButton = document.createElement('button')
+        trashButton.innerHTML = '<i class = "fas fa-trash"></i>'
+        trashButton.classList.add("trash-btn")
+        todoDiv.appendChild(trashButton)
+
+        /// Append to list
+        todoList.appendChild(todoDiv)
+
+        //Clear todo input value
+        todoInput.value = "";
+}
+
+function deleteCheck(e) {
+// console.log(e.target)
+   const item = e.target;
+
+   //DELETE TODO
+   if(item.classList[0] === 'trash-btn')
+   {  
+       const todo = item.parentElement;
+       todo.classList.add('fall')
+       removeLocalTodos(todo); // REMOVING Local todos from local storage !!!!---
+       // here the function waits till the animation is not completed then function runs and remove the element
+       todo.addEventListener('transitionend',function() {
+        todo.remove();
+       })
+
+   }
+   if(item.classList[0] === 'complete-btn')
+   {  
+       const todo = item.parentElement;
+       todo.classList.toggle('completed')
+    //    todo.remove();
+   }
+
+}
+
+
+function filterTodo(e)
+{   console.log('filertodo() function called')
+    const todos = todoList.childNodes;
+    console.log('type of todos',typeof(todos))
+
+    for(let todo of todos)
+    {   
+        console.log(e.target.value,todo.style.display)
+        if(e.target.value === "all")
+        {
+            todo.style.display = 'flex';   
+        }
+        if(e.target.value === "completed")
+        {
+            if(todo.classList.contains('completed')){
+                todo.style.display = 'flex';
+              }
+              else{
+                todo.style.display = 'none';
+              }  
+        }
+
+        // switch(e.target.value){
+        //     case "all" : 
+        //       todo.style.display = 'flex';
+        //       break ;
+        //     case "completed" : 
+        //       if(todo.classList.contains('completed')){
+        //         todo.style.display = 'flex';
+        //       }
+        //       else{
+        //         todo.style.display = none;
+        //       }           
+        // }
+    }
+
+}
+function filtertodo(e) {
+    const todos = todoList.childNodes;
+    todos.forEach(function(todo) {
+      switch (e.target.value) {
+        case "all":
+          todo.style.display = "flex";
+          break;
+        case "completed":
+          if (todo.classList.contains("completed")) {
+            todo.style.display = "flex";
+          } else {
+            todo.style.display = "none";
+          }
+          break;
+        case "uncompleted":
+          if (!todo.classList.contains("completed")) {
+            todo.style.display = "flex";
+          } else {
+            todo.style.display = "none";
+          }
+          break;
+      }
+    });
+  }
+
+function saveLocalTodos(todo)
+{  // first checking if we have something there already or not ?
+  let todos;
+  if(localStorage.getItem('todos') === null)
+  {
+    todos = [];
+  }
+  else
+  {
+    todos = JSON.parse(localStorage.getItem('todos'))
+  }
+
+  todos.push(todo);
+  localStorage.setItem('todos',JSON.stringify(todos)) ;
+}
+
+// Below we will get list from local storge and add that to our list as we did up !
+function getTodos(){
+  // first checking if we have something there already or not ?
+  let todos;
+  if(localStorage.getItem('todos') === null)
+  {
+    todos = [];
+  }
+  else
+  {
+    todos = JSON.parse(localStorage.getItem('todos'))
+  }
+   todos.forEach(function(todo){
+      //  TODO div
+    const todoDiv = document.createElement('div')
+    todoDiv.classList.add("todo")
+
+    // create Li
+    const newTodo = document.createElement('li');
+    newTodo.innerText = todo                 // Cwe don't need user input instead we need our todo argument
+    newTodo.classList.add("todo-item");
+    todoDiv.appendChild(newTodo);
+
+    // No need here to save local storage ----- !!!
+
+
+    // cHECK MARK/COMPLETE BUTTON
+    const completedButton = document.createElement('button')
+    completedButton.innerHTML = '<i class = "fas fa-check"></i>'
+    completedButton.classList.add("complete-btn")
+    todoDiv.appendChild(completedButton)
+
+    // cHECK DELETE BUTTON
+        const trashButton = document.createElement('button')
+        trashButton.innerHTML = '<i class = "fas fa-trash"></i>'
+        trashButton.classList.add("trash-btn")
+        todoDiv.appendChild(trashButton)
+
+        /// Append to list
+        todoList.appendChild(todoDiv)
+
+   });
+
+}
+
+function removeLocalTodos(todo){
+    // first checking if we have something there already or not ?
+    let todos;
+    if(localStorage.getItem('todos') === null)
+    {
+      todos = [];
+    }
+    else
+    {
+      todos = JSON.parse(localStorage.getItem('todos'))
+    }
+
+    // console.log(todo.children[0].innerText);
+    const todoIndex = todo.children[0].innerText;
+    // console.log(todos.indexOf(todoIndex))
+    todos.splice(todos.indexOf(todoIndex),1) ;
+
+    localStorage.setItem('todos',JSON.stringify(todos)) ;
+}

Program's_Contributed_By_Contributors/JavaScript_Programs/To_Do_List_Vanilla_JS/index.html

@@ -0,0 +1,61 @@
+<!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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>TO Do List using VANILLA JS</title>
+  </head>
+  <body>
+    <header class = "myheader">
+      <h1>Mritunjay's TO DO List</h1>
+    </header>
+    <form class = "myflex">
+      <input type="text" class="todo-input" required/>
+      <button class="todo-button" type="submit" >
+        <i class="fas fa-plus-square"></i>
+      </button>
+      <div class="select">
+        <select name="todos" class="filter-todo">
+          <option value="all">All</option>
+          <option value="completed">Completed</option>
+          <option value="uncompleted">Uncompleted</option>
+        </select>
+      </div>
+    </form>
+
+    <div class="todo-container">
+      <ul class="todo-list"></ul>
+    </div>
+
+    <!-- <i class="fas fa-adjust"></i>  AN ICON  -->
+             <!-- 
+                     OYE !!!! ye jo 42 line par </ul> jab 43 line par thi tab bahut dikkat hui !!!
+                     KINDLY SEARCH !!!!
+                     Why ???? =====> 1.5 Hours to DEBUG !!:)
+
+               <div class = "todo">    CREATED USING JAVASCRIPT
+              <li></li>
+              <button>Delete</button>
+              <button>Checked</button>
+            </div>
+      -->
+
+
+    <script src="./app.js"></script>
+  </body>
+</html>