/todo-list

Primary LanguageCSS

To-Do List Application

Welcome to the To-Do List Application! This project is a simple yet efficient to-do list application built using HTML, CSS (Tailwind CSS), and JavaScript. It allows users to add, delete, and manage their daily tasks with ease. Additionally, it features a dark mode for a better user experience in low-light environments.

Table of Contents

Features

  • Add Tasks: Easily add new tasks to your to-do list.
  • Delete Tasks: Remove tasks that are no longer needed.
  • Dark Mode: Switch between light and dark modes for better visibility and comfort.
  • Responsive Design: The application is fully responsive and works on all devices.
  • Local Storage: Tasks are saved in the browser's local storage, so they persist even after the page is refreshed.

Installation

To run this project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/ompatel2019/todo-list.git

  2. Navigate to the project directory:

    cd todo-list

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

    open index.html

Usage

  1. Adding a Task:

    • Type the task description in the input field.
    • Click the "Add Task" button or press "Enter" to add the task to the list.

  2. Deleting a Task:

    • Click the trash icon next to the task you want to delete.

  3. Toggle Dark Mode:

    • Click the dark mode toggle switch to switch between light and dark modes.

Project Structure

The project structure is as follows:

todo-list/
│
├── css/
│   ├── tailwind.css
│   └── styles.css
│
├── js/
│   └── main.js
│
├── index.html
│
├── README.md
│
└── assets/
    └── icons/
        └── dark-mode.svg
        └── light-mode.svg
  • index.html: The main HTML file for the application.
  • css/tailwind.css: The Tailwind CSS file.
  • css/styles.css: Custom CSS for additional styling.
  • js/main.js: JavaScript file containing the main functionality of the application.
  • assets/icons/: Directory containing icons used in the application.

Technologies Used

  • HTML: The structure of the application.
  • CSS: Styling of the application using Tailwind CSS for utility-first CSS.
  • JavaScript: Functionality and interactivity of the application.

Thank you for using the To-Do List Application! If you have any questions or feedback, please feel free to contact me.