by In this blog post, we’ll walk you through the process of creating a simple to-do list application using CSS and JavaScript. Using the code example below you’ll be able to follow along and have your own CSS and Javascript to-do list app up and running in just 10 minutes.
The HTML for the to-do list frontend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Todo List</title>
</head>
<body>
<h1>todos</h1>
<form id="form">
<input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">
<ul class="todos" id="todos"></ul>
</form>
<small>Left click to toggle completed. <br> Right click to delete todo</small>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Todo List</title>
</head>
<body>
<h1>todos</h1>
<form id="form">
<input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">
<ul class="todos" id="todos"></ul>
</form>
<small>Left click to toggle completed. <br> Right click to delete todo</small>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Todo List</title>
</head>
<body>
<h1>todos</h1>
<form id="form">
<input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">
<ul class="todos" id="todos"></ul>
</form>
<small>Left click to toggle completed. <br> Right click to delete todo</small>
<script src="script.js"></script>
</body>
</html>
The CSS to style the To-Do list
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
color: #444;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: rgb(179, 131, 226);
font-size: 10rem;
text-align: center;
opacity: 0.4;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
}
.input::placeholder {
color: #d5d5d5;
}
.input:focus {
outline-color: rgb(179, 131, 226);
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
}
.todos li.completed {
color: #b6b6b6;
text-decoration: line-through;
}
small {
color: #b5b5b5;
margin-top: 3rem;
text-align: center;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
color: #444;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: rgb(179, 131, 226);
font-size: 10rem;
text-align: center;
opacity: 0.4;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
}
.input::placeholder {
color: #d5d5d5;
}
.input:focus {
outline-color: rgb(179, 131, 226);
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
}
.todos li.completed {
color: #b6b6b6;
text-decoration: line-through;
}
small {
color: #b5b5b5;
margin-top: 3rem;
text-align: center;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
color: #444;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: rgb(179, 131, 226);
font-size: 10rem;
text-align: center;
opacity: 0.4;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
}
.input::placeholder {
color: #d5d5d5;
}
.input:focus {
outline-color: rgb(179, 131, 226);
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
}
.todos li.completed {
color: #b6b6b6;
text-decoration: line-through;
}
small {
color: #b5b5b5;
margin-top: 3rem;
text-align: center;
}
The JavaScript which provides the logic
const form = document.getElementById('form')
const input = document.getElementById('input')
const todosUL = document.getElementById('todos')
const todos = JSON.parse(localStorage.getItem('todos'))
if(todos) {
todos.forEach(todo => addTodo(todo))
}
form.addEventListener('submit', (e) => {
e.preventDefault()
addTodo()
})
function addTodo(todo) {
let todoText = input.value
if(todo) {
todoText = todo.text
}
if(todoText) {
const todoEl = document.createElement('li')
if(todo && todo.completed) {
todoEl.classList.add('completed')
}
todoEl.innerText = todoText
todoEl.addEventListener('click', () => {
todoEl.classList.toggle('completed')
updateLS()
})
todoEl.addEventListener('contextmenu', (e) => {
e.preventDefault()
todoEl.remove()
updateLS()
})
todosUL.appendChild(todoEl)
input.value = ''
updateLS()
}
}
function updateLS() {
todosEl = document.querySelectorAll('li')
const todos = []
todosEl.forEach(todoEl => {
todos.push({
text: todoEl.innerText,
completed: todoEl.classList.contains('completed')
})
})
localStorage.setItem('todos', JSON.stringify(todos))
}
const form = document.getElementById('form')
const input = document.getElementById('input')
const todosUL = document.getElementById('todos')
const todos = JSON.parse(localStorage.getItem('todos'))
if(todos) {
todos.forEach(todo => addTodo(todo))
}
form.addEventListener('submit', (e) => {
e.preventDefault()
addTodo()
})
function addTodo(todo) {
let todoText = input.value
if(todo) {
todoText = todo.text
}
if(todoText) {
const todoEl = document.createElement('li')
if(todo && todo.completed) {
todoEl.classList.add('completed')
}
todoEl.innerText = todoText
todoEl.addEventListener('click', () => {
todoEl.classList.toggle('completed')
updateLS()
})
todoEl.addEventListener('contextmenu', (e) => {
e.preventDefault()
todoEl.remove()
updateLS()
})
todosUL.appendChild(todoEl)
input.value = ''
updateLS()
}
}
function updateLS() {
todosEl = document.querySelectorAll('li')
const todos = []
todosEl.forEach(todoEl => {
todos.push({
text: todoEl.innerText,
completed: todoEl.classList.contains('completed')
})
})
localStorage.setItem('todos', JSON.stringify(todos))
}
const form = document.getElementById('form')
const input = document.getElementById('input')
const todosUL = document.getElementById('todos')
const todos = JSON.parse(localStorage.getItem('todos'))
if(todos) {
todos.forEach(todo => addTodo(todo))
}
form.addEventListener('submit', (e) => {
e.preventDefault()
addTodo()
})
function addTodo(todo) {
let todoText = input.value
if(todo) {
todoText = todo.text
}
if(todoText) {
const todoEl = document.createElement('li')
if(todo && todo.completed) {
todoEl.classList.add('completed')
}
todoEl.innerText = todoText
todoEl.addEventListener('click', () => {
todoEl.classList.toggle('completed')
updateLS()
})
todoEl.addEventListener('contextmenu', (e) => {
e.preventDefault()
todoEl.remove()
updateLS()
})
todosUL.appendChild(todoEl)
input.value = ''
updateLS()
}
}
function updateLS() {
todosEl = document.querySelectorAll('li')
const todos = []
todosEl.forEach(todoEl => {
todos.push({
text: todoEl.innerText,
completed: todoEl.classList.contains('completed')
})
})
localStorage.setItem('todos', JSON.stringify(todos))
}
Work licensed under MIT license
Tags: todo list app, todo list, todo, css todo list, css, javascript,html, css todo, javascript todo list, localstorage, json
