Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zakaria9375/fm-age-calculator
Age calculator app challenge on Frontend Mentor
https://github.com/zakaria9375/fm-age-calculator
accessibility angular aria css html5 tailwindcss typescript
Last synced: 17 days ago
JSON representation
Age calculator app challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/zakaria9375/fm-age-calculator
- Owner: Zakaria9375
- License: mit
- Created: 2024-04-22T20:30:22.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-28T20:39:31.000Z (8 months ago)
- Last Synced: 2024-10-16T19:36:10.035Z (2 months ago)
- Topics: accessibility, angular, aria, css, html5, tailwindcss, typescript
- Language: HTML
- Homepage: https://za-age-calculator.netlify.app/
- Size: 402 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Age calculator app challenge on Frontend Mentor
This is a solution to the [Age calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
![Design preview](./design/desktop-design.jpg)
## Technologies Used
This project utilizes the following technologies:
* HTML & CSS & Ts
* Tailwind
* Angular## Key Features
* Accessible app (Perfect usage of aria rules)
* Responsive design - Pixel Perfect (almost identical to Figma)
* Clean Markup (Meet WCAG standards by using Semantic HTML)## Getting Started
To run this app in development mode open the terminal and write the following:
```sh
git clone https://github.com/Zakaria9375/fm-age-calculator.git
cd fm-age-calculator
npm install# If Angular CLI is not installed
npm install -g @angular/cling serve
# To calculate your age, start the server and navigate to:
http://localhost:4200
# Enter your birth date in the form and submit to see the results.
```## Useful Links
* [Project Challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q)
* [Live Demo](https://za-age-calculator.netlify.app/)## Accessibility
This application has been tested extensively for accessibility, including:
* Zooming Compatibility: Content remains visible will zooming.
* Text-only Zoom: No loss of content till 200%.
* Keyboard Navigation: Interactive elements are accessible(focusable) and clickable.
* Static code analysis: Regularly performed to maintain and ensure perfect compliance with accessibility standards.![Accessibility test](./src/assets/access.png)
## 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