I have found this very simple to do list. The inputs get stored as it should in the local storage, but I have problems with the "removing item" section in JS. The items are removed from the html but not from the local storage. So when it is refreshed the items I thought I removed are still there and I do not understand why. Also I do not understand firstElementChild and why it is there.
/*variables */
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
// salvato gli items dal local storage in una variabile
let storedItems = localStorage.getItem('tasks');
const generateTemplate = todo => {
const html = `
<li>
<span>${todo}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html;
}
if (!storedItems) {
storedItems = [];
} else {
storedItems = JSON.parse(storedItems);
storedItems.forEach(item => {
generateTemplate(item);
});
}
addForm.addEventListener('submit', e => {
const todo = addForm.add.value.trim();
e.preventDefault();
if (todo.length) {
generateTemplate(todo);
storedItems.push(todo);
localStorage.setItem('tasks', JSON.stringify(storedItems))
addForm.reset();
console.log(`${todo} has been added to html list`)
console.log(`Local storage now contains ${storedItems}`)
}
});
/*Removing item*/
list.addEventListener('click', e => {
console.log(e.target);
if (e.target.classList.contains('delete')) {
e.target.parentElement.remove();
let removedItem = e.target.parentElement.firstElementChild.innerText;
console.log(`${removedItem} has been removed from the html list`);
console.log(storedItems)
const newArr = storedItems.filter(item => item !== removedItem)
console.log(newArr)
storedItems = newArr
console.log(`Local storage now contains ${storedItems} `)
}
})
<!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">
<ul class="todos"></ul>
</form>
<script src="app.js"></script>
</body>
</html>
You are removing items from local array but not setting updated array to local storage. Just add
window.localStorage.setItem('tasks', JSON.stringify(storedItems))
after
storedItems = newArr
in your code. #TheBritishAreComing approach will work when you want to remove complete list instead of individual task
all this code is doing is manipulating the storedItems array, but it's not touching local storage.
if (e.target.classList.contains('delete')) {
e.target.parentElement.remove();
let removedItem = e.target.parentElement.firstElementChild.innerText;
console.log(`${removedItem} has been removed from the html list`);
console.log(storedItems)
const newArr = storedItems.filter(item => item !== removedItem)
console.log(newArr)
storedItems = newArr
console.log(`Local storage now contains ${storedItems} `)
}
You need to use, before you update your global array
localStorage.removeItem(removedItem);
Docs for localStorage.removeItem can be found here
Related
I have a todo html element whose inner html i want to save in localstorage through use of html but i am unable to figure out how i would do it.
My javascript code
// Load everything
// get DOM Elements
let to_do_input = document.getElementById("todo-input");
let addBtn = document.getElementById("addBtn");
let display = document.getElementsByClassName("display")[0];
// Event Listeners
addBtn.addEventListener("click", () => {
// Add DOM ELements
let list = document.createElement("ul");
let todos = document.createElement("li");
let deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete";
// let saveBtn = document.createElement("button");
// saveBtn.innerText = "Save";
display.appendChild(list);
list.appendChild(todos);
list.appendChild(deleteBtn);
// list.append(saveBtn);
// Class names
list.classList.add("list");
todos.classList.add("todos");
deleteBtn.classList.add("deleteBtn");
// saveBtn.classList.add("saveBtn");
// Set values
todos.innerHTML = to_do_input.value;
to_do_input.value = null;
// delete todo
deleteBtn.addEventListener("click", () => {
list.innerHTML = null;
});
// SAVE todo
// saveBtn.addEventListener("click", () => {
// // let arr = [];
// let savedTodo = arr.push(todos.innerHTML);
// localStorage.setItem("todo", JSON.stringify(savedTodo));
// });
// Set saved todo
});
and my html
<!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" />
<meta name="description" content="This web app provides you with accessibility of todo list" />
<title>Simple To-Do-List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>A Reliable To-Do-App</h2>
<div class="text-input center">
<input type="text" id="todo-input" placeholder="Write you task here.." />
<button type="button" id="addBtn" )>Add</button>
</div>
<div class="display"></div>
</div>
<script src="app.js"></script>
</body>
</html>
I have reviewed from other sites on how to do it but when i tried the array method , it returned numbers or when i tried to push todos into empty array , it didnt do anything. Also i dont know how i will convert the html element into an object to use it while making todo. Rest all the things work fine.
You need to set a array to save list,
So just edit your JS code to :
// Load everything
// get DOM Elements
let to_do_input = document.getElementById('todo-input')
let addBtn = document.getElementById('addBtn')
let display = document.getElementsByClassName('display')[0]
let todoArray = []
// Event Listeners
addBtn.addEventListener('click', () => {
// Add DOM ELements
let list = document.createElement('ul')
let todos = document.createElement('li')
let deleteBtn = document.createElement('button')
deleteBtn.innerText = 'Delete'
// let saveBtn = document.createElement("button");
// saveBtn.innerText = "Save";
display.appendChild(list)
list.appendChild(todos)
list.appendChild(deleteBtn)
// list.append(saveBtn);
// Class names
list.classList.add('list')
todos.classList.add('todos')
deleteBtn.classList.add('deleteBtn')
// saveBtn.classList.add("saveBtn");
// Set values
todos.innerHTML = to_do_input.value
todoArray.push(to_do_input.value)
to_do_input.value = null
// delete todo
deleteBtn.addEventListener('click', () => {
list.innerHTML = null
})
// SAVE todo
// saveBtn.addEventListener("click", () => {
// // let arr = [];
// let savedTodo = arr.push(todos.innerHTML);
// localStorage.setItem("todo", JSON.stringify(savedTodo));
// });
// Set saved todo
localStorage.setItem('todo', JSON.stringify(todoArray))
})
Super new to all of this so this might be some beginner troubleshooting. The list seems to be working where I'm adding a list element to the UL with a checkbox and delete button. When checkbox is checked it puts a line through the text and when the delete button is clicked it deletes the list element. The assignment asks to save to localStorage so that when refreshed, the list items still remain, and I'm getting super confused by this. What I have now seems to be saving my list elements to an array but I don't understand how to get them to save and stay on the page.
const form = document.querySelector('form');
const input = document.querySelector('#todoInput');
const newElement = document.querySelector('ul');
const savedToDos = JSON.parse(localStorage.getItem('todos')) || [];
newElement.addEventListener('click', function(e) {
if(e.target.tagName === 'BUTTON') {
e.target.parentElement.remove()
}
})
function addToList(text) {
const li = document.createElement('li');
const checkbox = document.createElement('input');
const button = document.createElement('button');
button.innerText = "Delete";
checkbox.type = 'checkbox';
checkbox.addEventListener('change', function() {
li.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
})
li.innerText = text;
li.insertBefore(checkbox, li.firstChild);
li.appendChild(button);
return li;
};
form.addEventListener('submit', function(e) {
e.preventDefault();
const newListItem = addToList(input.value);
input.value = '';
newElement.append(newListItem);
savedToDos.push(newListItem.innerText);
localStorage.setItem('todos', JSON.stringify(savedToDos));
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo App</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div>
<h1>Todo List</h1>
<form action="">
<input type="text" id="todoInput" placeholder="Add To Todo List">
<button class="add-button">Add</button>
</form>
<ul id="todoList">
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
It looks like you're failing to populate the DOM when the page loads.
After you retrieve the items from local storage (which you're already doing), loop through the list and add each of them to the DOM:
// After this line, which you've already written:
const savedToDos = JSON.parse(localStorage.getItem('todos')) || [];
// Loop through savedToDos, and for each one, insert a new list:
savedToDos.forEach(function(value) {
const newListItem = addToList(value);
newElement.append(newListItem);
});
Every browser has local storage where we can store data and cookies. just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage.
this piece of code might help you
// Store Task
function storeTaskInLocalStorage(task) {
let tasks;
if(localStorage.getItem('tasks') === null){
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
I don't have coding experience, am in the process of learning.
I'm very very confuse as to what/how I should proceed setItem to localStorage and getItem from localStorage . So when webpage refresh, saved todo items would still be there.
I seen quite a few youtube videos and blog posts, but cant quite seem to understand .
I know I need to
-push input value into an array
-save that to localStorage with JSON.stringify
-when page refresh, check if there's data in localStorage
-if true, getItem from localStorage with JSON.parse
-if false, do nothing.
Can someone please explain like I'm five.
const toDoForm = document.querySelector('#todo-form');
const toDoInput = document.querySelector('#todo');
const ulList = document.querySelector('#ulList');
let dataArray = [];
toDoForm.addEventListener('submit', function (e) {
//stop submit event from refreshing
e.preventDefault();
//when submit -> create a element <li> link it with variable newLi
//Fill new <li>innerText</li> with toDoInput's value
const newLi = document.createElement('li');
newLi.innerText = toDoInput.value;
//when submit -> create a element <button></button> link it with variable btn
//<button>x</button>
//append <button>x</button> to newLi <li><button>x</button></li>
const btn = document.createElement('button');
btn.innerText = 'x';
newLi.appendChild(btn);
//add newLi <li><button>x</button></li> to ulList<ul></ul>
ulList.appendChild(newLi);
//push input into an empty array called dataArray
dataArray.push(toDoInput.value);
localStorage.setItem('localData', JSON.stringify(dataArray));
//when submit -> after all the above is done, we will set the input field to empty string
toDoInput.value = '';
});
ulList.addEventListener('click', function (e) {
if (e.target.tagName === 'BUTTON') {
e.target.parentElement.remove();
} else if (e.target.tagName === 'LI') {
e.target.classList.toggle('line');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TO DO LIST</h1>
<ul id="ulList">
</ul>
<form action="" id="todo-form">
<label for="todo">Write down things to do</label>
<input type="text" id="todo" name="todo">
<input type="submit">
</form>
<script src="app.js"></script>
</body>
</html>
You can extract the code to add a TODO item to a function and then call that function for each element in the array stored in localStorage if it is found.
let dataArray = localStorage.getItem('localData') ? JSON.parse(localStorage.getItem('localData')): [];
dataArray.forEach(addTodo);
function addTodo(todo){
const newLi = document.createElement('li');
newLi.innerText = todo;
//when submit -> create a element <button></button> link it with variable btn
//<button>x</button>
//append <button>x</button> to newLi <li><button>x</button></li>
const btn = document.createElement('button');
btn.innerText = 'x';
newLi.appendChild(btn);
//add newLi <li><button>x</button></li> to ulList<ul></ul>
ulList.appendChild(newLi);
}
toDoForm.addEventListener('submit', function (e) {
//stop submit event from refreshing
e.preventDefault();
addTodo(toDoInput.value);
dataArray.push(toDoInput.value);
localStorage.setItem('localData', JSON.stringify(dataArray));
//when submit -> after all the above is done, we will set the input field to empty string
toDoInput.value = '';
});
Demo
I am adding array of movie objects to session storage in below line as :
sessionStorage.setItem('MyMovieList', JSON.stringify(movies));
Could someone figure out what is wrong in the code because of which session storage is not working as expected?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=2.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Putting User input into JS Objects</title>
<style>
</style>
</head>
<body>
<form>
<div class="formBox">
<label for="title">Movie</label>
<input type="text" id="title" placeholder="Title"/>
</div>
<div class="formBox>
<label for="yr">Year</label>
<input type="number" id="yr" placeholder="Year"/>
</div>
<div class="formBox">
<button id="btn">Click to Add</button>
</div>
<div id="msg">
<pre></pre>
</div>
</form>
<script>
let movies = [];
const addMovie = (ev) => {
ev.preventDefault();//to stop the form submission
let movie = {
id: Date.now(),
title: document.getElementById('title').value,
year: document.getElementById('yr').value
}
movies.push(movie);
document.forms[0].reset();// to clear the form for next entry
//document.querySelector('form').reset();
//for display purpose only
console.warn('added', {movies} );
let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + JSON.stringify(movies, '\t', 2);
//saving to localStorage
//localStorage.setItem('MyMovieList', JSON.stringify(movies ));
//saving to sessionStorage
sessionStorage.setItem('MyMovieList', JSON.stringify(movies));
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click',addMovie);
});
</script>
</body>
</html>
So I copied your code and ran it locally and everything worked fine, the movies are stored in the section. The problem you are having is that
`let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + JSON.stringify(movies, '\t', 2);`
is inside the clickHandler so on refresh if you want to see what you had in you session you can just click the button and it will be displayed within the pre tag again. try this instead
<script>
let movies = [];
const addMovie = (ev) => {
ev.preventDefault();//to stop the form submission
let movie = {
id: Date.now(),
title: document.getElementById('title').value,
year: document.getElementById('yr').value
}
movies.push(movie);
document.forms[0].reset();// to clear the form for next entry
//document.querySelector('form').reset();
//for display purpose only
console.warn('added', { movies });
//saving to localStorage
//localStorage.setItem('MyMovieList', JSON.stringify(movies ));
//saving to sessionStorage
sessionStorage.setItem('MyMovieList', JSON.stringify(movies));
let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + sessionStorage.getItem('MyMovieList'),
'\t', 2;
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click', addMovie);
let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + sessionStorage.getItem('MyMovieList'),
'\t', 2;
});
In the addMovie function just save to the sessioStorage and display to again, meanwhile on refresh you the DOMContentLoaded just display whatever you had in the sessionStore.
NB - you might want to format the output the way you want and maybe refactor the duplicate code into a function to make it DRY, I hope this suggestions is useful and can unblock you so that you can continue building your amazing app. #cheers
I am creating a simple to do list using jQuery and local storage. I am also trying to add a button for each li I add to clear the item from the list. My list does not stick upon refresh and I can't figure out how to load the button, does the button need to happen on the HTML side?
The adding to the list functions work great its just the storage to local storage that I seem to be missing something.
I created a jsfiddle for this code and the local storage seems to work fine but it will not work on my xampp. Also I can get the done button to appear but it won't removeItem.
https://jsfiddle.net/blen6035/287pc153/7/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task List</title>
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="tasks.js"></script>
</head>
<body>
<aside>
<h2>Add a task</h2>
<label for="task">Task:</label>
<input type="text" id="task" name="task"><br>
<label> </label>
<input type="button" id="add" name="add" value="Add Task">
</aside>
<main>
<h1>Task list</h1>
<ul id="listOfTasks"></ul>
</main>
<footer></footer>
</body>
</html>
"use strict"
$(document).ready(function() {
let listOfTasks = JSON.parse( localStorage.getItem("tasks"));
if( listOfTasks == undefined ){
listOfTasks = [];
}
for( let i = 0; i < listOfTasks.length; i++){
let li = $('<li> Done
</li>').text(listOfTasks[i]);
$('#listOfTasks').append(li);
}
$('#add').click(function(){
let task = $('#task').val();
listOfTasks.push(task);
localStorage.setItem("tasks", JSON.stringify(listOfTasks)
);
let li = $('<li></li>').text(task);
$('#listOfTasks').append('<li>'+ task +'<input type="submit"
class="done" value= "Done">' + '</li>');
$('#task').val(' ').focus();
});
$('.done').on('click', '.delete',function(){
$(this).parent().remove();
});
/*$('#done').click(function(){
localStorage.removeItem;
$('#listOfTasks').html('');
});*/
}); // end ready
Is this what you are trying to do ?
Note that I had to polyfill local storage to make this work in a snippet, replace fakeLocalStorage by localStorage
const listOfTasksElement = $('#listOfTasks')
const taskInputElement = $('#task')
const listOfTasks = JSON.parse(fakeLocalStorage.getItem('tasks')) || []
const updateTasks = () => fakeLocalStorage.setItem('tasks', JSON.stringify(listOfTasks))
const addTask = task => {
const taskElement = $('<li></li>').text(task)
const doneElement = $('<span>Done</span>').click(() => {
const index = listOfTasksElement.find('li').index(taskElement)
taskElement.remove()
listOfTasks.splice(index, 1)
updateTasks()
})
taskElement.append(doneElement)
listOfTasksElement.append(taskElement)
listOfTasks.push(task)
updateTasks()
}
listOfTasks.forEach(addTask)
$('#add').click(() => {
addTask(taskInputElement.val())
taskInputElement.val('').focus()
})
<ul id="listOfTasks"></ul>
<input id="task"><button id="add">Add</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// local storage doesn't work in stack overflow snippets,
// this is just a poor in-memory implementation
const fakeLocalStorage = {
_data: {},
setItem(k, v) { return this._data[k] = v },
getItem(k) { return this._data.hasOwnProperty(k) ? this._data[k] : null }
}
</script>