Introduction of the Project
Through this JavaScript tutorial, we will teach you how to create a To-Do List using JavaScript. Creating a to-do list with JavaScript is a great way to improve your web development skills and add useful features to your website or web application. Not only can you keep track of your daily tasks and goals, but you can also add interactive features such as checkboxes and buttons to mark items as complete or delete them.
While creating this JavaScript project, you will learn how to use JavaScript to add new items to the list, how to mark items as complete, and how to use local storage to save the list so it persists even when the page is refreshed. By the end of this tutorial, you will have a solid understanding of how to create a functional and visually appealing to-do list using JavaScript. We will walk you through the process of building a dynamic to-do list using JavaScript, HTML, and CSS. To make the project more interesting, we will implement some GUI using HTML and CSS and a method ‘append’ of the Jquery framework that adds the HTML at runtime on pressing the ENTER key.
Objectives
Creating a To-Do List using JavaScript has the following objectives:
- To create a user interface involving some graphics using HTML & CSS.
- To extract the user’s data, add it at the end of the list and display it on the web page using JavaScript.
- To improve personal organization and productivity by creating a tool for keeping track of tasks and goals.
- To prioritize and plan daily activities more effectively.
- To reduce stress and anxiety by breaking down large tasks into manageable chunks.
Requirements
1. Basic knowledge of HTML and CSS for creating the layout and styling of the to-do list.
2. A good understanding of JavaScript and its core concepts, such as variables, functions, loops, and events.
3. A text editor or development environment for writing and testing the code.
4. A web browser for running and testing the to-do list.
5. Familiarity with the Document Object Model (DOM) and how to manipulate it using JavaScript.
6. Knowledge of local storage and how to use it to save data in the browser.
7. Understanding of how to use event listeners in JavaScript to respond to user interactions.
8. Familiarity with JavaScript libraries or frameworks like jQuery or React may be useful but not necessary.
9. Familiarity with web development principles and best practices such as accessibility, responsive design, and cross-browser compatibility.
10. Familiarity with version control systems like git would be helpful for managing the code version and collaborating with other team members.
Source Code
HTML Code
<!DOCTYPE html> <html> <head> <title>Todo List</title> <link rel="stylesheet" type="text/css" href="assets/css/index.css"> <link href="https://fonts.googleapis.com/css2?display=swap&family=Roboto:wght@500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <div id="container"> <h1>to-do List<i class="fa fa-plus" aria-hidden="true"></i></h1> <input type="text" placeholder="Add New Todo"> <ul> <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Attend Physics Class</li> <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Attend Maths Class</li> <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Attend Chemistry Class</li> <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Attend CS Class</li> </ul> </div> <script type="text/javascript" src="assets/js/index.js"></script> </body> </html>
CSS Code
body {
font-family: Roboto;
background: #16A085; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #F4D03F, #16A085); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F4D03F, #16A085); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);*/
}
#container {
width: 360px;
margin: 100px auto;
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: grey;
text-decoration: line-through;
}
.fa-plus {
float: right;
}
h1 {
text-transform: uppercase;
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
}
li:hover span {
width: 40px;
transition: 0.2s linear;
opacity: 1.0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #f7f7f7;
}
input {
background-color: #f7f7f7;
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}JAVASCRIPT Code
//Check Off Specific Todos By Clicking
$("ul").on("click","li",function(){
$(this).toggleClass("completed");
}
)
//Click on 'X' to Delete Todo
$("ul").on("click","span",function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
})
$("input[type='text']").keypress(function(event){
if(event.which === 13){
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todoText + "</li>");
}
});
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});Explanation of the Code
The code can be broken down into three sections. The HTML & CSS involves creating the GUI and styling it, and the other is taking the user’s input and adding it to the list.
1. Create an HTML file with an <ul> element to hold the list items and a form with an input field and a submit button to add new items to the list.
1. It consists of multiple <li> tags to denote the list items.
2. The CSS file is meant for styling the HTML, providing the container with appropriate margins, padding, font color, and font size.
Moving to the data extraction process, we will apply the following:
1. It uses an append function of Jquery that adds the user’s data to the list.
2. It uses the ‘remove’ function and ‘fadeToggle’ function to remove items & to fade the input field respectively.
3. Finally, you can use local storage to store the to-do list so that it persists even when the page is refreshed.
Output
The main interface of the To-Do list using JavaScript will look like this:
Conclusion
We have successfully created a to-do list using JavaScript. It takes the user inputs and adds them to a list. It is a very convenient way to manage a to-do list which can be used for various purposes like shopping, keeping tabs on daily chores, etc.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments