Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 21 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 (7 months ago)
Default Branch: main
Last Pushed: 2024-04-28T20:39:31.000Z (6 months ago)
Last Synced: 2024-04-28T21:45:55.810Z (6 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/cli

ng 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