// On app load, get all tasks from localStorage
window.onload = loadTasks;
// On form submit add task
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault();
addTask();
});
function loadTasks() {
// check if localStorage has any tasks
// if not then return
if (localStorage.getItem("tasks") == null) return;
// Get the tasks from localStorage and convert it to an array
let tasks = Array.from(JSON.parse(localStorage.getItem("tasks")));
// Loop through the tasks and add them to the list
tasks.forEach(task => {
const list = document.querySelector("ul");
const li = document.createElement("li");
li.innerHTML = `
`;
list.insertBefore(li, list.children[0]);
});
}
function addTask() {
const task = document.querySelector("form input");
const list = document.querySelector("ul");
// return if task is empty
if (task.value === "") {
alert("Please add some task!");
return false;
}
// check is task already exist
if (document.querySelector(`input[value="${task.value}"]`)) {
alert("Task already exist!");
return false;
}
// add task to local storage
localStorage.setItem("tasks", JSON.stringify([...JSON.parse(localStorage.getItem("tasks") || "[]"), { task: task.value, completed: false }]));
// create list item, add innerHTML and append to ul
const li = document.createElement("li");
li.innerHTML = `
`;
list.insertBefore(li, list.children[0]);
// clear input
task.value = "";
}
function taskComplete(event) {
let tasks = Array.from(JSON.parse(localStorage.getItem("tasks")));
tasks.forEach(task => {
if (task.task === event.nextElementSibling.value) {
task.completed = !task.completed;
}
});
localStorage.setItem("tasks", JSON.stringify(tasks));
event.nextElementSibling.classList.toggle("completed");
}
function removeTask(event) {
let tasks = Array.from(JSON.parse(localStorage.getItem("tasks")));
tasks.forEach(task => {
if (task.task === event.parentNode.children[1].value) {
// delete task
tasks.splice(tasks.indexOf(task), 1);
}
});
localStorage.setItem("tasks", JSON.stringify(tasks));
event.parentElement.remove();
}
// store current task to track changes
var currentTask = null;
// get current task
function getCurrentTask(event) {
currentTask = event.value;
}
// edit the task and update local storage
function editTask(event) {
let tasks = Array.from(JSON.parse(localStorage.getItem("tasks")));
// check if task is empty
if (event.value === "") {
alert("Task is empty!");
event.value = currentTask;
return;
}
// task already exist
tasks.forEach(task => {
if (task.task === event.value) {
alert("Task already exist!");
event.value = currentTask;
return;
}
});
// update task
tasks.forEach(task => {
if (task.task === currentTask) {
task.task = event.value;
}
});
// update local storage
localStorage.setItem("tasks", JSON.stringify(tasks));
}
yang saya tutup dibawah ini adalah script penerima. pasang script ini pada postingan yang berbeda maka uotput myContent tampil disini.
localstrorage ini hanya muncul satu. jika value diisi dengan yang baru maka output dan id="demo" yang lama akan hilang.
Alhamdulillah akhirnya ketemu dan bisa juga jadiin div menjadi gambar, ini keren bangat nih
Click to Take a Screenshot & Download it! using html2canvas.js + canvas2image.js
This is a simple demo.
Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.