## Front-End Development Assignment
### Objective
Create a simple login web page using HTML, CSS, and JavaScript. Integrate the page with an open
login API and implement form field validations. Ensure the login page is responsive and works well on
both web and mobile devices.
### Requirements
1. **HTML Structure**:
- Create a basic HTML page with a form that includes:
- Username/email field
- Password field
- Submit button
2. **CSS Styling**:
- Style the form to make it visually appealing.
- Ensure the form is responsive and works well on different screen sizes, including mobile devices.
- Use media queries to adjust the layout for different screen sizes.
3. **JavaScript Functionality**:
- Implement client-side field validations:
- Ensure the username/email field is not empty and contains a valid email format.
- Ensure the password field is not empty and meets basic complexity requirements (e.g., at least 6
characters long).
- Display appropriate error messages for validation failures.
4. **API Integration**:
- Use the following open login API for authentication:
```sh
curl -X POST [Link] \
-H "Content-Type: application/json" \
-d '{
"username": "user@[Link]",
"password": "yourpassword"
}'
```
- On form submission, send a POST request to the API with the username/email and password.
- Handle the API response:
- Display a success message if the login is successful.
- Display an error message if the login fails.
5. **Responsiveness**:
- Ensure the login form is responsive and functions well on both web and mobile devices.
- Use responsive design principles and techniques such as media queries, flexible grids, and
responsive images.
### Bonus (Optional)
- Implement additional features such as:
- Show/hide password functionality.
- Remember me checkbox.
- Loading spinner during the API call.
### Submission
- Upload your code to a GitHub repository.
- Include a README file with instructions on how to run your project.
- Provide a live demo link (e.g., GitHub Pages).
### Evaluation Criteria
- Correctness: Does the login form work as expected?
- Code Quality: Is the code well-organized, commented, and follows best practices?
- UI/UX: Is the login form user-friendly and visually appealing?
- Responsiveness: Does the form work well on both web and mobile devices?
- Bonus Features: Are any additional features implemented successfully?