https://github.com/hashimthepassionate/todo-application

A clean and responsive Todo Application built with HTML, CSS, and JavaScript. Add, edit, and delete tasks seamlessly with data persistence using Local Storage
https://github.com/hashimthepassionate/todo-application

js localstorage todolist

Last synced: about 1 month ago
JSON representation

A clean and responsive Todo Application built with HTML, CSS, and JavaScript. Add, edit, and delete tasks seamlessly with data persistence using Local Storage

• Host: GitHub
• URL: https://github.com/hashimthepassionate/todo-application
• Owner: HashimThePassionate
• License: mit
• Created: 2024-10-22T16:19:16.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-23T18:50:26.000Z (3 months ago)
• Last Synced: 2024-11-23T19:22:45.258Z (3 months ago)
• Topics: js, localstorage, todolist
• Language: CSS
• Homepage:
• Size: 88.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 📝 **Todo Application**

Welcome to the **Todo Application**! This is a simple yet elegant Todo app built with **HTML**, **CSS**, and **JavaScript**. It allows you to add, edit, and delete tasks with custom popup dialogs that enhance user interaction. The app also uses the browser's **Local Storage** for data persistence, ensuring your tasks remain even after you close the browser.

🌟 **[Live Demo](https://hashimthepassionate.github.io/todo-application)**

## 📚 Table of Contents

- [✨ Features](#-features)

- [🚀 How to Use](#-how-to-use)

- [🛠️ Installation](#️-installation)

- [📷 Screenshots](#-screenshots)

  - [Main Interface](#main-interface)

  - [Add Todo Popup](#add-todo-popup)

  - [Edit Todo Popup](#edit-todo-popup)

  - [Delete Confirmation Popup](#delete-confirmation-popup)

  - [Alert Popup](#alert-popup)

- [🙏 Credits](#-credits)

- [📄 License](#-license)

## ✨ Features

- **Add New Todos** 📝

- **Edit Existing Todos** ✏️

- **Delete Todos with Confirmation** ❌

- **Custom Themed Popup Dialogs** 🎨

- **Persistent Data Storage with Local Storage** 💾

- **Responsive and Modern Design** 📱

- **Smooth Animations and Transitions** ✨

## 🚀 How to Use

1. **Clone or Download** the repository to your local machine:

   ```bash

   git clone https://github.com/HashimThePassionate/todo-application.git

   ```

2. Navigate to the project directory:

   ```bash

   cd todo-application

   ```

3. Open the `index.html` file in your web browser:

   ```bash

   open index.html

   ```

   Or simply double-click on the `index.html` file.

4. Start adding your tasks by clicking on the **Add Todo** button! 🎉

## 🛠️ Installation

No additional installations are required. The app is built using plain HTML, CSS, and JavaScript, and runs entirely in the browser.

## 📷 Screenshots

### Main Interface

![Main Interface](images/main-interface.png)

### Add Todo Popup

![Add Todo Popup](images/add-todo-popup.png)

### Edit Todo Popup

![Edit Todo Popup](images/edit-todo-popup.png)

### Delete Confirmation Popup

![Delete Confirmation Popup](images/delete-confirmation-popup.png)

### Alert Popup

![Alert Popup](images/alert-popup.png)

## 🙏 Credits

- **Author**: [Muhammad Hashim](https://github.com/hashimthepassionate)

- **Fonts**:

  - 'Poppins' from [Google Fonts](https://fonts.google.com/)

  - 'Material Symbols Outlined' from [Google Fonts](https://fonts.google.com/icons)

- **Icons**:

  - Material Symbols provided by Google.

- **Inspiration**:

  - The desire to create a simple yet functional Todo app with a clean user interface.

- **Special Thanks**:

  - To all open-source contributors who inspire us to build and share.

## 📄 License

This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.

---