Create Todo List Template Using HTML, CSS & JavaScript

Welcome To Code With Random Blog. In This Blog, We Create A Todo List Template Using Html, Css, and JavaScript. In Todo List We can Create ToDo and Delete it. We learn How To Store, read, update, and delete todo.

In this article, we present a Create Todo List Template Using HTML, CSS & JavaScript with complete source code for you so you can copy and paste it into your project.

I Hope You Enjoy Our Blog Let's Start With A Basic Html Structure For The Todo List Template Project.

HTML Code For Todo List Template

<body>
<div id="app">
<h1>to do list</h1>
<ul>
</ul>
<input type="text" placeholder="New task">
<button class='btn_add'>Add</button>
<p>Insert a new task</p>
</div>
</body>

We will include the framework for our to-do list inside of our HTML document. We will first establish the container for our to-do list using the div tag with the id "app," and then we will add a heading to our Todo app using the h1 element.

Then, with the aid of the unordered list, we will build the user input for adding the work that they must do, and inside of it, using the input tag with type "text," we will make the button tag for adding the task. We will use the p element to enter a new task and use it to produce a little display alert.

There is all the HTML code for the Todo List Template Project. Now you can see output without CSS and JavaScript. This is only the HTML coding output for the Todo List template project. Then we write CSS And JavaScript for the Todo list template project code.

CSS Code Todo List Template Project

 @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap");
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
user-select: none;
}
html,
body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f5f5f5;
font-family: "Lato", sans-serif;
}
#app {
width: 50%;
min-width: 400px;
}
h1 {
font-family: "Dancing Script", cursive;
text-align: center;
margin-bottom: 50px;
font-size: 45px;
color: #335c62;
font-weight: 700;
}
p {
font-family: "Dancing Script", cursive;
text-align: center;
margin-top: 30px;
font-size: 30px;
color: #5c5c5c;
font-weight: 300;
}
ul {
font-family: "Lato", sans-serif;
font-size: 20px;
font-weight: 400;
font-style: italic;
margin: 50px;
}
ul li {
margin-bottom: 10px;
color: #5c5c5c;
}
ul li a {
margin-left: 15px;
color: white;
cursor: pointer;
border: 1px solid #7cbe7b;
border-radius: 5px;
padding: 0 15px 2px 15px;
background-color: #7cbe7b;
}
ul li a:hover {
opacity: 0.8;
}
input,
button {
font: 400 20px "Lato", sans-serif;
}
input {
width: 60%;
height: 40px;
color: #5c5c5c;
border: 1px solid #dcdce6;
border-radius: 8px;
padding: 0 24px;
margin-right: 10px;
}
.btn_add {
width: 30%;
height: 40px;
border: 1px solid #dcdce6;
border-radius: 8px;
background-color: #59a2ad;
color: #fff;
cursor: pointer;
}
.btn_add:hover {
opacity: 0.9;
}

Step1: The new Google typeface "Dancing" will be used in our to-do list, so first we'll import it via the Google import link.

We will set the padding, margin, and outline to "zero" using the universal selector. We will set the box-sizing property to "border-box" using the box-sizing property. Our to-do app also now has seamless scrolling.

@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap");
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

Step2: Now that the display of the body is set to "flex," we will align the items to the "centre," set the background colour to "white," and set the width and height of the element to "100%" using the body selector. We will also set the decoration to "none" and the colour to "browser-inherited" using the element tag selector (a). We will set the font to be "Lato" by using the font-family attribute.

html,
body {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f5f5f5;
    font-family: "Lato", sans-serif;
}

Javascript Code Todo List Template Project

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");
var todos = JSON.parse(localStorage.getItem("list_todos")) || [];
function renderTodos() {
listElement.innerHTML = "";
for (todo of todos) {
var todoElement = document.createElement("li");
var todoText = document.createTextNode(todo);
var linkElement = document.createElement("a");
linkElement.setAttribute("href", "#");
var pos = todos.indexOf(todo);
linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")");
var linkText = document.createTextNode("done");
linkElement.appendChild(linkText);
todoElement.appendChild(todoText);
todoElement.appendChild(linkElement);
listElement.appendChild(todoElement);
}
}
renderTodos();
function addTodo() {
var todoText = inputElement.value;
todos.push(todoText);
inputElement.value = "";
renderTodos();
saveToStorage();
}
buttonElement.onclick = addTodo;
function deleteTodo(pos) {
todos.splice(pos, 1);
renderTodos();
saveToStorage();
}
function saveToStorage() {
localStorage.setItem("list_todos", JSON.stringify(todos));
}

A list element and an input element are first created by the code. The onclick attribute of the button element is then set to addTodo, which causes it to invoke the function when clicked.

The function renderTodos() goes through every item in the todos array, creating a new li item for each one, setting its href property to "#," adding a linkText node that says "done" at the end of it, and appending it to the listElement.

The programme tries to build a list of tasks for the app.

The list of tasks will be iterated over by the code, and each task will be added to an element with the id "listElement."

Now that we have completed our javascript section For Create Todo List Template. our updated output with javascript. Hope you like the Todo List Template Using HTML, CSS & JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create a Todo List Template using simple HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You For Visiting!!!

Written by - Code With Random/Anki

Code By - fernanda rodríguez

Blog

Create Todo List Template Using HTML, CSS & JavaScript

Codewithrandom Blogs

HTML Code For Todo List Template

CSS Code Todo List Template Project

Javascript Code Todo List Template Project

Join Our Newsletter. No Spam, Only the good stuff.

Related