Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zakaria9375/fm-contact-form
A Solution to Frontend Mentor - Contact form challenge build by angular forms
https://github.com/zakaria9375/fm-contact-form
accessibility angular animation css html5 reactive-forms responsive-design tailwindcss typescript unit-testing
Last synced: 21 days ago
JSON representation
A Solution to Frontend Mentor - Contact form challenge build by angular forms
- Host: GitHub
- URL: https://github.com/zakaria9375/fm-contact-form
- Owner: Zakaria9375
- License: mit
- Created: 2024-05-28T21:27:01.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-05-28T23:54:20.000Z (5 months ago)
- Last Synced: 2024-05-29T13:26:18.787Z (5 months ago)
- Topics: accessibility, angular, animation, css, html5, reactive-forms, responsive-design, tailwindcss, typescript, unit-testing
- Language: TypeScript
- Homepage: https://za-contact-form.netlify.app/
- Size: 1.16 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 - Contact form
This is a solution to the [Contact form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj). 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, including ARIA roles and keyboard navigation.
* **Animations**: Smooth animations for form interactions.
* **Unit testing**: Comprehensive unit tests to ensure code reliability.
* **Identical Design**: Compared to figma design, there is no difference except what has to be considered for better ux.
## Setup
To run this app in development mode open the terminal and write the following:
```shell
git clone https://github.com/Zakaria9375/fm-contact-form.git
cd fm-contact-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/contact-form--G-hYlqKJj)
* [Live Demo](https://za-contact-form.netlify.app/)
## Testing
### Accessibility
This app has been built with care and attention to every detail to make it accessible to everyone So, you can expect the following:
* Zooming: No loss of content or functionality.
* Keyboard-only: Interactive elements are accessible(focusable and clickable).
* Static code analysis: No errors(using semantic HTML).
* Proper usage of aria rules.
### Unit Testing
This project uses Jasmine and karma for unit testing
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
## 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