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 (0)