Create Todo List Template Using HTML CSS JAVASCRIPT (Source Code)

Create Todo List Template Using HTML CSS JAVASCRIPT (Source Code)

Welcome to Code With Random blog. In this blog, we create a Todo list template. We use Html, Css, And JavaScript For the Todo list Template project code

. I hope you enjoy our blog so let’s start with a basic HTML structure for the Todo List Template Project.

100+ Front-end Projects for Web developers (Source Code)

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>

There is all the HTML code for the Todo List Template Project. Now you can see output without Css and JavaScriptđŸ€©. This is only HTML coding output for Todo List template project. Then we write Css And JavaScript for Todo list template project codeđŸ”„.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Output Todo List Template Project

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;
}

Css Updated output Of Todo List Template Project

 

 

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));
}

Final Output Todo List Template

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

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

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.

Written by – Code With Random/Anki
Code By – fernanda rodrĂ­guez

Share on:

Leave a Comment