diff --git a/README.md b/README.md index 71ed16e..494a322 100644 --- a/README.md +++ b/README.md @@ -1 +1,102 @@ -# YourSpace \ No newline at end of file +# YourSpace +## 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: + + ```bash + 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. + + 8. **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](https://basmasalim.github.io/YourSpace/) + +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 [basmasalim030@gmail.com](mailto:basmasalim030@gmail.com). We value your input and would love to hear from you!