“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
🌊 author’s home page: Hai Yong🌊 Author profile: 🏆CSDN full stack quality creator, 🥇HDZ core group member 🌊 Fan benefits: fans send six books every week and various small gifts from time to time
In this article, you’ll learn how to create to-do lists using JavaScript. Todo List JavaScript is a great project to help beginners increase their knowledge of JavaScript.
This type of JavaScript Todo List is primarily used to organize any information you have. Here, you can create a list of a lot of text to execute later. When you’re done, you can delete them. It’s basically a day job.
JavaScript to-do list
Here I present complete information and a tutorial on how to create to-do list HTML using JavaScript. I designed it with HTML and CSS. With the help of JavaScript.
First I created an input space here. You can enter any text here. There is then an “Add” button, which you can click to find in the list. Next to each task or routine is a delete button that deletes text if clicked.
How do I make a JavaScript to-do list
Below I shared a complete tutorial on how to create this to-do list HTML. This is why you must have a basic understanding of JavaScript. First I designed a web page, then I made a box. Then I created a place to use HTML input.
The following demo will help you understand how this to-do list JavaScript works.
Site: Haiyong-site /todolist
Now you create an HTML and CSS file. Then follow the complete information and tutorial step by step below.
Step 1: Basic structure of the project
I created a box on the web page using the following HTML and CSS code. This is basically the basic structure of a Todo List.
<div class="container">
</div>
Copy the codeUsing the CSS below, I first added blue to the background color of the page. For this box I used a minimum width of 450 pixels and a minimum height of 100px.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: #066acd;
}
.container{
width: 40%;
min-width: 450px;
position: absolute;
min-height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: white;
border-radius: 10px;
}
Copy the code
Step 2: Create an input location using HTML
I created a space for input using the following HTML. With this, I created a button to help with typing. The input space is 75% wide and 45 pixels high.
<div id="newtask">
<input type="text" placeholder="Mission to be accomplished...">
<button id="push">add</button>
</div>
Copy the codeThe CSS code is as follows:
#newtask{
position: relative;
padding: 30px 20px;
}
#newtask input{
width: 75%;
height: 45px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: # 111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#newtask input:focus{
outline: none;
border-color: #0d75ec;
}
Copy the codeI designed the button using the following CSS. Use buttons 20% width and 45 px height. I used blue for the background color and white for the text color.
#newtask button{
position: relative;
float: right;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #0d75ec;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
}
Copy the code
Step 3: Make a list to view the Todo text
I also created a to-do list view using the HTML and CSS code below. All the information in this list can be found step by step. Because there is no fixed amount of information in this list, the height is not specified here.
<div id="tasks"></div>
Copy the code#tasks{
background-color: #ffffff;
padding: 30px 20px;
margin-top: 10px;
border-radius: 10px;
width: 100%;
position: relative;
}
.task{
background-color: #c5e1e6;
height: 50px;
margin-bottom: 8px;
padding: 5px 10px;
display: flex;
border-radius: 5px;
align-items: center;
justify-content: space-between;
border: 1px solid # 939697;
cursor: pointer;
}
.task span{
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 400;
}
Copy the codeI have now designed the cancel button in the list.
You might think that I’m not using any tags for buttons here, that I’m not using HTML. So how do I see the button?
In fact, I added all the information for the button with the help of JavaScript. For now I’m just designing it, and I’ll implement it later with the help of JavaScript.
.task button{
background-color: #0a2ea4;
color: #ffffff;
height: 100%;
width: 40px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
Copy the code
Step 4: Activate the to-do list using JavaScript
Above we designed the Todo List using HTML and CSS. The most important thing now is to make it work with the help of JavaScript. To understand the JavaScript structure, you must have a basic understanding of JavaScript.
I’m going to put the whole code together and then I’m going to explain it step by step. If you don’t understand the code below, you might notice the explanation below.
document.querySelector('#push').onclick = function(){
if(document.querySelector('#newtask input').value.length == 0){
alert("Please enter the task")}else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
The ${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
var current_tasks = document.querySelectorAll(".delete");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove(); }}}}Copy the codeJavaScript to explain
First, I gave the “if” condition. If there’s nothing input here, zero input, then you’ll see an alert. This error message will ask you to enter something.
if(document.querySelector('#newtask input').value.length == 0){
alert("Please enter the task")}Copy the code➤ Now I’ve added the following condition using else, which means what happens if you add some information.
➤ First I use internal HTML, which helps to view this information on a web page.
➤ Then I said display the input text in an ID called “TaskName”. I have added the required CSS code for “TaskName”.
➤ I then created a delete button, which helps remove the information in the list. To do this, I’ve added an icon here. I have added the required CSS code for this button.
else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
The ${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
Copy the codeI have now made arrangements for the delete button to work. If you watch the demo, you’ll see that I added a delete button to each list.
This button will help delete the information. Below are instructions for deleting information using a simple “onclick”.
var current_tasks = document.querySelectorAll(".delete");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove(); }}Copy the codeHopefully you understand the JavaScript structure above.
Simple to-do lists in JavaScript [code]
If you are having trouble copying the above code, you can create this project by using JavaScript Todo List
There are many beginners who can’t put all this code together. For them, I’ve put all the code together. Concern public number [sea] reply [todolist] to obtain the source code.
Hopefully, you’ve learned how to create to-do lists using JavaScript.
The author is determined to build a fishing site with 100 small games/tools, update progress: 42/100
I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my post on how to make to-do lists using JavaScript. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊
💌 welcomes your comments and suggestions in the comments section! 💌