Vet Registration Form

Simple yet engaging registration form for an imaginary veterinary clinic.

Section	Link
🎯Goal	Goal
📏Guidelines	Guidelines
🗂️Structure	Project Structure
✨Main Features	Main Features
📊Lighthouse Report	Lighthouse Report
📊Tested Browsers	Browser Compatibility
⚠️Improvement Opportunity	Areas for Improvement
🛠️Installation Guide	Installation Guide
📝Usage Instructions	Usage Instructions
📜Attributions	Attributions
📄License	License

Goal

The main goal of this project is to gain hands-on experience and improve practical skills. For the web app itself, the objective is to create a registration form for an imaginary veterinary clinic that is simple, intuitive, and professional, while also being visually appealing and engaging.

Guidelines

This project is a self-imposed challenge to test the knowledge I’ve gathered so far while also pushing myself to learn more. To achieve this, I’ve set the following guidelines:

• No Frameworks or Libraries:

The project is to be created exclusively through traditional web development, meaning no frameworks or libraries—whether from JavaScript or CSS—are allowed. This includes tools like jQuery, React, Angular, Bootstrap, and others. Also, only pure CSS and vanilla JavaScript are permitted, so preprocessors like SCSS, LESS, Babel, and TypeScript must not be used. However, modern CSS techniques like Flexbox and Grid are permitted, allowing for more responsive and efficient designs. The main goal behind these restrictions is to ensure the focus is kept on mastering the fundamentals so that the understanding of core concepts and problem-solving skills can be improved, ultimately creating a strong coding knowledge base.

• All-Devices Compatibility:

The web app should be designed to be fully responsive and adaptable across all devices—desktop, tablet, and mobile. This ensures the layout and functionality are consistent and user-friendly on any screen size while allowing me to practice and refine my skills in creating responsive designs.

• No Perfectionism:

Completion is more important than perfection. The project will never be flawless, and there will always be room for improvement—and that’s okay! The goal is to finish it rather than get caught up in endless cycles of updates and refinements that often create more problems than they solve. That said, it’s still fine to revisit and update it occasionally as I learn and grow.

Project Structure

• index.html: The primary HTML file that defines the web app structure.
• style.css: The CSS file responsible for styling the web app and form elements.
• index.js: The JavaScript file handling form interactions and dynamic inputs.
• LICENSE: Responsible for informing you about the license this web app is under.
• README.md: This file informs you about the web app's licensing.

Main Features

• Responsive Layout: The web app adapts to the screen size of the user's device—either through subtle changes like the scaling of elements or through a slightly different layout. The main difference is in the display of the header menu, which is presented as a navigation bar on desktop and tablet devices and as a dropdown menu—triggered by a button on the right side of the header—on mobile devices.

• Piece-by-Piece Form: The form is divided into three different parts: owner information, pet information, and account creation. The 'Next' button triggers the change between each section, making the form less overwhelming for the user.

• Form Feedback: To make the completion of this form a bit more engaging and dynamic, some interactive feedback features were implemented: - Inputs’ borders turn green when they are valid and red when invalid. - A warning message is displayed when the two password inputs’ values do not match, and the form is not submitted.

• Password Visibility Toggle: It is possible to toggle the visibility of the password through an icon displayed at the right side of the respective inputs. To make it a bit more engaging, the icon also changes depending on the visibility of the password.

Lighthouse Report

These are the Lighthouse ratings checked to assess the quality and optimization of the web app.

Metric	Score
Performance	100
Accessibility	100
SEO	100
Best Practices	100

These scores reflect the project’s commitment to high standards in performance, accessibility, SEO, and overall best practices.

Browser Compatibility

Last update: 22-08-2024 20h00

A browser is considered compatible when users can perform the key functions as expected while still experiencing most of the app’s features. However, this does not enssure a completely glitch-free experience, as some issues may be browser-specific. For more details on potential errors and glitches, see areas for improvement.

Browser	Status
Google Chrome	✅
Microsoft Edge	✅
Firefox	✅
Opera	✅
Safari	✅

If a browser is not displayed in the table above, it means it has not yet been tested.

Areas for Improvement

• Input Validation: The form submits even when inputs are not valid (except for the passwords). The future goal is to only allow the change to the next part of the form if the current one is correctly filled in.
• Password Toggle Icon (Microsoft Edge): Small glitch on the passoword toggle icon occurs on Microsoft Edge when the user types on the input. After clicking the toggle the glitch disappears.
• Form Display Error: When the screen height is below 350px, the form overlaps with the header instead of staying properly within the main content area.
• Dropdown Menu Design: The dropdown menu feels out of place, very likely due to its design. It could be improved.
• Usage Fluidity: The transition between form sections feels harsh and lacks smoothness. Adding a simple animation, such as a fade-in effect, would make the experience more engaging and enhance the overall fluidity of the web app.
• Background Load (Microsoft Edge and Firefox): The background load is slower and harsher on Microsoft Edge and Firefox.

Installation Guide

You can access the web app through its live deployment or locally by downloading the repository:

1. Clone the repository:

   git clone https://github.com/SaraFreitas02/Vet-Registration-Form

2. Navigate to the project directory:

   cd Vet-Registration-Form

3. Open the project in your preferred code editor:

   code .

4. Open the index.html file in your browser: You can either double-click the file in your file explorer or use a live server extension if you have one installed in your code editor.

Usage Instructions

• Open the web app in your browser (refer to Installation Guide for help).
• Explore each of the features by clicking the buttons, filling in the inputs, and resizing the window.

Attributions

• Icons:
  Copyright 2024 Fonticons, Inc.

  The icons used in this project are the property of Font Awesome Free 6.6.0 by @fontawesome. Refer to its respective LICENSE for more information.
  There were no changes made to them besides resizing and color adjustments.

• Background Image:
  The background image used in this web app is the property of David Taffet, available on Unsplash under the Unsplash License.
  There were no changes made besides the conversion into a webp file.

License

This project is open-source and available under the MIT License.

MIT License

This project is licensed under the MIT License, which means you are free to use, modify, and distribute the code as long as you include the original license text.

Disclaimer

Please be aware that while this project is provided under the MIT License, it is your responsibility to ensure that your usage complies with all applicable laws and regulations. The project is a work in progress and may have limitations or issues.

Feel free to use this project for your needs or contribute to its development.

For more details, refer to the MIT License file in this repository.