xSarscov/todo-app-vite

Second lab for the DevTalles JavaScript course. 📝

To-Do App

This is a simple To-Do app created using JavaScript, HTML, CSS, Bootstrap library, and Vite. It was developed as part of the second practice for the JavaScript course on the DevTalles platform by Fernando Herrera. The app focuses on practicing basic JavaScript concepts, DOM manipulation, module concepts, and local storage for data persistence. The project also demonstrates the use of classes in JavaScript to create models, modular code organization, and the use of UUID as a dependency to generate unique IDs for records.

Technologies Used

• 
• 
• 
• 
• 
• 
• 
• 

Development

The project was set up and built using Vite, which is a fast build tool for modern web development. Node.js and npm were used to manage dependencies and run the development server.

Features

• Simple To-Do app for managing tasks.
• Basic UI using Bootstrap for styling.
• Ability to add, delete, and mark tasks as complete.
• Data persistence using local storage.
• Unique IDs generated for tasks using UUID.
• Search functionality to find tasks.
• Double-click on a task to activate edit mode and edit its content.
• Dark and light mode toggle.
• Delete button appears on hover for each task.

Installation

Follow these steps to run the project using Node.js and npm:

1. Clone this repository to your local machine:

git clone https://github.com/xSarscov/todo-app-vite.git

2. Change your current directory to the cloned repository:

cd todo-app-vite

3. Install the required dependencies:

npm install

4. Start the development server:

npm run dev

5. Open your web browser and visit http://localhost:5173 to use To Do App.

You can also try the live demo here.

Usage

• To add a new task, enter the task description in the input field and press Enter.
• To delete a task, hover over the task and click the delete button.
• To mark a task as complete, click the checkbox next to the task.
• To search for tasks, enter the search query in the search input field and press Enter.
• To edit a task, double-click on the task and modify its content in edit mode by pressing Enter.

The tasks will be persisted locally, so you can close and reopen the app without losing your tasks.