I am trying to develop a todolist with localStorage so when the users come back on the page the data from their lists is well loaded.
I have already the script to save to data and to load it when the page refresh but :
- This is what I want to do : I would like to refresh the data in the localStorage when a user change the value of an input (current tasks).
To be honest I don’t really know how I can do that.
<!DOCTYPE html>
<html lang="fr">
<head>
<?php include 'layout/head.phtml'; ?>
</head>
<body>
<header>
<?php include 'layout/header.phtml'; ?>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!--Add list name h3-->
<h4>En cours</h4>
<div id="tasks-container">
</div>
<div class="new-task-container-submit">
<form id="form-add-task" action="">
<input class="btn-style" type="submit" id="new-task-submit" value="+" title="Ajouter">
<input class="input-style" type="text" id="new-task-input" placeholder="Ajouter une tâche">
</form>
</div>
<div class="completed-tasks-container">
<h4>Terminées</h4>
</div>
</div>
</div>
</div>
</main>
<footer>
<?php include 'layout/footer.phtml'; ?>
</footer>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
let inputNewTask = document.querySelector("#new-task-input");
let tasksContainer = document.querySelector("#tasks-container");
let formAddTask = document.querySelector("#form-add-task");
let tasksList = [];
let tasksID = 1;
function genererTasks(){
const listTasksJson = window.localStorage.getItem("Tasks name");
const listTasks = JSON.parse(listTasksJson);
for(let i = 0; i < listTasks.length; i++){
let newTaskContainer = document.createElement("div");
newTaskContainer.classList.add("new-task-container");
let newTaskInput = document.createElement("input");
newTaskInput.classList.add("input-style", "task-content");
newTaskInput.id = "task-" + tasksID;
tasksID = tasksID + 1;
newTaskInput.type = "text";
newTaskInput.value = listTasks[i];
newTaskInput.textContent = listTasks[i].value;
let iconDelete = document.createElement("i");
iconDelete.classList.add("fa-regular", "fa-circle", "btn-style");
tasksContainer.appendChild(newTaskContainer);
newTaskContainer.appendChild(iconDelete);
newTaskContainer.appendChild(newTaskInput);
tasksList.push(listTasks[i]);
}
}
//Generate the page
const listTasksJson = (localStorage.getItem("Tasks name") !== null);
if (listTasksJson){
genererTasks();
}
//Listener add new task
formAddTask.addEventListener("submit", function(e){
e.preventDefault();
let taskContent = inputNewTask.value;
if(!taskContent){
alert("Veuillez remplir le champs");
}else{
inputNewTask.value = "";
let newTaskContainer = document.createElement("div");
newTaskContainer.classList.add("new-task-container");
let newTaskInput = document.createElement("input");
newTaskInput.classList.add("input-style" , "task-content");
newTaskInput.id = "task-" + tasksID;
tasksID = tasksID + 1;
newTaskInput.type = "text";
newTaskInput.value = taskContent;
newTaskInput.textContent = taskContent.value;
let iconDelete = document.createElement("i");
iconDelete.classList.add("fa-regular", "fa-circle", "btn-style");
tasksContainer.appendChild(newTaskContainer);
newTaskContainer.appendChild(iconDelete);
newTaskContainer.appendChild(newTaskInput);
tasksList.push(taskContent);
window.localStorage.setItem("Tasks name", JSON.stringify(tasksList));
}
})
// Listener to change text tasks and put the new data in LocalStorage
//window.localStorage.removeItem("Tasks name");
I tried with change event but the only thing I am able to do is when I change the value of one input, the entire array is replace with the value of the one (don’t know if i’m clear)
I set id’s on my input element maybe I can use it?