to do list javascript | html css javascript to do list

 to do list javascript | HTML css javascript to do list





to do list javascript | html css javascript to do list




Welcome🎉 to Code With Random blog in this blog we learn that how we how to create to do list javascript. We use HTML & CSS and javascript for this to do list javascript. Hope you enjoy our blog so let's start with a basic HTML structure for to do list javascript .

HTML code for to do list 

 <div id="hero" class="hero">  
  <h1 class="title">To Do List</h1>  
  <div id="todoApp" class="todo-app">  
   <div id="todoMenu1" class="todo-menu-1">  
    <button id="toggleAll" class="toggle-all" aria-label="Toggle all to do tasks">  
     <span class="rotate">&#x276F;</span>  
    </button>  
    <input id="addTodoTextInput" class="add-todo-text-input" type="text" placeholder="What do you need to do?" aria-label="Enter to do text" autofocus>  
   </div>  
   <ul id="todos" class="todos" aria-label="List of to do tasks"></ul>  
   <div id="todoMenu2" class="todo-menu-2">  
    <label id="todosLeft" class="todos-left" aria-label="Number of to do tasks left to complete"></label>  
    <div id="todoMenu2Buttons" class="todo-menu-2-buttons">  
     <button id="showAllTodos" class="menu-2-button active" aria-label="Show all to do tasks">All</button>  
     <button id="showUncompletedTodos" class="menu-2-button" aria-label="Show active to do tasks">Active</button>  
     <button id="showCompletedTodos" class="menu-2-button" aria-label="Show completed to do tasks">Completed</button>  
    </div>  
    <button id="deleteCompletedButton" class="delete-completed-button" aria-label="Clear completed to do tasks">Clear completed</button>  
   </div>  
  </div>  
 </div>  
There is all HTML code for to do list Now you can see output without CSS then we write CSS for our to do list.
to do list javascript | html css javascript to do list

CSS for to do list 

 :root {  
  --mobile-hero-app-row: 9fr;  
 }  
 html {  
  box-sizing: border-box;  
 }  
 *, *:before, *:after {  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
 }  
 body {  
  font-family: 'Roboto', sans-serif;  
 }  
 .hero {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 1fr 550px 1fr;  
  grid-template-columns: 1fr 550px 1fr;  
  -ms-grid-rows: 110px 9fr 1fr;  
  grid-template-rows: 110px 9fr 1fr;  
  background: #8967d0;  
  height: 100vh;  
  width: 100vw;  
 }  
 .title {  
  -ms-grid-column: 2;  
  grid-column: 2;  
  -ms-flex-item-align: center;  
  -ms-grid-row-align: center;  
  align-self: center;  
  -ms-grid-column-align: center;  
  justify-self: center;  
  color: #574285;  
  font-size: 50px;  
 }  
 .todo-app {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-rows: 60px 1fr 45px;  
  grid-template-rows: 60px 1fr 45px;  
  -ms-grid-column: 2;  
  grid-column: 2;  
  -ms-grid-row: 2;  
  grid-row: 2;  
  background: white;  
  overflow: auto;  
  border-radius: 7px;  
  -webkit-box-shadow:   
   0 10px 20px rgba(0, 0, 0, 0.19),  
   0 6px 6px rgba(0, 0, 0, 0.23);  
  box-shadow:   
   0 10px 20px rgba(0, 0, 0, 0.19),  
   0 6px 6px rgba(0, 0, 0, 0.23);  
  /* Because scrollbar is usually between 14-18px. */  
  margin-right: -18px;  
  margin-left: -18px;  
 }  
 .todo-menu-1 {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 50px 1fr;  
  grid-template-columns: 50px 1fr;  
  -ms-grid-rows: 60px;  
  grid-template-rows: 60px;  
  -webkit-box-align: stretch;  
  -ms-flex-align: stretch;  
  align-items: stretch;  
  -webkit-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
  border-bottom: 1px solid #e6e6e6;  
 }  
 .add-todo-text-input {  
  outline: none;  
  border: none;  
  border-bottom: 1px solid #e6e6e6;  
 }  
 ::-webkit-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
 }  
 :-ms-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
 }  
 ::-ms-input-placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
 }  
 ::placeholder {  
  color: #e6e6e6;  
  font-style: italic;  
 }  
 :-moz-placeholder, ::-moz-placeholder {  
  opacity: 1;  
 }  
 .toggle-all, .delete-button, .delete-completed-button, .menu-2-button {  
  background: none;  
  border: none;  
  outline: none;  
 }  
 .toggle-all {  
  color: #e6e6e6;  
  -ms-grid-column-align: stretch;  
  justify-self: stretch;  
  text-align: center;  
 }  
 .toggle-all-checked {  
  color: #4d4d4d;  
 }  
 .rotate {  
  display: inline-block;  
  font-size: 20px;  
  -webkit-transform: rotate(90deg);  
  -ms-transform: rotate(90deg);  
  transform: rotate(90deg);  
  /* Prevent rotate class from being clicked so that toggle-all button can be clicked instead. */  
  pointer-events: none;  
 }  
 .todo-menu-2 {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 2fr 3fr 2fr;  
  grid-template-columns: 2fr 3fr 2fr;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  color: #777;  
  background: #f4f5f6;  
  font-size: 14px;  
  font-weight: 300;  
 }  
 .todo-menu-2 .todos-left {  
  -ms-grid-column-align: start;  
  justify-self: start;  
  padding-left: 20px;  
 }  
 .todo-menu-2 .todo-menu-2-buttons {  
  -ms-grid-column-align: center;  
  justify-self: center;  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: auto auto auto;  
  grid-template-columns: auto auto auto;  
  grid-gap: 3px;  
 }  
 .todo-menu-2 .delete-completed-button, .todo-menu-2 .menu-2-button, .todo-menu-2 .todos-left {  
  font-family: inherit;  
  color: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
 }  
 .todo-menu-2 .menu-2-button {  
  padding: 2px 8px;  
  border: 1px solid rgba(137, 103, 208, 0);  
  border-radius: 3px;  
 }  
 .todo-menu-2 .menu-2-button:hover {  
  border: 1px solid rgba(137, 103, 208, 0.5);  
 }  
 .active {  
  border: 1px solid rgba(137, 103, 208, 1) !important;  
 }  
 .todo-menu-2 .delete-completed-button {  
  -ms-grid-column-align: end;  
  justify-self: end;  
  padding-right: 20px;  
 }  
 .todo-menu-2 .delete-completed-button:hover {  
  text-decoration: underline;  
 }  
 .todos {  
  display: -ms-grid;  
  display: grid;  
  grid-auto-columns: 1fr;  
  grid-auto-rows: -webkit-max-content;  
  grid-auto-rows: max-content;  
  list-style-type: none;  
  overflow: auto;  
 }  
 .todos .todo {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 50px 450px 50px;  
  grid-template-columns: 50px 450px 50px;  
  border-bottom: 1px solid #ededed;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  overflow-wrap: break-word;  
  /* word-wrap is renamed to overflow-wrap but Edge still uses word-wrap */  
  word-wrap: break-word;  
 }  
 /* checkbox centering */  
 .todos .todo .pretty {  
  -ms-grid-column-align: center;  
  justify-self: center;  
  -webkit-transform: scale(1.4);  
  -ms-transform: scale(1.4);  
  transform: scale(1.4);  
  margin: 0;  
 }  
 .pretty .state label {  
  text-indent: 0;  
 }  
 .pretty .state i {  
  -webkit-transform: rotate(-5deg);  
  -ms-transform: rotate(-5deg);  
  transform: rotate(-5deg);  
  color: #5dc2af;  
 }  
 .add-todo-text-input, .todo-text {  
  font-size: 24px;  
  color: #4d4d4d;  
 }  
 .todo-text {  
  padding-top: 13px;  
  padding-bottom: 13px;  
 }  
 .todo-text:focus {  
  outline: none;  
 }  
 .todo-checked-text {  
  color: #d9d9dd;  
  text-decoration: line-through;  
 }  
 .todo-checked-text:focus {  
  color: #4d4d4d;  
  text-decoration: none;  
 }  
 .delete-button {  
  font-size: 28px;  
  color: #df8383;  
  -ms-grid-column-align: end;  
  justify-self: end;  
  visibility: hidden;  
 }  
 .todos .todo:hover .delete-button {  
  visibility: visible;  
 }  
 .delete-button:hover {  
  color: #f14a5d;  
  cursor: pointer;  
 }  
 @media (max-width: 1024px) {  
  .hero {  
   height: var(--mobile-hero-height);  
  }  
  .delete-button {  
   color: #f14a5d;  
   -ms-grid-column-align: center;  
   justify-self: center;  
   visibility: visible;  
  }  
 }  
 @media (max-width: 680px) {  
  .hero {  
   -ms-grid-columns: 1fr 8fr 1fr;  
   grid-template-columns: 1fr 8fr 1fr;  
   -ms-grid-rows: 73px 9fr 1fr;  
   grid-template-rows: 73px 9fr 1fr;  
  }  
  .title {  
   font-size: 33px;  
  }  
  .todo-app {  
   -ms-grid-rows: 40px 1fr auto;  
   grid-template-rows: 40px 1fr auto;  
  }  
  .todo-menu-1 {  
   -ms-grid-rows: 40px;  
   grid-template-rows: 40px;  
  }  
  .add-todo-text-input, .todo-text {  
  font-size: 16px;  
  }  
  .todo-menu-2 {  
   -ms-grid-columns: 1fr 1fr;  
   grid-template-columns: 1fr 1fr;  
   grid-row-gap: 8px;  
   font-size: 12px;  
   padding: 8px 0px;  
  }  
  .todo-menu-2 .todos-left {  
   -ms-grid-column-align: center;  
   justify-self: center;  
  }  
  .todo-menu-2 .todo-menu-2-buttons {  
   grid-column: 1 / -1;  
   -ms-grid-row: 1;  
   grid-row: 1;  
  }  
  .todo-menu-2 .delete-completed-button {  
   -ms-grid-column-align: center;  
   justify-self: center;  
  }  
  .todo-menu-2 .delete-completed-button:hover {  
   text-decoration: none;  
  }  
  .todos {  
  }  
  .todos .todo {  
   -ms-grid-columns: 50px var(--mobile-todo-text-width) 50px;  
   grid-template-columns: 50px var(--mobile-todo-text-width) 50px;  
  }  
  ::-webkit-input-placeholder {  
   font-size: 16px;  
  }  
  :-ms-input-placeholder {  
   font-size: 16px;  
  }  
  ::-ms-input-placeholder {  
   font-size: 16px;  
  }  
  ::placeholder {  
   font-size: 16px;  
  }  
  .rotate {  
   font-size: 14px;  
  }  
 }  

Now we complete our CSS section,  Here is our updated output CSS.

to do list javascript | html css javascript to do list

Now add javascript for to do list!

Javascript for to do list 

 var todoList = {  
  todos: [],  
  addTodo: function(todoText) {  
   this.todos.push({  
    todoText: todoText,  
    completed: false  
   });  
  },  
  deleteTodo: function(position) {  
   this.todos.splice(position, 1);  
  },  
  deleteCompletedTodos: function() {  
   // Count backwards to avoid index problem when deleting todos.  
   for (var i = this.todos.length - 1; i >= 0; i--) {  
    if (this.todos[i].completed === true) {  
     this.deleteTodo(i);  
    }  
   }  
  },  
  updateTodo: function(newTodoText, position) {  
   this.todos[position].todoText = newTodoText;  
  },  
  toggleCompleted: function(todo) {  
   todo.completed = !todo.completed;  
  },  
  toggleAll: function() {  
   var totalTodos = this.todos.length;  
   var completedTodos = 0;  
   // Count number of completed todos.  
   this.todos.forEach(function(todo) {  
    if (todo.completed === true) {  
     completedTodos++;  
    }  
   });  
   if (completedTodos === totalTodos) {  
    todoList.todos.forEach(function(todo) {  
     todo.completed = false;  
    });  
   }  
   else {  
    todoList.todos.forEach(function(todo) {  
     todo.completed = true;  
    });  
   }  
  },  
  updateLocalStorage: function() {  
   localStorage.setItem('todos', JSON.stringify(todoList.todos));  
  },  
  getLocalStorage: function() {  
   if (localStorage.getItem('todos') !== null) {  
    todoList.todos = JSON.parse(localStorage.getItem('todos'));  
   }  
  }  
 };  
 var handlers = {  
  addTodo: function() {  
   var addTodoTextInput = document.getElementById('addTodoTextInput');  
   // Test if addTodoTextInput.value is not empty and not just whitespace before adding it as a todo.  
   if (/\S/.test(addTodoTextInput.value)) {  
    todoList.addTodo(addTodoTextInput.value);  
    addTodoTextInput.value = '';  
    view.displayTodos();  
   }  
  },  
  deleteTodo: function(position) {  
   todoList.deleteTodo(position);  
   view.displayTodos();  
  },  
  deleteCompletedTodos: function() {  
   todoList.deleteCompletedTodos();  
   view.displayTodos();  
  },  
  updateTodo: function(newTodoText, position) {  
   todoList.updateTodo(newTodoText, position);  
   todoList.updateLocalStorage();  
  },  
  toggleCompleted: function(todo) {  
   todoList.toggleCompleted(todo);  
   view.displayTodos();  
  },  
  toggleAll: function() {  
   todoList.toggleAll();  
   view.displayTodos();  
  }  
 };  
 var view = {  
  selectedFilter: 'showAllTodos',  
  filteredTodos: [],  
  displayTodos: function() {  
   var todosUl = document.getElementById('todos');  
   // Filter todos based on selectedFilter.  
   view.filterTodos();  
   // Empty the list before updating it.  
   todosUl.innerHTML = '';  
   // Create todo elements from todoList.todos and display them.  
   view.filteredTodos.forEach(function(todo, position) {  
    var todoLi = document.createElement('li');  
    var checkbox = this.createCheckbox(todo);  
    var todoLabel = this.createTodoLabel(todo);  
    var deleteButton = this.createDeleteButton();  
    todoLi.className = 'todo';  
    todoLi.appendChild(checkbox);  
    todoLi.appendChild(todoLabel);  
    todoLi.appendChild(deleteButton);  
    todosUl.appendChild(todoLi);  
    // If todo is completed, set checkbox to true and give the li its 'checked' class.  
    if (todo.completed === true) {  
     checkbox.querySelector('input').checked = true;  
     todoLabel.classList.add('todo-checked-text');  
    }  
    todo.elementReference = todoLi;  
   }, this);  
   this.checkTodosCompletion();  
   todoList.updateLocalStorage();  
  },  
  filterTodos: function() {  
   switch(view.selectedFilter) {  
    case 'showAllTodos':  
     view.filteredTodos = todoList.todos;  
     break;  
    case 'showUncompletedTodos':  
     view.filteredTodos = todoList.todos.filter(function(todo) {  
      return todo.completed == false;  
     });  
     break;  
    case 'showCompletedTodos':  
     view.filteredTodos = todoList.todos.filter(function(todo) {  
      return todo.completed == true;  
     });  
     break;  
   }  
  },  
  createCheckbox: function() {  
   // for pretty-checkbox.css  
   var checkboxMain = document.createElement('div');  
   var checkbox = document.createElement('input');  
   var checkboxState = document.createElement('div');  
   var checkboxIcon = document.createElement('i');  
   var checkboxLabel = document.createElement('label');  
   checkboxMain.className = 'pretty p-icon p-round';  
   checkboxState.className = 'state';  
   checkboxIcon.className = 'icon mdi mdi-check mdi-18px';  
   checkbox.type = 'checkbox';  
   checkbox.className = 'checkbox';  
   checkboxState.appendChild(checkboxIcon);  
   checkboxState.appendChild(checkboxLabel);  
   checkboxMain.appendChild(checkbox);  
   checkboxMain.appendChild(checkboxState);  
   return checkboxMain;  
  },  
  createTodoLabel: function(todo) {  
   var todoLabel = document.createElement('label');  
   todoLabel.textContent = todo.todoText;  
   todoLabel.className = 'todo-text';  
   todoLabel.contentEditable = true;  
   return todoLabel;  
  },  
  createDeleteButton: function() {  
   var deleteButton = document.createElement('button');  
   deleteButton.textContent = '×';  
   deleteButton.className = 'delete-button';  
   return deleteButton;  
  },  
  checkTodosCompletion: function() {  
   var totalTodos = todoList.todos.length;  
   var completedTodos = 0;  
   var toggleAllButton = document.getElementById('toggleAll');  
   var deleteCompletedButton = document.getElementById('deleteCompletedButton');  
   var todosLeftLabel = document.getElementById('todosLeft');  
   todoList.todos.forEach(function(todo) {  
    if (todo.completed === true) {  
     completedTodos++;  
    }  
   });  
   var uncompletedTodos = totalTodos - completedTodos;  
   // If all todos are completed, add 'toggle-all-checked' class to toggleAll button.  
   if (completedTodos === totalTodos && totalTodos > 0) {  
    toggleAllButton.classList.add('toggle-all-checked');  
   }  
   else {  
    toggleAllButton.classList.remove('toggle-all-checked');  
   }  
   // If at least one todo is completed, show Clear completed button, otherwise don't display it.  
   switch(completedTodos) {  
    case 0:  
     deleteCompletedButton.style.display = 'none';  
     break;  
    default:  
     deleteCompletedButton.style.display = 'initial';  
     break;  
   }  
   // Update todosLeft label with the number of uncompleted todos.  
   switch(uncompletedTodos) {  
    case 0:  
     todosLeftLabel.textContent = '';  
     break;  
    default:  
     todosLeftLabel.textContent = "Todos left: " + uncompletedTodos;  
   }  
  },  
  // Find the todo's element reference inside the todos array which matches argument element and then return it's index.  
  getTodoElementIndex: function(todoElement) {  
   var todo = todoList.todos.find(function(todo) {  
    return todo.elementReference == todoElement;  
   });  
   return todoList.todos.indexOf(todo);  
  },  
  // If device width is 680px or smaller, make todo text field equal to app width - 100px (for checkbox and delete button) so that extra text goes in a new line instead of increasing the todo's width and making it overflow horizontally.  
  resizeTodos: function() {  
   if (window.matchMedia('(max-device-width: 680px)').matches) {  
    var hero = document.getElementById('hero');  
    var todoAppWidth = document.getElementById('todoApp').offsetWidth;  
    var todoTextWidth = todoAppWidth - 100 + 'px';  
    hero.style.setProperty('--mobile-todo-text-width', todoTextWidth);  
   }  
  },  
  // For mobile devices, set hero height to mobile viewport height instead of using 100vh for height (because when using mobile keyboard, it's not included in the 100vh).  
  setMobileHeroRows: function() {  
   var hero = document.getElementById('hero');  
   var windowHeight = window.innerHeight + 'px';  
   hero.style.setProperty('--mobile-hero-height', windowHeight);  
  },  
  setUpEventListeners: function() {  
   var addTodoTextInput = document.getElementById('addTodoTextInput');  
   var todoMenu1 = document.getElementById('todoMenu1');  
   var todosUl = document.getElementById('todos');  
   var todoMenu2 = document.getElementById('todoMenu2');  
   window.addEventListener('resize', function() {  
    // If screen width is 680px or less, run resizeTodos function.  
    // The problem with this if statement is that Apple devices report screen width in dips while Android devices report it in physical pixels (which are being used here).  
    // Correct if statement to cover both Apple and Android devices:  
    if (window.matchMedia('(max-device-width: 680px)').matches) {  
     view.resizeTodos();  
    }  
   });  
   todoMenu1.addEventListener('click', function(event) {  
    var elementClicked = event.target;  
    if (elementClicked.id === 'toggleAll') {  
     handlers.toggleAll();  
    }  
   });  
   // Run addTodo function when 'Enter' is pressed inside addTodoTextInput   
   addTodoTextInput.addEventListener('keyup', function(event) {  
    if (event.key === 'Enter') {  
     handlers.addTodo();  
    }  
   });  
   todosUl.addEventListener('click', function(event) {  
    // Get the element that was clicked.  
    var elementClicked = event.target;  
    // Check if elementClicked is a delete button.  
    if (elementClicked.classList.contains('delete-button')) {  
     // Get index using getTodoElementIndex function.  
     var indexOfTodoElement = view.getTodoElementIndex(elementClicked.parentNode);  
     handlers.deleteTodo(indexOfTodoElement);  
    }  
    // Check if elementClicked is a checkbox.  
    else if (elementClicked.classList.contains('checkbox')) {  
     // Get index using getTodoElementIndex function.  
     var indexOfTodoElement = view.getTodoElementIndex(elementClicked.parentNode.parentNode);  
     handlers.toggleCompleted(todoList.todos[indexOfTodoElement]);  
    }  
   });  
   // Make todos lose focus on Enter.  
   todosUl.addEventListener('keypress', function(event) {  
    var elementClicked = event.target;  
    if (event.key === 'Enter') {  
     elementClicked.blur();  
    }  
   });  
   // When todo li loses focus, make todoList.todos.todo.todoText equal to the value of todo li.  
   todosUl.addEventListener('focusout', function(event) {  
    var elementClicked = event.target;  
    if (elementClicked.classList.contains('todo-text')) {  
     var indexOfTodoElement = view.getTodoElementIndex(elementClicked.parentNode);  
     handlers.updateTodo(elementClicked.textContent, indexOfTodoElement);  
    }  
   });  
   todosUl.addEventListener('paste', function(event) {  
    // Prevent paste.  
    event.preventDefault();  
    // Get text from clipboard.  
    var text = event.clipboardData.getData('text/plain');  
    // Insert text.  
    document.execCommand('insertHTML', false, text);  
   });  
   todoMenu2.addEventListener('click', function(event) {  
    var elementClicked = event.target;  
    if (elementClicked.id === 'deleteCompletedButton') {  
     handlers.deleteCompletedTodos();  
    }  
    // If the clicked element is a menu 2 button, add 'active' class to it and remove it from any other active button.  
    else if (elementClicked.classList.contains('menu-2-button')) {  
     var menu2ButtonElements = document.querySelectorAll('.menu-2-button');  
     menu2ButtonElements.forEach(function(button) {  
      button.classList.remove('active');  
     });  
     elementClicked.classList.add('active');  
     view.selectedFilter = elementClicked.id;  
     view.displayTodos();  
    }  
   });  
  }  
 };  
 view.setUpEventListeners();  
 todoList.getLocalStorage();  
 view.setMobileHeroRows();  
 view.displayTodos();  
 view.resizeTodos();  
Now we complete our javascript section,  Here is our updated output with javascriptHope you like to do list javascript you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
to do list javascript | html css javascript to do list

to do list javascript | html css javascript to do list

to do list javascript | html css javascript to do list



In this post, we learn how to create a to do list javascript  using  with simple coding of HTML & CSS and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post