Skip to content

Latest commit

 

History

History
98 lines (61 loc) · 4.05 KB

README.md

File metadata and controls

98 lines (61 loc) · 4.05 KB

📝 To-Do List Web Application

🌟 Overview

Welcome to the To-Do List Web Application! This project is a modern, feature-rich to-do list application designed to help you efficiently manage tasks. Built with HTML, CSS, and JavaScript, it features dynamic background switching, real-time updates, and a visually appealing user interface.

✨ Features

  • 🎨 Dynamic Background Switching: Change the background image periodically or manually with a button click.
  • ⏰ Real-Time Date & Time Display: Shows the current date and time, updated every minute.
  • ✅ Task Management: Add, edit, delete, and toggle task completion status.
  • 📊 Task Statistics: Visual representation of task completion progress with a progress bar.
  • 📱 Responsive Design: Optimized for various screen sizes and devices.
  • 💾 Local Storage: Tasks are saved in the browser’s local storage, ensuring data persistence across sessions.

🚀 Installation

To get started with the To-Do List Web Application, follow these steps:

1. 📥 Clone the Repository

git clone https://github.com/your-username/To-do-list-web-app.git
cd To-do-list-web-app

2. 🛠️ Set Up the Project

Ensure you have the latest version of Node.js installed. While this project doesn’t require a server, you can use tools like Live Server for local development.

3. 🌐 Open the Application

You can open the index.html file directly in your browser or use a local server:

  • Using Live Server Extension (for VS Code):
    • Right-click on index.html in your project folder.
    • Select Open with Live Server.

🧭 Usage

💻 Interface Overview

  • Date & Time Display: Located at the top of the page, shows the current date and time.
  • Background Switcher: A button below the date/time display allows you to change the background image.
  • Task Input: Enter new tasks into the input field and click the "Add Task" button.
  • Task List: Displays tasks with checkboxes to mark them as complete. Each task has options to edit or delete.
  • Progress Bar: Visual indicator of task completion progress.
  • Task Statistics: Shows the number of completed tasks out of the total.

➕ Adding a Task

  1. Enter the task description in the input field.
  2. Click the "Add Task" button to add the task to the list.

✏️ Editing a Task

  1. Click the edit icon ✍️ next to the task you want to modify.
  2. The task description will appear in the input field. Modify the text and press Enter to update.

🗑️ Deleting a Task

  1. Click the delete icon ❌ next to the task you want to remove.
  2. The task will be deleted from the list.

🎯 Toggling Task Completion

  • Click the checkbox ✅ next to a task to mark it as complete or incomplete.

🌄 Changing Background

  • Click the "Change Background" button to cycle through predefined background images.
  • The background will also automatically change every 60 seconds.

🗂️ Code Structure

  • index.html: The main HTML file containing the structure of the application.
  • styles.css: Contains all the styling for the application, including layout, colors, and responsiveness.
  • script.js: Handles all the JavaScript functionality, including task management, date/time updates, background switching, and local storage.

🎨 Customization

You can easily customize the application by modifying:

  • Background Images: Add or replace images in the img folder and update the backgrounds array in script.js.
  • CSS Styling: Adjust colors, fonts, and layout in styles.css to fit your design preferences.
  • Task Functionality: Modify the JavaScript code in script.js to add new features or change existing ones.

🤝 Contributing

Contributions are welcome! If you’d like to contribute to this project, please fork the repository, make your changes, and submit a pull request.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Contact

For any questions or feedback, please reach out to [email protected].