Your Space

Web Application with User Authentication, Drawing Feature, and TodoList (Drag and Drop)

This web application combines user authentication and a drawing feature, providing a simple and interactive experience.

Features

1. User Authentication:

   • Log in with a registered email and password.
   • Secure authentication using local storage.

2. User Registration:

   • Register with a unique username, email, and password.
   • Validation for username, email, and password.

3. Drawing Feature:

   • Canvas for drawing with configurable color and line width.
   • Save and clear options for the drawing.
   • Responsive and interactive drawing functionality.

4. TodoList (Drag and Drop):

   • Efficiently manage tasks with a TodoList.
   • Easily drag and drop items to rearrange or group them.
   • A responsive and user-friendly interface for task organization.

5. Search Functionality:

   • Easily find items with the dynamic search functionality.

6. Typography Animation:

   • Welcome users with a typing animation using Typed.js.

7. Loading Spinner:

   • Display a spinner during the page load.

Getting Started

Prerequisites

• Web browser (Chrome, Firefox, Safari, etc.)

Installation

1. Clone the repository:

   git clone https://github.com/basmasalim/YourSpace.git

2. Open index.html in your web browser.

Usage

• User Authentication:

  1. Enter a registered email and password.
  2. Click the login button.
  3. Redirects to the home page upon successful login.

• User Registration:

  1. Provide a unique username, email, and password.
  2. Click the sign-up button.
  3. Displays success or error messages using SweetAlert.

• TodoList (Drag and Group)

  1. Adding Tasks:

     • Enter a task in the input field labeled "Add a new task" and press Enter or click the "Add" button.
     • Your new task will be added to the TodoList.

  2. Managing Tasks:

     • Drag and drop tasks to rearrange their order or group them visually.
     • Utilize the dynamic search functionality to quickly find specific tasks.

  3. Task Actions:

     • Click on a task to mark it as complete.
     • Hover over a task to reveal additional actions, such as deleting the task.

  4. Grouping Tasks:

     • Drag a task and drop it over another task to create a group.
     • Expand or collapse task groups to keep your TodoList organized.

  5. Responsive Design:

     • Enjoy a seamless TodoList experience on devices of all sizes.

• Drawing Feature:

  1. Use the canvas for drawing.
  2. Configure the drawing color and line width.
  3. Save or clear the drawing.

• Search Functionality:

  • Enter a search term to filter items dynamically.

Live Demo

Experience the Tabs Project in action! Click the link below to access the live demo:

Live Demo

Feel free to interact with the project, browse through different jobs, and explore the user-friendly interface. The live demo provides a hands-on experience to see the Tabs Project in action.

Contributing

If you have suggestions or find issues with the template, feel free to open an issue or create a pull request. Contributions are welcome!

Contact

If you have any questions, feedback, or suggestions, please feel free to reach out to us at [email protected]. We value your input and would love to hear from you!