Simple-JS-Project

This is a basic JavaScript to-do list project that demonstrates how to:

• Dynamically add tasks to an HTML list
• Save tasks in the browser's localStorage
• Automatically load saved tasks when the page is refreshed
• Enable and disable the submit button based on user input
• Remove tasks from both the UI and storage on click

Features

• 💾 Persistent storage using localStorage
• 📝 Simple input field to add tasks
• ❌ Click-to-remove tasks
• 🔒 Disabled submit button until input is provided
• 🔁 Automatic loading of tasks on page load

How It Works

1. When the page loads, it checks if there are tasks in localStorage. If not, it initializes an empty list.
2. When the user types something in the input, the "Submit" button becomes enabled.
3. When the user submits the form:
   • A new <li> element is created and added to the list.
   • The task is added to the array stored in localStorage.
4. Clicking a task removes it from the list and updates localStorage.

Setup

Just open index.html in your browser. No server or installation needed.

Code Overview

Key components:

• DOMContentLoaded event to initialize everything
• onsubmit handler to create tasks
• onkeyup handler to manage button state
• localStorage for persistent task storage
• updateStorage() function to sync storage after deletions

Example Screenshot