<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ToDo List</title>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/d6c02b92d4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<header>
<h1>Rutuja's Todo List</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-btn" type="submit"><i class="fa fa-plus-square"></i></button>
<div class="select">
<select class="filter-todo" name="todos">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todoList"></ul>
</div>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
padding: 1rem;
background:linear-gradient(20deg, #f9ca1e, #ff8822);
font-family: 'Shadows Into Light', cursive;
color: #ffffff;
font-size: x-large;
}
header{
font-size: 1.5rem;
text-align: center;
}
header, form{
min-height: 20vh;
display: grid;
grid-template-columns: repeat(2,auto);
}
.todo-btn{
display: block;
}
form input, form button, .filter-todo{
padding:0.5rem;
border:none;
font-size: 1rem;
background: white;
}
form button{
color: #fb2e00;
background: white;
cursor: pointer;
transition:all 0.3s ease;
}
form button:hover{
background:#fb2e00;
color:white;
}
.todo-container{
display: flex;
justify-content: center;
align-items: center;
}
.todoList{
min-width: 70%;
list-style: none;
}
.todoDiv{
margin: 0.5rem;
background: white;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.todoDiv li{
flex:1;
padding: 0 1rem;
}
.trash-btn, .check-btn{
background-color: green;
color: white;
border:none;
padding:1rem;
cursor: pointer;
font-size: 1rem;
}
.trash-btn{
background-color: red;
}
.fa-check, .fa-trash{
pointer-events: none;
}
.completed{
text-decoration: line-through;
opacity: 0.5;
}
.fall{
transform: translateY(8rem) rotateZ(20deg);
opacity: 0;
}
.filter-todo{
margin: 1rem;
cursor: pointer;
}
@media all and (min-width:600px) {
header,form{
display: flex;
justify-content:center;
align-items: center;
}
.todoList{
min-width: 30%;
}
}
//selectors
const input= document.querySelector(".todo-input");
const todoButton= document.querySelector(".todo-btn");
const todoList=document.querySelector(".todoList");
const selectOption = document.querySelector(".filter-todo");
//event listeners
document.addEventListener('DOMContentLoaded',getTodos);
todoButton.addEventListener('click', additem);
todoList.addEventListener('click',deleteCheck);
selectOption.addEventListener('click',filterList);
//functions
function additem(event){
//to prevent submit action
event.preventDefault();
const todoDiv = document.createElement('div');
todoDiv.classList.add('todoDiv');
const todoitem=document.createElement('li');
todoitem.innerText=input.value;
todoitem.classList.add("todoitem")
const checked = document.createElement('button');
checked.innerHTML='<i class="fa fa-check"></i>';
checked.classList.add('check-btn');
const trash = document.createElement('button');
trash.innerHTML='<i class="fa fa-trash"></i>';
trash.classList.add('trash-btn');
todoDiv.appendChild(todoitem);
todoDiv.appendChild(checked);
todoDiv.appendChild(trash);
todoList.appendChild(todoDiv);
//Save to local storage
saveLocalTodos(input.value);
//clear the input
input.value="";
}
function deleteCheck(e){
const item=e.target;
//Delete item
if(item.classList[0]==='trash-btn'){
const todo=item.parentElement;
//Animation
todo.classList.add('fall');
removeLocaltodo(todo);
todo.addEventListener('transitionend',function(){
todo.remove();
});
}
else if(item.classList[0]==='check-btn'){
const todo=item.parentElement;
todo.classList.toggle('completed');
}
}
function filterList(e){
const todos=todoList.childNodes;
todos.forEach(function(todo){
let c=e.target.value;
switch (c) {
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="none";
}
else{
todo.style.display="flex";
}
break;
}
})
}
function saveLocalTodos(todo){
// console.log("in local storage");
let todos;
//check if localStorage already has todos
if(localStorage.getItem('todos')===null){
todos=[];
}else {
todos=JSON.parse(localStorage.getItem('todos'));
}
todos.push(todo);
localStorage.setItem("todos",JSON.stringify(todos));
}
function getTodos(){
let todos;
if(localStorage.getItem('todos')===null){
todos=[];
}else {
todos=JSON.parse(localStorage.getItem('todos'));
}
todos.forEach(function(todo){
const todoDiv = document.createElement('div');
todoDiv.classList.add('todoDiv');
const todoitem=document.createElement('li');
todoitem.innerText=todo;
todoitem.classList.add("todoitem")
const checked = document.createElement('button');
checked.innerHTML='<i class="fa fa-check"></i>';
checked.classList.add('check-btn');
const trash = document.createElement('button');
trash.innerHTML='<i class="fa fa-trash"></i>';
trash.classList.add('trash-btn');
todoDiv.appendChild(todoitem);
todoDiv.appendChild(checked);
todoDiv.appendChild(trash);
todoList.appendChild(todoDiv);
})
}
function removeLocaltodo(todo){
let todos;
//check if localStorage already has todos
if(localStorage.getItem('todos')===null){
todos=[];
}else {
todos=JSON.parse(localStorage.getItem('todos'));
}
const indexEle=todo.children[0].innerText;
todos.splice(todos.indexOf(indexEle),1);
localStorage.setItem("todos",JSON.stringify(todos));
}
Comments
Post a Comment