Objective 🎯

The aim of this project is to create a Todo Web App designed to help users efficiently organize their daily schedules. It will support them in managing their daily objectives and commitments.

The first version of the Todo application will have:

• a seamless user experience.

• a unique and impressive user interface.

• features such as adding and removing tasks, and flagging tasks according to their priority.

• enhanced task management features and more.

---

Scope 🔭

This project will have some boundaries that are described below:

In Scope

• This product will have all the important features that a Todo app must have such as:

  • adding and removing tasks.

  • filter tasks based on multiple flags such priority, time and date.

  • marking tasks as complete and unmarking them as incomplete.

  • allowing users to add priority flags.

  • enabling users to create categories, for example, work tasks, home tasks, game tasks, etc.

Not in Scope

• Some features that are out of scope in the first version of this web app are:

  • Integrating Artificial Intelligence.

  • Mobile version of the Todo Application.

  • Sharing with friends and family.

  • advanced search

  • premium access

---

Features and Requirements 🛠️

Features are divided into two parts:

P1 ( Most Important Features)

1. Add new tasks with a title, description, and a unique coloured cover.

2. Edit tasks, such as renaming tasks, updating descriptions, and changing cover colors.

3. Delete tasks with a single press.

4. Save tasks in the browser memory.

5. Sort tasks.

6. Priority flags: If the user presses the priority flag button (red color flag), tasks will move to the top of the list.

7. Progress color icon: There will be 3 priority flags:

   • Red - Pending Tasks

   • Yellow - Working on this tasks (in progress)

   • Green - Complete Task

8. Users can create categories such as:

   • Work Tasks category

   • Home Tasks category

9. Visit counter

P2 (Features)

1. Search feature

2. Drag and drop feature

3. Theme change, e.g., Dark mode

4. Third-party app collaboration

   • e.g., users cannot connect Google Calendars

5. Reward feature on task completion

6. Reminder Notifications

7. Feedback feature

8. Motivation feature

   • users will see a motivational quote on screen.

---

User Stories or Use Cases 📖

As a user: I want to list all my daily tasks to work efficiently without getting confused between tasks.

As a user: I want to focus on the most important tasks in the morning, so I need an app that can help me flag tasks according to priority.

As a user: I want a visually appealing to-do application that allows me to add, edit, remove, mark as complete, and sort my daily tasks.

As a user: I want an app that provides a motivation feature to help me complete my tasks with encouragement.

As a user: I want a to-do app that can categorize my tasks, such as work tasks and home tasks, for easier access.

As a developer: I want a feature that provides user visitor insights so I can track how many users visit my to-do app.

---

Technical Requirements 💻

This application will be built using three technologies:

• HTML (Hypertext Markup Language)

• CSS (Cascading Style Sheets)

• JS (JavaScript)

---

Design Requirement 🎨

There are many design requirements that are written below:

• The design of this application will be simple, modern, and minimalistic.

• The background will be clean with a chalk white color.

• An input field for entering new tasks will have a placeholder using a modern font, and it will have a border when focused.

• Buttons will have rounded corners and a hover effect.

• When the user presses the complete button, the task’s background color will change to green. It will be yellow when the task is in progress and red for pending tasks.

• Each task will have a gap to ensure tasks are easily visible to the user.

• The tasks container will have borders with the same radius as the buttons.

• Icons will be used instead of actual button tags for a more enhanced user interface, which will also save space.

---

Success Metrics 📈

The success will be measured using the User Visitor Counter feature. If the web app receives more than 1,000 visitors in a month during the first version of this application, it will be considered a success.

---

Timeline 🗓️

The first version of this application will include basic features and should be developed in a week. The timeline is divided into the following categories:

Day 1 - 2 : Planning

• Use the first two days to plan the project and prepare all necessary files.

• Create folders, choose an IDE, select fonts, and plan details like font size and colors.

Day 3 - 4 : Wireframe

• On days 3 and 4, create a simple wireframe for the application to facilitate quick development.

Day 4-5-6 : Development

• Focus on coding: develop the user interface and implement all working features.

Day 7 : Testing and Launch

• Test the application to ensure a better user experience.

• Test all features, share it with fellow developers for feedback.

• Launch the application.

---