he hecho un TO-DO List. Funciona correctamente con LocalStorage. Añado tareas y las elimino tanto como en el HTML y en el LocalStorage. El problema es que al refrescar, me trae las tareas previas y al querer añadir una nueva tarea, la añade pero borra las anteriores, al igual que si quisiera eliminar una que se guardó en el LocalStorage me las borra todas, se me reinicia todo el arreglo(Objeto). Lo he intentado solucionar pero no encuentro el fallo aún. Es como si no pudiese seguir con el previo arreglo almacenado en LocalStorage y se me crea uno totalmente nuevo. Espero su ayuda.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TO-DO-LIST</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:ital,wght@1,900&family=Signika+Negative:wght@600&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="header mt-5 bg-primary ">
<h1 class="text-center mt-2">TO-DO LIST</h1>
</div>
<div id="contenido">
<form action="#" id="formulario" class="mt-5 mb-5">
<input type="text" id="tarea" placeholder="Escriba la tarea por hacer">
<button type="submit" class="btn btn-primary" id="add">+</button>
</form>
<h1 id="text-result" class="text-center">No hay tareas aún</h1>
<div id="resultado">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JS
const formulario = document.querySelector('#formulario');
const inputTarea = document.querySelector('#tarea');
const resultadoDiv = document.querySelector('#resultado');
const textResult = document.querySelector('#text-result');
const btnAdd = document.querySelector('#add');
let arrayTareas = [];
eventListeners();
function eventListeners() {
document.addEventListener('DOMContentLoaded', () => {
arrayTareas = JSON.parse(localStorage.getItem('tareas')) || [];
ui.mostrarHTML(arrayTareas);
})
formulario.addEventListener('submit', agregarTarea);
}
class Tarea {
constructor() {
this.tareas = arrayTareas;
}
nuevaTarea(tarea) {
this.tareas = [...this.tareas,tarea];
arrayTareas = JSON.parse(localStorage.getItem('tareas'));
localStorage.setItem('tareas', JSON.stringify(this.tareas));
}
quitarTarea(id) {
this.tareas = this.tareas.filter(tarea => tarea.id !== id);
arrayTareas = JSON.parse(localStorage.getItem('tareas'));
localStorage.setItem('tareas', JSON.stringify(this.tareas));
}
}
class UI {
mostrarAlerta(mensaje, tipo) {
const alerta = document.querySelector('.alert');
if(!alerta){
const alertaDiv = document.createElement('div');
alertaDiv.classList.add('text-center', 'alert', 'd-block','alerta');
if(tipo === 'error'){
alertaDiv.classList.add('alert-danger');
} else {
alertaDiv.classList.add('alert-success');
}
alertaDiv.textContent = mensaje;
document.querySelector('#contenido').insertBefore(alertaDiv, resultadoDiv);
setTimeout(() => {
alertaDiv.remove();
}, 2000);
}
}
mostrarHTML(tareas) {
limpiarHTML();
tareas.forEach(tarea => {
const {tareaInfo, id} = tarea;
const nuevaTarea = document.createElement('div');
nuevaTarea.classList.add('d-flex','tarea','mb-3');
nuevaTarea.dataset.id = id;
nuevaTarea.innerHTML = `<h2 class="bagde">${tareaInfo}</h2>`
const buttonsDiv = document.createElement('div');
const btnEliminar = document.createElement('button');
btnEliminar.textContent = 'X';
btnEliminar.classList.add('btn','btn-danger','m-1');
btnEliminar.onclick = () => {
eliminarTarea(id);
}
nuevaTarea.appendChild(buttonsDiv);
buttonsDiv.appendChild(btnEliminar);
resultadoDiv.appendChild(nuevaTarea);
});
if(tareas.length > 0){
textResult.textContent = "Tareas pendientes"
} else {
textResult.textContent = "No hay tareas aún"
}
}
}
const ui = new UI();
let objetoTarea = new Tarea();
function agregarTarea(e) {
e.preventDefault();
if(inputTarea.value === ''){
console.log('Esta vacio')
ui.mostrarAlerta('Este campo es obligatorio','error');
return;
}
const tareaInfo = inputTarea.value;
const tareaObj = {tareaInfo , id:Date.now()};
objetoTarea.nuevaTarea({...tareaObj});
ui.mostrarAlerta('Tarea agregada');
ui.mostrarHTML(objetoTarea.tareas);
console.log(objetoTarea.tareas);
formulario.reset();
inputTarea.focus();
}
function eliminarTarea(id) {
objetoTarea.quitarTarea(id);
ui.mostrarAlerta('Tarea Eliminada','error');
ui.mostrarHTML(objetoTarea.tareas);
}
function limpiarHTML() {
while(resultadoDiv.firstChild){
resultadoDiv.removeChild(resultadoDiv.firstChild);
}
}
CSS
html body{
font-family: 'Signika Negative', sans-serif;
}
.header{
width: 20%;
margin: auto;
border: 2px solid;
border-radius: 50px;
}
#formulario {
display: flex;
justify-content: center;
}
#tarea {
width: 30%;
padding: 10px;
}
#add {
margin-left: 10px;
}
#resultado {
width: 50%;
margin: auto;
}
.alerta {
margin: auto;
width: 40%;
}
.tarea {
justify-content: space-between;
}
console.log
los valores de this.tareas y arrayTareas en la función quitarTarea?