Issue
I have A Very Small Application That add tasks to the page and save it to local storage so if i reload the page or close it everything will be at its place, the problem is on the created tasks i have a delete button , this button delete task from localstorage and dom,but i need to reload page first . This How the app looks
What i want is : can i delete tasks without reloading the page first ?
Full js code :
let myForm = document.getElementsByTagName("form")[0];
let input = document.getElementById("only");
let submit = document.getElementById("btn");
let resDiv = document.getElementsByClassName("tasks")[0];
function id () {
return '_' + Math.random().toString(36).substr(2, 9);
}
if (window.localStorage.tasks) {
for (let i = 0; i < JSON.parse(window.localStorage.tasks).length; i++) {
let myDiv = document.createElement("div");
let text = document.createTextNode(
JSON.parse(window.localStorage.tasks)[i].title
);
let del = document.createElement("button");
let delText = document.createTextNode("Delete");
del.append(delText);
del.className = "del";
del.dataset.id = JSON.parse(window.localStorage.tasks)[i].id;
myDiv.className = "myDiv";
myDiv.append(text, del);
resDiv.append(myDiv);
}
}
myForm.onsubmit = function (e) {
if (input.value !== "") {
let myDiv = document.createElement("div");
let text = document.createTextNode(input.value);
let del = document.createElement("button");
let delText = document.createTextNode("Delete");
del.append(delText);
del.className = "del";
del.dataset.id = id();
myDiv.className = "myDiv";
myDiv.append(text, del);
resDiv.append(myDiv);
let push = JSON.parse(window.localStorage.getItem("tasks")) || [];
push.push({ id: del.dataset.id, title: input.value });
window.localStorage.setItem("tasks", JSON.stringify(push));
}
e.preventDefault();
};
let tasksArray = JSON.parse(window.localStorage.tasks);
resDiv.addEventListener("click", function (e) {
for (let j = 0; j < tasksArray.length; j++) {
if ( e.target.dataset.id === tasksArray[j].id) {
tasksArray.splice(tasksArray.indexOf(tasksArray[j]), 1);
window.localStorage.setItem("tasks", JSON.stringify(tasksArray));
e.target.parentElement.remove();
}
}
});
Html :
<form action="">
<input type="text" name="" id="only" />
<input type="submit" value="Add Tasks" id="btn" />
</form>
<div class="tasks"></div>
Note : I am new to javaScript i hope You Understand if i did some silly mistakes ^_^. Thanks For trying to help :D forgive my grammar .
Solution
Your code is very hard to read. So, I ended up re writing the whole thing using good conventions and tricks that you can use in the future. Take notes :)
I'm assuming you're in charge of the code that assigns the ids that you didn't give us. So I made one particularly for this example.
<!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" />
<title>Document</title>
</head>
<body>
<form id="my-form" action="">
<input type="text" name="" id="input-box" />
<input type="submit" value="Add Tasks" id="submit-button" />
</form>
<div id="task-list" class="tasks"></div>
<script>
const myForm = document.getElementById("my-form");
const inputBox = document.getElementById("input-box");
const taskList = document.getElementById("task-list");
// Assuming your are handling this function.
// You can ignore this part
function Id() {
const uid =
new Date().toISOString().replaceAll(/[-:TZ]/g, ".") +
Math.random().toString().substring(2, 7);
return uid.split(".").join("");
}
// Set the tasks everytime the application is refreshed
window.onload = function () {
// The tasks in your local storage. Local storage stores data in string
// only so you need to use JSON.parse to convert it into readable array
// I'm also setting the default value to [] in case javascript cannot find
// the tasks
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.forEach(({ id, title }) => {
// Reusable renderTasks function to render the tasks
const task = renderTasks(id, title);
taskList.append(task);
});
};
// Reusable function to render the tasks.
function renderTasks(id, title) {
const taskParent = document.createElement("div");
taskParent.style.display = "flex";
taskParent.id = id;
const taskTitle = document.createElement("p");
taskTitle.innerText = title;
// You don't need to set Id's in your case. You can just assign a
// function to the delete button and remove the parent within the
// functon itself
const deleteButton = document.createElement("button");
deleteButton.innerText = "DELETE";
deleteButton.onclick = function () {
const tasks = JSON.parse(localStorage.getItem("tasks"));
taskParent.remove();
// Array filter. Return a new list without the deleted task
const newTaskList = tasks.filter((task) => task.id !== id);
localStorage.setItem("tasks", JSON.stringify(newTaskList));
};
// I'm using append because with appendChild you can't append more than
// 2 html elements at the same time
taskParent.append(taskTitle, deleteButton);
return taskParent;
}
// 1. render the task
// 2. Append the task to the list
// 3. Set the title in the localStorage
myForm.onsubmit = function (e) {
e.preventDefault();
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
const id = Id();
const title = inputBox.value;
const task = renderTasks(id, title);
taskList.append(task);
localStorage.setItem(
"tasks",
JSON.stringify([...tasks, { id, title }])
);
};
</script>
</body>
</html>
Hope this helps :)
More on filter: Array.prototype.filter()
Answered By - William
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.