In this post, I am going to share Source Code for JavaScript To-Do List App! This simple and effective web application allows you to manage your tasks effortlessly. The clean and intuitive design enhances user experience, making task organization a breeze.
Key Features:
Input Field: Easily add your tasks by typing them into the input field provided.
Add Note Button: Click the “Add Note” button to append your task to the To-Do List.
Dynamic List: The To-Do List dynamically updates, displaying your tasks in an ordered list format.
How to Use:
Start by typing your task in the “Write Note” input field.
Click the “Add Note” button to add the task to your To-Do List.
Additional Information:
The application is built using HTML for structure, CSS for styling, and JavaScript for dynamic functionality.
It utilizes Font Awesome icons for an aesthetically pleasing design.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>To-Do App</title>
</head>
<body>
<div class="container">
<div>
<h3>JavaScript To-DO List App</h3>
</div>
<div class="section-one">
<input type="text" placeholder="Write Note" name="" id="userInput">
<button id="addNote">Add Note</button>
</div>
<div class="section-two">
<ol type="1" id="list"></ol>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>CSS Code:
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial;
background: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
display: flex;
flex-direction: column;
background: #fff;
justify-content: flex-start;
height: 80vh;
width: 500px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 5px #292929;
}
.section-one{
display: flex;
background-color: deepskyblue;
padding: 20px;
border-radius: 5px;
border: 1px solid skyblue;
}
.section-one input{
padding: 10px;
font-size: 14px;
width: 80%;
}
.section-one button{
padding: 10px;
width: 20%;
cursor: pointer;
}
.section-two{
margin-top: 20px;
}
.container h3{
text-align: center;
padding: 10px;
color: crimson;
text-transform: capitalize;
}
.section-two{
display: flex;
padding: 20px;
border-radius: 5px;
border: 1px solid deepskyblue;
height: 400px;
overflow: scroll;
}
#list{
position: relative;
width: 100%;
padding: 20px;
}
#list li{
padding: 10px 0 10px 0;
border-bottom: 1px solid;
}
.removebtn{
position: absolute;
right: 20px;
padding: 2px 8px 3px 8px;
background-color: crimson;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}JavaScript Code:
let btn=document.querySelector("#addNote");
btn.addEventListener('click',addNote);
function addNote(){
let note=document.querySelector("#userInput").value;
if(note.trim()==""){
alert("Field is required");
return false;
}
let li=document.createElement('li');
li.innerHTML=`${note}<button onclick='deleteLi(this)'
class='removebtn'><i class="fa fa-trash-o" aria-hidden="true"></i>
Remove</button>`;
let ol=document.querySelector("#list");
ol.appendChild(li);
document.querySelector("#userInput").value="";
}
function deleteLi(button){
let li=button.parentElement;
li.remove();
}Download Link:
Getting Started:
Clone or download the provided code.
Open the HTML file in your preferred web browser.
Begin adding and managing your tasks seamlessly.
This To-Do List App is a great starting point for those looking to understand the basics of web development and JavaScript functionality. Feel free to customize and expand upon it to suit your specific needs.
