Local Storage Todo List
by Keith Rowles • 11/09/2023JavaScript
Summary
Demonstrating how to use local storage to store text data with a simple todo list application.
You can add some to do items and clear them all.
Using:
- html
- css
- javascript.
HTML Code
<div class="container">
<div class="to-do-app">
<h2>To-do App</h2>
<br />
<input type="text" id="item" placeholder="Enter item..." />
<br />
<br />
<button onclick="add()">Add Item <i class="fa-solid fa-plus"></i></button>
<button onclick="del()">Clear all <i class="fa-solid fa-ban"></i></button>
</div>
<ul class="to-do-list"></ul>
</div>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: #e0d6e9;
font-family: 'Asap', sans-serif;
}
.container {
max-width: 405px;
margin: 137px auto;
padding: 20px;
display: flex;
flex-direction: column;
}
.to-do-app {
width: 100%;
padding: 20px;
border-radius: 5px;
background-color: whitesmoke;
border: 1px solid #d3d3d3;
}
.to-do-app h2 {
padding: 10px;
}
.to-do-app input {
width: 250px;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
}
.to-do-app button {
width: fit-content;
padding: 5px;
cursor: pointer;
border: 1px solid #d3d3d3;
border-radius: 5px;
background-color: whitesmoke;
}
.to-do-app button:hover {
background-color: rgba(0, 0, 0, 0.1);
}
li {
font-size: 1.5rem;
}
.to-do-list {
margin-top: 20px;
margin-right: 5px;
padding: 0 20px 10px 25px;
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
}
.to-do-list li {
font-size: small;
background-color: whitesmoke;
padding: 20px;
}
JavaScript Code
const ul = document.querySelector('ul');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items')
? JSON.parse(localStorage.getItem('items'))
: [];
itemsArray.forEach(addTask);
function addTask(text) {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
function add() {
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
addTask(input.value);
input.value = '';
}
function del() {
localStorage.clear();
ul.innerHTML = '';
itemsArray = [];
}
Demo
Here is the link to the demo on Code Pen.
Link to Demo