/KnockoutJS

To Do App Knockout JS Step 5 CS internship

Primary LanguageJavaScript

Todo-App-knockoutJS

This is a professional Todo-App built using Knockout.js, providing a sleek and visually appealing interface. The application allows users to manage their tasks efficiently, offering various features such as adding, deleting, and editing entries, as well as categorizing tasks into three modes: active, complete, and all.

Features

  • Add Task: Users can easily add new tasks to their to-do list. The intuitive interface enables quick entry of task details, ensuring a seamless user experience.

  • Delete Task: Unwanted tasks can be easily removed from the list with a simple click. This feature helps users keep their to-do list organized and clutter-free.

  • Edit Task: Users have the ability to edit the details of any task on the list. This feature allows for easy updates or modifications to task descriptions, due dates, or other relevant information.

  • Categorization: Tasks can be categorized into three different modes: active, complete, and all. Users can easily switch between these modes to view specific subsets of tasks based on their completion status.

Installation

To use this Todo-App, follow the instructions below:

  1. Clone the repository:

     https://github.com/Hanieh-Sadeghi/KnockoutJS

  2. Open the project folder in your preferred code editor.

  3. Launch the application by opening the index.html file in a web browser.

Technologies Used

The following technologies and libraries were used to develop this Todo-App:

  • HTML: The standard markup language for creating the structure and elements of web pages.
  • CSS: The style sheet language used for designing the visual presentation of web pages.
  • JavaScript: The programming language that enables dynamic behavior and interactivity in web applications.
  • Knockout.js: A powerful JavaScript library for building dynamic and responsive user interfaces. Knockout.js facilitates the creation of interactive web applications with a clean separation between data model and view components.

Usage

  1. Upon launching the application, you will be presented with a visually appealing interface.

  2. To add a new task, click on the "Add Task" button and enter the task details in the provided input fields. Press the "Enter" key or click the "Add" button to add the task to your list.

  3. To delete a task, click on the corresponding "Delete" button next to the task you wish to remove. Confirm the deletion if prompted.

  4. To edit a task, click on the task description or any other relevant field. Make the necessary changes and press the "Enter" key or click outside the field to save your edits.

  5. To switch between task categories, use the buttons or tabs provided. The "Active" mode displays only incomplete tasks, the "Complete" mode shows only completed tasks, and the "All" mode displays all tasks regardless of their completion status.

Contributing

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

  1. Fork the repository.

  2. Create a new branch for your feature or bug fix.

  3. Make your changes and commit them with descriptive commit messages.

  4. Push your changes to your forked repository.

  5. Submit a pull request, explaining the changes you have made and their purpose.

Contact

If you have any questions, suggestions, or feedback regarding this project, please feel free to reach out:

Thank you for using the Todo-App! We hope it helps you stay organized and efficient in managing your tasks.