https://github.com/zakaria9375/multi-step-form-angular
A Solution to Frontend Mentor - Multi-step form challenge build by angular forms
https://github.com/zakaria9375/multi-step-form-angular
accessibility angular animations html reactive-forms tailwindcss typescript unit-testing
Last synced: 3 months ago
JSON representation
A Solution to Frontend Mentor - Multi-step form challenge build by angular forms
- Host: GitHub
- URL: https://github.com/zakaria9375/multi-step-form-angular
- Owner: Zakaria9375
- License: mit
- Created: 2024-06-06T09:54:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-18T11:14:55.000Z (about 1 year ago)
- Last Synced: 2025-03-27T14:19:31.094Z (3 months ago)
- Topics: accessibility, angular, animations, html, reactive-forms, tailwindcss, typescript, unit-testing
- Language: TypeScript
- Homepage: https://za-multi-step-form.netlify.app/
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Multi-step form
This is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Overview
### Figma Design
### Outcome
## Technologies
The technologies used in this project are:
* HTML & Tailwind & TypeScript
* Angular (animation, reactive forms)
* Unit testing (Jasmine)
## Features
* **Responsive Design**: Ensures the form looks great on all devices.
* **Form Validation**: Real-time validation with meaningful error messages.
* **Accessibility**: Built with accessibility in mind.
* **Animations**: Smooth animations for form interactions.
* **Unit testing**: Comprehensive unit tests to ensure code reliability.
* **Identical Design**: Almost identical to figma design except what has to reconsider for accessibility.
## Setup
To run this app in development mode open the terminal and write the following:
```shell
git clone https://github.com/Zakaria9375/fm-multi-step-form.git
cd fm-multi-step-form
npm install
# you need to install angular cli to run this app in development mode
npm install -g @angular/cli
ng serve
```
## Links
* [Challenge Page](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ)
* [Live Demo](https://za-multi-step-form.netlify.app/)
## Testing
### Accessibility
This app has been crafted with a focus on accessibility, utilizing the Accessibility Linter, IBM Equal Access Accessibility Checker extension, and WCAG extension to adhere to accessibility best practices. Key features include:
* Zooming: Maintains content and functionality without loss when zooming.
* Keyboard-only navigation: All interactive elements are fully accessible, focusable, and clickable via keyboard.
* Static code analysis: Ensures no errors through the use of semantic HTML.
* Aria rules compliance: Proper implementation of ARIA (Accessible Rich Internet Applications) rules.
* Semantic HTML: Employs clean, semantic HTML when ever possible for better accessibility.
Accessibility Tests Screenshots
### Unit Testing
This project uses Jasmine and karma for unit testing
Unit Tests Screenshots
To run and execute all the unit tests defined in the project after setting the app in development mode, open a new terminal and write the following:
```shell
ng test
```
### Lighthouse report
Accessibility Tests Screenshots
## Retrospectives
> What went well ?
I am proud of accessbility, styling, clean markup, functionality
> What could be improved ?
The weird way of fetching font at the initial load of the page.
## About the Author
* Portfolio - [Zakaria Ali](https://zaportfolio.netlify.app/)
* Frontend Mentor Profile - [@Zakaria9375](https://www.frontendmentor.io/profile/Zakaria9375)
* Project by - [Frontend Mentor team](https://www.frontendmentor.io/)
## Contributing
**Want to contribute?** *Great!* Here’s how you can help:
1. Fork the repo and create your branch from `main`.
2. Make your changes and test.
3. Issue that "pull" request!
## License
Copyright (c) 2024-present, Zakaria Ali