FIRE

Inferno Kitchen

My portfolio, where I cook up projects.

CHILL

Chill Shelf

A collection of games, books and resources I enjoy.

HEAT

Flavor Core

About me - what fuels my journey.

To-Do List

The Problem - needed to cut my goals into small steps

Solution - Created a simple to-do list, that can save notes into localStorage.

Code (JavaScript):

chilisquad@code-snacks:~$
			
const popup = document.getElementById("popup");
let taskArray = [];

function openPopup() {
  popup.style.display = "block";
}

function closePopup() {
  popup.style.display = "none";
}

function saveTask() {
    const taskNameInput = document.getElementById("taskName").value;
    const taskDescInput = document.getElementById("taskDesc").value;
    const wrappedTask = {
        name: taskNameInput,
        description: taskDescInput
    };

    taskArray.push(wrappedTask);

    localStorage.setItem('taskArray', JSON.stringify(taskArray));

    closePopup();
    displayTasks();
}

window.onload = function() {
    const savedTasks = localStorage.getItem('taskArray');
    if (savedTasks) {
        taskArray = JSON.parse(savedTasks);
        displayTasks();
    }
};

function displayTasks() {
    const taskList = document.getElementById('taskList');
    taskList.innerHTML = '';

    taskArray.forEach((task, index) => {
        const li = document.createElement('li');
        li.textContent = `${task.name}: ${task.description}`;

        const deleteButton = document.createElement('button');
        deleteButton.textContent = "Delete";
        deleteButton.onclick = function() {
            deleteTask(index);
        };

        li.appendChild(deleteButton);
        taskList.appendChild(li);
    });
}

function deleteTask(index) {
    taskArray.splice(index, 1);
    localStorage.setItem('taskArray', JSON.stringify(taskArray));
    displayTasks();
}

function clearAllTasks() {
    taskArray = [];
    localStorage.removeItem('taskArray');
    displayTasks();
            
		

Demo:

To-Do List (localStorage)