Good day! Checkboxes are successfully added to the list element.
I want to understand why they disappear after refreshing the page.
Also, checkmark SVGs should be displayed right away after creating a todo list. It appears only when refreshing the page.
Code from createModule:
import { todo, setLocalStorage } from "./storageModule";
import { todoValue, todoAlert, listItems } from "./initialModule";
import { setAlertMessage } from "./alertModule";
function CreateToDoItems() {
if (todoValue.value === "") {
todoAlert.innerText = "Please enter your todo text!";
todoValue.focus();
} else {
let li = document.createElement("li");
const todoItems = `<input type="checkbox" onclick="CompletedToDoItems(this)" id="todo-check" name="todo-check"/>
<div title="Hit Double Click and Complete" ondblclick="CompletedToDoItems(this)">${todoValue.value}</div><div>
<svg class="edit todo-controls" onclick="UpdateToDoItems(this)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pencil</title><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>
<svg class="delete todo-controls" onclick="DeleteToDoItems(this)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>delete</title><path d="M18,19C18,20.66 16.66,22 15,22H8C6.34,22 5,20.66 5,19V7H4V4H8.5L9.5,3H13.5L14.5,4H19V7H18V19M6,7V19C6,20.1 6.9,21 8,21H15C16.1,21 17,20.1 17,19V7H6M18,6V5H14L13,4H10L9,5H5V6H18M8,9H9V19H8V9M14,9H15V19H14V9Z" /></svg>`;
li.innerHTML = todoItems;
listItems.appendChild(li);
if (!todo) {
todo = [];
}
let itemList = { item: todoValue.value, status: false };
todo.push(itemList);
setLocalStorage();
todoValue.value = "";
setAlertMessage("Todo item Created Successfully!");
}
}
window.CreateToDoItems = CreateToDoItems;
export let globalCreateToDoItems = window.CreateToDoItems;
Code from completedModule:
import { todo, setLocalStorage } from "./storageModule";
import { setAlertMessage } from "./alertModule";
function CompletedToDoItems(e) {
if (e.parentElement.querySelector("div").style.textDecoration === "") {
const svg = document.createElement("svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("viewBox", "0 0 24 24");
svg.innerHTML = '<title>check-bold</title><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"';
svg.className = "todo-controls";
const todoCheck = document.getElementById("todo-check");
todoCheck.checked = true;
e.parentElement.querySelector("div").style.textDecoration = "line-through";
e.parentElement.querySelector("div").appendChild(svg);
e.parentElement.querySelector("svg.edit").remove();
todo.forEach((element) => {
if (
e.parentElement.querySelector("div").innerText.trim() == element.item
) {
element.status = true;
}
});
setLocalStorage();
setAlertMessage("Todo item Completed Successfully!");
}
}
window.CompletedToDoItems = CompletedToDoItems;
export let globalCompletedToDoItems = window.CompletedToDoItems;
Top comments (2)
If you're looking to download slideshare presentations for offline viewing or study, make sure to use reliable tools or check if the author has enabled downloads. Some decks are packed with valuable insights, especially for students and professionals—definitely worth saving for later reference!
Gaining success in difficult levels will require not only dexterity but also the will to persevere. You're closer to success with every setback, when conquering a challenging level becomes an unforgettable experience. It's not for the weak of heart; geometry dash meltdown is for players who want a challenge and a crazy pace!