function addToLocalStorage(id, value) {
const todo = { id, value };
let items = localStorage.getItem("list")
? JSON.parse(localStorage.getItem("list"))
: [];
console.log(items);
items.push(todo);
localStorage.setItem("list", JSON.stringify(items));
}
// ****** SELECT ITEMS **********
const alert = document.querySelector('.alert');
const form = document.querySelector('.grocery-form');
const grocery = document.getElementById('grocery');
const addBtn = document.querySelector('.submit-btn');
const container = document.querySelector('.grocery-container');
const list = document.querySelector('.grocery-list');
const clearBtn = document.querySelector('.clear-btn');
// edit option
let editElement;
let editFlag = false;
let editId = "";
// ****** EVENT LISTENERS **********
// submit form
form.addEventListener("submit", addItem);
// clear items
clearBtn.addEventListener('click', clearItems);
// ****** FUNCTIONS **********
function addItem(e) {
e.preventDefault();
const value = grocery.value;
const id = new Date().getTime().toString();
if(value && !editFlag) {
const element = document.createElement('article');
// add class
element.classList.add("grocey-item");
// add id
const attr = document.createAttribute('data-id');
attr.value = id;
element.setAttributeNode(attr);
element.innerHTML = `<p class="title">${value}</p>
<div class="btn-container">
<button class="edit-btn" type="button">
<i class="fas fa-edit"></i>
</button>
<button class="delete-btn" type="button">
<i class="fas fa-trash"></i>
</button>
</div>`;
// add event listeners to both buttons;
const deleteBtn = element.querySelector(".delete-btn");
const editBtn = element.querySelector(".edit-btn");
deleteBtn.addEventListener("click", deleteItem);
editBtn.addEventListener("click", editItem);
// append child
list.appendChild(element);
// display alert
displayAlert('item added to the list', "success");
// show container
container.classList.add("show-container");
// add to local storage
addToLocalStorage(id, value);
// set back to default
setBackToDefault();
}
else if(value && editFlag) {
editElement.innerHTML = value;
displayAlert('value changed', 'success');
// edit local storage
editLocalStorage(editId, value);
setBackToDefault();
}
else{
displayAlert('please enter value ', "danger");
}
}
// display alert
function displayAlert(text, action) {
alert.textContent = text;
alert.classList.add(`alert-${action}`);
// remove alert
setTimeout(function() {
alert.textContent = '';
alert.classList.remove(`alert-${action}`);
}, 1000)
}
// set back to default
function setBackToDefault() {
grocery.value = "";
editFlag = false;
editId = "";
addBtn.textContent = "add";
}
// clear items
function clearItems() {
const items = document.querySelectorAll(".grocery-item");
if(items.length > 0) {
items.forEach(function (item) {
list.removeChild(item);
});
}
container.classList.remove("show-container");
displayAlert('empty list', 'danger');
setBackToDefault();
}
// delete function
function deleteItem(e) {
const element = e.currentTarget.parentElement.parentElement;
const id = element.dataset.id;
list.removeChild(element);
if(list.children.length === 0) {}
container.classList.remove("show-container");
displayAlert('item removed', 'danger');
setBackToDefault();
// remove from local storage
//removeFromLocalStorage(id);
}
// edit function
function editItem(e) {
const element = e.currentTarget.parentElement.parentElement;
// set edit item
editElement = e.currentTarget.parentElement.previousElementSibling;
// set form value
grocery.value = editElement.innerHTML;
editFlag = true;
editID = element.dataset.id;
//
addBtn.textContent = "edit";
}
// localStorage.removeItem('list');
// ****** LOCAL STORAGE **********
function addToLocalStorage(id, value) {
const todo = { id, value };
let items = localStorage.getItem("list")
? JSON.parse(localStorage.getItem("list"))
: [];
console.log(items);
items.push(todo);
localStorage.setItem("list", JSON.stringify(items));
// console.log("added to local storage");
}
function removeFromLocalStorage(id) {
}
function editLocalStorage(id, value) {
// local storage API
// set item
// get item
// remove item
// save as strings
}
/*localStorage.setItem("orange", JSON.stringify(['item', 'item2']));
const oranges = JSON.parse(localStorage.getItem('orange'));
console.log(oranges);
localStorage.removeItem('orange');*/
// ****** SETUP ITEMS **********/
<!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>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<!-- styles -->
<link rel="stylesheet" href="stylesheet 19.css" />
</head>
<body>
<section class="section-center">
<!-- form -->
<form class="grocery-form">
<p class="alert"></p>
<h3>To Do List</h3>
<div class="form-control">
<input type="text" id="grocery" placeholder="e.g.workout"/>
<button type="submit" class="submit-btn">add</button>
</div>
</form>
<!-- list -->
<div class="grocery-container">
<div class="grocery-list">
</div>
<!-- clear button -->
<button type="button" class="clear-btn">clear items</button>
</div>
</section>
<!-- javascript -->
<script src="app 19.js"></script>
</body>
</html>
Did you try deleting the local storage for the webpage?
1 Like
yes i did and it worked but i want to ask you about the reason so i can avoid at the next times
I really appreciate that you helped me thanks for the help
You can also use the dev tools to inspect and delete it.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.