Intro
Are you tired of constantly forgetting important tasks and deadlines? Do you find yourself struggling to stay organized and on top of your to-do list? Well, fear not! In this blog post, we’ll be showing you how to create a powerful and user-friendly to-do list application using the versatile programming language, JavaScript.
Whether you’re a seasoned developer or just starting out, this step-by-step guide will help you create a customizable and efficient to-do list app that will revolutionize the way you manage your tasks. So grab your coding tools and let’s get started!
Recently I shared a complete blog post on How to make a quiz app using HTML, CSS, and JavaScript only if you want to make this type of Quiz app please check this article first.
Information About This Project
| Languages | HTML, CSS, JavaScript |
| Code | Available |
| Preview | Take Preview |
| Created by | Coding Pakistan |
| Download Link | Available |
Steps to create a Todo list app Using JavaScript
Step 1: Create a new HTML file and add the necessary tags (html, head, body).
Step 2: Inside the body tag, create a container element (e.g. div) to hold the to-do list.
Step 3: Inside the container element, create a form element to allow users to add new tasks to the list. Add an input field and a button to the form.
Step 4: Create a list element (ul) to hold the tasks. Give it an ID so you can reference it later in your JavaScript code.
Step 5: Create a JavaScript file and link it to your HTML file using a script tag.
Step 6: In your JavaScript file, create an array to store the tasks.
Step 7: Add an event listener to the form’s submit button. When the button is clicked, get the value of the input field and add it to the tasks array.
Step 8: Create a function to display the tasks in the list. Use JavaScript to dynamically create list items and add them to the list element in the HTML.
Step 9: Call the display function whenever a new task is added to the array.
Step 10: Add a delete button next to each task in the list. When the delete button is clicked, remove the corresponding task from the array and update the display.
Step 11: Add CSS styles according to your need to make your app look good and responsive.
Video Tutorial ToDo List App Using JavaScript
This video is created by the Wscube Tech YouTube channel please subscribe to this channel for more videos like this one.
If you want to learn more about Todo List apps please watch this video till the end. I highly recommend that you do so, as I have provided detailed explanations of each line of code through written comments and demonstrated the function of each line of code.
You Might Like This
- Notes-taking app using JavaScript
- How to create a image slider using JavaScript
- Random Paragraph generator using JavaScript
Todo List App HTML, CSS & JavaScript [Source Codes]
To create a ToDo List app using HTML CSS & JavaScript, follow the given steps line by line:
- Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
- Create a index.html file. File name must be index and its extension .html
- Create a style.css file. File name must be style and its extension .css
- Create a script.js file. File name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Password Generator by clicking on the given download button. It’s free of cost.
First, paste the following codes into your index.html file.
HTML FILE
<!DOCTYPE html> <!-- Ceated by codingpakistan.com --> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="box"> <input type="text" id="item" autofocus placeholder="Write something here..."> <ul id="to-do-box"> </ul> </div> </main> <script src="https://kit.fontawesome.com/bf520e6492.js" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>
Second, paste the following codes into your style.css file.
CSS FILE
/* Ceated by codingpakistan.com */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #3498db;
}
.box {
width: 700px;
min-height: 500px;
background-color: white;
border-radius: 5px;
padding: 15px;
}
#item {
padding: 10px;
font-size: 20px;
width: 100%;
border: 0;
outline: 0;
display: block;
font-weight: bold;
box-shadow: 0px 0px 2px grey;
}
#to-do-box {
margin-top: 20px;
list-style: none;
}
#to-do-box li {
position: relative;
background-color: #2c3e50;
color: white;
padding: 10px;
border-radius: 2px;
padding-right: 30px;
text-align: justify;
margin-top: 10px;
user-select: none;
}
#to-do-box li i {
position: absolute;
right: 10px;
top: 10px;
}
.done {
text-decoration: line-through;
color: black;
background-color: #95a5a6 !important;
}
Last, paste the following codes into your script.js file.
JavaScript FILE
const item = document.querySelector("#item")
const toDoBox = document.querySelector("#to-do-box")
// Ceated by codingpakistan.com
item.addEventListener(
"keyup",
function(event) {
if (event.key == "Enter") {
addToDo(this.value)
this.value = ""
}
}
)
const addToDo = (item) => {
const listItem = document.createElement("li");
listItem.innerHTML = `
${item}
<i class="fas fa-times"></i>
`;
listItem.addEventListener(
"click",
function() {
this.classList.toggle("done");
}
)
listItem.querySelector("i").addEventListener(
"click",
function() {
listItem.remove()
}
)
toDoBox.appendChild(listItem)
}
ToDo List App [Download Source Codes]
That’s all, now you’ve successfully created a ToDo list app using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.
