This is a standard to-do list. You can add or remove items, but the problem is that they disappear when you refresh. I thought about using localStorage to fix this issue. I successfully created an array to store the items. Now, my goal is to display the items stored in tasks on the browser. However, I'm facing difficulty with the
document.addEventListener('DOMContentLoaded', getTasks)getTasks() function. I even tried adding console.log('bonjour') for testing, but it doesn't seem to work.
Thank you for your help!
function getTasks() {
console.log('bonjour')
let tasks;
if(localStorage.getItem('tasks') === null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(task => {
const html = `
<li>
<span>${task}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html;
console.log('hi')
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Todolist</title>
</head>
<body>
<form action="" class="add">
<h1>To do list</h1>
<input type="text" id="name" name="add" placeholder="Enter name here">
</form>
<ul class="todos">
<li>
<span>marco</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<script src="app.js"></script>
</body>
</html>