Interactive To-Do List

🚀 Live Demo: https://exc-to-do-list-master-d.vercel.app/

A simple and interactive task management application built with JavaScript, featuring task history and local storage.

Case Study: Development of an Interactive To-Do List

Module: MD.Ejercicios(02).Por CPT0038(01)

This project is a practical exercise from the Master D course, focusing on applying JavaScript concepts to build an interactive web application for task management.

Objectives

The completion of this case study involves applying the concepts covered in the module, with the following learning objectives:

• Create an intuitive web interface for task management.
• Implement JavaScript functions to add, remove, and update tasks.
• Handle click events and data input to make the application interactive.
• Utilize variables, data types, control structures, functions, event handling and DOM manipulation, and manipulation of arrays and objects.

Scenario

In a professional setting, imagine being part of a development team hired by a project management company to create a simple task organization application for internal use by their employees. The goal is to develop an intuitive interface that allows users to add, view, complete, and remove daily tasks, contributing to better time management and increased productivity.

Features

Core Functionality

• Add Task: Users can enter a new task in the text input field and click the "Add Task" button to add it to the list.
• Mark as Completed: Users can click on any task to mark it as completed. Completed tasks are visually distinguished (e.g., with strikethrough text).
• Remove Task: Users can remove individual tasks from the list using the remove button.
• Clear All Tasks: Option to remove all tasks at once.

Additional Features (Extended Implementation)

• Task History: Track all actions performed on tasks (added, completed, removed) with timestamps.
• About Page: Information about the project and technologies used.
• Responsive Design: The application works well on desktop and mobile devices.

Validation

• Input validation ensures tasks are not empty before adding.
• Appropriate error messages are displayed for invalid inputs.

Technologies Used

• HTML5: Semantic structure of the web pages.
• CSS3: Styling and responsive design using Bootstrap framework.
• JavaScript (ES6+): Logic for task management, DOM manipulation, and local storage.
• Bootstrap 5: CSS framework for responsive and modern UI components.
• localStorage: Client-side data persistence for tasks and history.

Project Structure

excToDoListMasterD/
├── index.html          # Main application page
├── about.html          # About page with project information
├── history.html        # History page showing task actions
├── main.js             # Main JavaScript logic for task management
├── history.js          # JavaScript for history page functionality
├── styles.css          # Custom CSS styles
└── README.md           # Project documentation

How to Run

1. Clone or download the project files.
2. Open index.html in a modern web browser (Chrome, Firefox, Safari, etc.).
3. The application will load and you can start adding tasks immediately.
4. Navigate between pages using the menu:
   • Home: Main task management interface
   • About: Project information
   • History: View recorded actions on tasks

Usage

1. Adding a Task:

   • Type your task in the input field (e.g., "Study JavaScript").
   • Click the "Add Task" button or press Enter.

2. Completing a Task:

   • Click on the task text or the circle icon to mark it as completed.

3. Removing a Task:

   • Click the red "X" button next to the task to remove it.

4. Viewing History:

   • Navigate to the History page to see all actions performed on tasks.

Evaluation Criteria

The project will be evaluated based on the following criteria:

• HTML Document Structure and Semantics: 10%
• Add Task Functionality: 20%
• Mark as Completed Functionality: 20%
• Remove Task Functionality: 20%
• Event Handling and DOM Manipulation: 15%
• Styling and Responsiveness: 15%

Browser Compatibility

• Modern browsers with ES6+ support
• localStorage enabled for data persistence

Contributing

This is an educational project for the Master D course. For improvements or modifications, please follow standard web development best practices.

License

This project is for educational purposes as part of the Master D course curriculum.