To Do Application
What is To Do List?
ToDoList is a type of software which is used for managing your productive workflow.It is also called "Getting things done" (GTD), scheduling and collaboration.
About My To Do Application
So as you can read the above intro of ToDO-Application, I build this with very easy way and you can also try this for enhance or revise your JavaScript concepts. The code is simple and easy to understand, if you are new to JavaScript and web development then this tutorial is for you.I tried my best to design it for user friendly and keep it simple.Here is some screen shots of my To Do Application.
To Do List Design
- Input Field
- Buttons
Input Field:
Input Field is a place where you can enter your To Do items.
Buttons:
I added two buttons mainly 'Add' & 'Delete' . Add button add the items in a list where as Delete button delete items from the list.
Here is some added items screen shot of ToDo list
Live Demo of To Do List
To Do List Coding
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>TODO List</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
<link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</head>
<body>
<h1><span class="title">Todo</span>List</h1>
<div class="inputDiv">
<input type="text" class="input" placeholder="What Do You Want to Do...">
<button class="add"><i class="fas fa-plus"></i></button> <button onclick="deletAll()" class="add"><i class="fas fa-trash"></i></button>
</div>
<div class="container">
</div>
<script src='app.js'></script>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100%;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
}
h1 {
color: rgba(235, 61, 61, 0.945);
font-size: 3rem;
font-weight: 50;
text-align: center;
margin: 1rem 0 3rem;
font-family: 'Hind', sans-serif;
}
.title{
color: rgb(32, 32, 32);
text-transform: uppercase;
font-weight: 800;
}
.inputDiv{
display: flex;
justify-content: center;
align-items: center;
}
.input{
padding: 0.5rem 1rem;
outline: none;
border: 2px solid black;
height: 50px;
border-radius: 25px;
width: 360px;
margin: 0.25rem;
transition: .5s;
font-size: 1.15rem;
}
.add{
outline: none;
border: none;
height: 50px;
border-radius: 25px;
width: 50px;
background-color: rgb(15, 15, 15);
color: white;
cursor: pointer;
transition: .5s;
margin: 0.25rem;
}
.add:hover{
background-color: rgb(226, 33, 33);
opacity: 0.7;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 2rem;
}
.item{
padding: 0.5rem;
border-bottom: 4px solid rgb(26, 25, 25);
margin-bottom: 1.5rem;
}
.item_input{
background: none;
outline: none;
border: none;
color: rgb(20, 20, 20);
font-size: 1.4rem;
width: 245px;
}
.edit{
background: none;
outline: none;
border: none;
color: rgb(20, 20, 20);
font-size: 1.4rem;
font-family: 'Hind', sans-serif;
margin: 0 0.5rem;
cursor: pointer;
}
.remove{
background: none;
outline: none;
border: none;
color: rgba(238, 0, 0, 0.644);
font-size: 1.4rem;
font-family: 'Hind', sans-serif;
cursor: pointer;
}
.trash{
outline: none;
list-style: none;
height: 35px;
border-radius: 24px;
width: 60px;
color: rgba(238, 0, 0, 0.644);
background-color: rgb(34, 34, 34);
color: white;
cursor: pointer;
transition: .5s;
margin: 0.25rem;
}
App.js
const container = document.querySelector('.container');
var inputValue = document.querySelector('.input');
const add = document.querySelector('.add');
if(window.localStorage.getItem("todos") == undefined){
var todos = [];
window.localStorage.setItem("todos", JSON.stringify(todos));
}
var todosEX = window.localStorage.getItem("todos");
var todos = JSON.parse(todosEX);
class item{
constructor(name){
this.createItem(name);
}
createItem(name){
var itemBox = document.createElement('div');
itemBox.classList.add('item');
var input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.value = name;
input.classList.add('item_input');
var edit = document.createElement('button');
edit.classList.add('edit');
edit.innerHTML = "EDIT";
edit.addEventListener('click', () => this.edit(input, name));
var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = "REMOVE";
remove.addEventListener('click', () => this.remove(itemBox, name));
container.appendChild(itemBox);
itemBox.appendChild(input);
itemBox.appendChild(edit);
itemBox.appendChild(remove);
}
edit(input, name){
if(input.disabled == true){
input.disabled = !input.disabled;
}
else{
input.disabled = !input.disabled;
let indexof = todos.indexOf(name);
todos[indexof] = input.value;
window.localStorage.setItem("todos", JSON.stringify(todos));
}
}
remove(itemBox, name){
itemBox.parentNode.removeChild(itemBox);
let index = todos.indexOf(name);
todos.splice(index, 1);
window.localStorage.setItem("todos", JSON.stringify(todos));
}
}
add.addEventListener('click', check);
window.addEventListener('keydown', (e) => {
if(e.which == 13){
check();
}
})
function check(){
if(inputValue.value != ""){
new item(inputValue.value);
todos.push(inputValue.value);
window.localStorage.setItem("todos", JSON.stringify(todos));
inputValue.value = "";
}
}
function deletAll(){
container.innerHTML="";
}
Comments
Post a Comment