Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/joserafael0160/age-calculator

An Age calculator, using HTML, CSS, and JavaScript.
https://github.com/joserafael0160/age-calculator

age age-calculator calculator html js js-vanilla postcss

Last synced: about 16 hours ago
JSON representation

An Age calculator, using HTML, CSS, and JavaScript.

Host: GitHub
URL: https://github.com/joserafael0160/age-calculator
Owner: joserafael0160
License: mit
Created: 2024-04-19T22:22:08.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-06-05T03:25:40.000Z (4 months ago)
Last Synced: 2024-09-23T01:30:58.585Z (5 days ago)
Topics: age, age-calculator, calculator, html, js, js-vanilla, postcss
Language: HTML
Homepage: https://joserafael0160.github.io/Age-Calculator/
Size: 354 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Calculator

About

✦

Preview

✦

Features

✦

Stack

✦

Getting Started

✦

Commands

✦

Contributions

✦

License

✦

Support

## 📜 About
This project is an Age Calculator that allows users to calculate their age in years, months, and days based on their date of birth and a specific date they choose.

When the user inputs their date of birth and the date on which they want to calculate their age, the application calculates the difference in years, months, and days between these two dates.📅🎂

(Go Back To Top 🔝)

## 👀 Preview

In a iPhone SE (375x667)

(Go Back To Top 🔝)

## 💬 Features
- **Age Calculator**: This is a simple calculator that allows users to calculate their age in years, months, and days based on their birth date and a specific date.
- **Favicon Support**: Support for a wide range of favicon sizes has been added, ensuring that the site’s icon displays correctly on all devices and platforms.
- **Open Graph and Twitter Tags**: Open Graph and Twitter meta tags have been included, which optimize the preview of the website on social platforms like Facebook and Twitter.
- **Cross-Browser Compatibility**: The web page uses the `X-UA-Compatible` meta tag, which helps ensure compatibility with multiple browsers, especially older versions of Internet Explorer.
- **GitHub Link**: The web page includes a link to the GitHub repository, allowing users to view and contribute to the project’s source code.

(Go Back To Top 🔝)

## 🧰 Stack
- [**Vite**](https://vitejs.dev/) - It’s a fast and flexible tool for building and testing JavaScript applications.
- [**HTML**](https://developer.mozilla.org/es/docs/Web/HTML) - It’s the standard markup language for web pages.
- [**PostCSS**](https://postcss.org/) - It allows you to use modern CSS features and plugins to write and process CSS with JavaScript.
- [**JavaScript**](https://developer.mozilla.org/es/docs/Web/JavaScript) - It’s the world’s most popular programming language.
- [**ESLint**](https://eslint.org/) - It’s an open-source tool that helps you find and fix problems with your JavaScript code.
- [**Stylelint**](https://stylelint.io/) - It’s a tool that checks your CSS code for syntax, features, and conventions

(Go Back To Top 🔝)

## 🚀 Getting Starter
1. **Fork** or clone this repository

```bash
git clone [email protected]:joserafael0160/Age-Calculator.git
```

2. Install the dependencies:

- I used [**bun**](https://bun.sh) to install and manage the dependencies.

```bash
# Install bun for MacOS, WSL & Linux:
curl -fsSL https://bun.sh/install | bash

# Install bun for Windows:
powershell -c "iwr bun.sh/install.ps1|iex"

# Install with bun:
bun install
```

- or you can use [**pnpm**](https://pnpm.io):

```bash
# Install pnpm globally if you don't have it:
npm install -g pnpm

# Install dependencies:
pnpm install
```

3. Run the development server:

```bash
# Run with bun:
bun run dev

# Run with pnpm:
pnpm run dev
```

(Go Back To Top 🔝)

## 🧞 Commands
| | Command | Action |
| :--- | :-------- | :-------------------------------------------- |
| ⚙️ | `dev` | Starts local dev server. |
| ⚙️ | `build` | Build your production site to `./dist/`. |
| ⚙️ | `preview` | Preview your build locally, before deploying. |
| ⚙️ | `deploy` | Deploy your website to github pages. |

(Go Back To Top 🔝)

## 🤝 Contributions

Contributions are always welcome! Whether you’re reporting bugs, requesting new features, or improving existing functionalities, your help is **greatly appreciated**.

If you have any suggestions that could improve the project, please make a [_fork_](https://github.com/joserafael0160/Age-Calculator/fork) of the repository and create a [_pull request_](https://github.com/joserafael0160/Age-Calculator/pulls). You can also simply open an [_issue_](https://github.com/joserafael0160/Age-Calculator/issues) with the “enhancement” label.

Here is a quick guide:

1. Make a [_fork_](https://github.com/joserafael0160/Age-Calculator/fork) of the Project
2. Clone your [_fork_](https://github.com/joserafael0160/Age-Calculator/fork) (`git clone `)
3. Add the original repository as remote (`git remote add upstream `)
4. Create your Feature Branch (`git switch -c feature/NewFeature`)
5. Make your Changes (`git commit -m 'Add: some NewFeature'`)
6. Push to the Branch (`git push origin feature/NewFeature`)
7. Open a [_pull request_](https://github.com/joserafael0160/Age-Calculator/pulls)

(Go Back To Top 🔝)

## 🔑 License
[MIT](https://github.com/joserafael0160/Age-Calculator/blob/main/LICENSE)