├── index.html
├── script.js
├── README.md
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Age Calculator - BY NIDHI UPMAN
8 |
9 |
10 |
11 |
12 | Age Calculator Hazrat Ali
13 |
14 |
15 |
16 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const btnEl = document.getElementById("btn");
2 | const birthdayEl = document.getElementById("birthday");
3 | const resultEl = document.getElementById("result");
4 |
5 | function calculateAge() {
6 | const birthdayValue = birthdayEl.value;
7 | if (birthdayValue === "") {
8 | alert("Please enter your birthday");
9 | } else {
10 | const age = getAge(birthdayValue);
11 | resultEl.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old`;
12 | }
13 | }
14 | // Script js
15 | function getAge(birthdayValue) {
16 | const currentDate = new Date();
17 | const birthdayDate = new Date(birthdayValue);
18 | let age = currentDate.getFullYear() - birthdayDate.getFullYear();
19 | const month = currentDate.getMonth() - birthdayDate.getMonth();
20 |
21 | if (
22 | month < 0 ||
23 | (month === 0 && currentDate.getDate() < birthdayDate.getDate())
24 | ) {
25 | age--;
26 | }
27 |
28 | return age;
29 | }
30 |
31 | btnEl.addEventListener("click", calculateAge);
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🎂 Age Calculator Project 🎂
2 |
3 | 🎉 Welcome to the **Age Calculator** project! 🎉 This handy tool allows you to calculate your age based on your date of birth. Built with **HTML** 📝, **CSS** 🎨, and **JavaScript** 💻, this calculator is simple yet effective in determining your current age.
4 |
5 | Project Demo:
6 |
7 | ## 📋 Description
8 |
9 | The **Age Calculator** 🕰️ computes your age by taking your date of birth as input. It then calculates the difference between the current date and your birthdate to provide you with accurate age information. It’s perfect for anyone who wants to quickly find out their age without manual calculations. 📅
10 |
11 | ## 🛠️ Built With
12 |
13 | - **HTML**: 📝 For creating the structure of the age calculator.
14 | - **CSS**: 🎨 For styling to make the calculator visually appealing.
15 | - **JavaScript**: 💻 For implementing the age calculation logic.
16 |
17 | ## 🚀 How to Use
18 |
19 | 1. Clone the repository: '' 📁💻
20 |
21 | 2. Open `index.html` in your web browser to start using the Age Calculator. 🌐
22 |
23 |
24 | Discover your age with the Age Calculator! 🎂 It’s quick, easy to use, and perfect for everyday use. 🌟 Feel free to share your feedback or contribute to the project by making a pull request. Enjoy calculating your age! 📊✨
25 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Style css */
2 | body {
3 | margin: 0;
4 | padding: 20px;
5 | font-family: "Montserrat", sans-serif;
6 | background-color: #f7f7f7;
7 | }
8 |
9 | .container {
10 | background-color: white;
11 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
12 | padding: 20px;
13 | max-width: 600px;
14 | margin: 0 auto;
15 | border-radius: 5px;
16 | margin-top: 50px;
17 | }
18 |
19 | h1 {
20 | font-size: 36px;
21 | text-align: center;
22 | margin-top: 0;
23 | margin-bottom: 20px;
24 | }
25 |
26 | .form {
27 | display: flex;
28 | flex-direction: column;
29 | align-items: center;
30 | }
31 |
32 | label {
33 | font-weight: bold;
34 | margin-bottom: 10px;
35 | }
36 |
37 | input {
38 | padding: 8px;
39 | border: 1px solid #ccc;
40 | border-radius: 5px;
41 | width: 100%;
42 | max-width: 300px;
43 | }
44 |
45 | button {
46 | background-color: #007bff;
47 | color: white;
48 | border: none;
49 | padding: 10px 20px;
50 | border-radius: 5px;
51 | margin-top: 10px;
52 | cursor: pointer;
53 | transition: background-color 0.3s ease;
54 | }
55 |
56 | button:hover {
57 | background-color: #0062cc;
58 | }
59 |
60 | #result {
61 | margin-top: 20px;
62 | font-size: 24px;
63 | font-weight: bold;
64 | }
65 |
--------------------------------------------------------------------------------