├── .gitattributes
├── assets
    └── AgeWizard.jpg
├── LICENSE
├── README.md
├── index.html
└── style.css


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/assets/AgeWizard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/Age_Wizard_An_Age_Calculator/HEAD/assets/AgeWizard.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alok Sharma
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # # Age Wizard - Age Calculator
 2 | 
 3 | ![image](https://github.com/Alok-2002/Age_Wizard_An_Age_Calculator/assets/93814546/06b72895-69d2-425b-852c-50946b8859e6)
 4 | 
 5 | Welcome to Age Wizard, an interactive age calculator that allows you to determine the exact age based on a provided date of birth. Whether you're curious about your own age or need to calculate someone else's, Age Wizard has got you covered!
 6 | 
 7 | You can access the Age Wizard application by visiting the following link: [Age Wizard Live Demo](https://age-wizard.vercel.app)
 8 | 
 9 | ## Features
10 | 
11 | - Simple and user-friendly interface
12 | - Accurate age calculation based on the provided date of birth
13 | - Displays the precise age in years, months, and days
14 | - Supports a wide range of date formats
15 | - Cross-platform compatibility (works on Windows, macOS, and Linux)
16 | 
17 | ## Usage
18 | 
19 | 1. Visit the Age Wizard live demo link: [Age Wizard Live Demo](https://age-wizard.vercel.app)
20 | 2. In the provided input field, enter the date of birth in the format DD/MM/YYYY or MM/DD/YYYY (based on your region).
21 | 3. Click the "Calculate Age" button to determine the exact age.
22 | 4. The calculated age will be displayed below the button in years, months, and days.
23 | 
24 | Feel free to try out different date formats and observe the accurate age calculations!
25 | 
26 | ## Technologies Used
27 | 
28 | - HTML
29 | - CSS
30 | - JavaScript
31 | 
32 | ## Contributions
33 | 
34 | Contributions to Age Wizard are always welcome! If you find any bugs, issues, or have suggestions for improvements, please feel free to open an issue or submit a pull request on the [GitHub repository](https://github.com/Alok-2002/Age_Wizard_An_Age_Calculator/tree/main).
35 | 
36 | ## License
37 | 
38 | This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
39 | 
40 | ## Acknowledgments
41 | 
42 | - The Age Wizard logo is created by [Alok Sharma](https://github.com/alok-2002).
43 | 
44 | 
45 | ## Contact
46 | 
47 | For any inquiries or feedback, please contact [sharmaalok02gwl@gmail.com](mailto:sharmaalok02gwl@gmail.com).
48 | 
49 | Thank you for using Age Wizard! We hope you find it helpful and enjoyable.
50 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Age Wizard - An Age Calculator</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" type="image/x-icon" href="/assets/AgeWizard.jpg">
10 |     <meta name="google-site-verification" content="iNzSj2wvdEOVu1PtrK5FfEiu_teOG2LQn5i3kg-xozQ" />
11 | 
12 | </head>
13 | <body>
14 | <div class="container">
15 |     <div class="calculator">
16 |         <h1><span> Age Wizard </span></h1>
17 |         
18 |         
19 |         <div class="input-box">
20 |             <input type="date" id="date">
21 |             <button onclick="calculateAge()">Calculate Age</button>
22 |         </div>
23 |         <p id="result"></p>
24 |     </div>
25 | </div>
26 | 
27 | <script>
28 | let userInput = document.getElementById("date") 
29 | userInput.max = new Date().toISOString().split("T")[0];
30 | let result = document.getElementById("result");
31 | 
32 |    
33 |     function calculateAge(){
34 |         let birthDate = new Date(userInput.value);
35 |         let d1 = birthDate.getDate();
36 |         let m1 = birthDate.getMonth() +  1;
37 |         let y1 = birthDate.getFullYear();
38 | 
39 |         let today = new Date();
40 |         let d2 = today.getDate();
41 |         let m2 = today.getMonth() + 1;
42 |         let y2 = today.getFullYear();
43 | 
44 |         let d3,m3,y3;
45 |         y3 = y2 - y1;
46 | 
47 |         if(m2 >= m1){
48 |             m3 = m2 - m1;
49 | 
50 |         }else{
51 | 
52 |             y3--;
53 |             m3 = 12 + m2 - m1;
54 |         }
55 | 
56 |         if(d2 >= d1){
57 |             d3 = d2 - d1;
58 |         }else{
59 |             m3--;
60 |             d3 = getDaysInMonth(y1, m1) + d2 - d1;
61 |         }
62 |         if(m3<0){
63 |             m3 = 11;
64 |             y3--;
65 |         }
66 |         result.innerHTML=`You are <span>${y3}</span> Years, <span>${m3}</span> Months, <span>${d3}</span> Days Old`;
67 |         
68 |     }
69 |     
70 | 
71 |     function getDaysInMonth(year, month){
72 |         return new Date(year, month, 0).getDate();
73 |     }
74 | 
75 | 
76 | </script>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: 'Poppins', sans-serif;
  5 |     box-sizing: border-box;
  6 | }
  7 | 
  8 | .container {
  9 |     width: 100%;
 10 |     min-height: 100vh;
 11 |     background: linear-gradient(135deg, #4203a9, #90bafc);
 12 |     color: #ffff76;
 13 |     padding: 10px;
 14 | }
 15 | 
 16 | .calculator {
 17 |     width: 100%;
 18 |     max-width: 600px;
 19 |     margin: 10% auto;
 20 | }
 21 | 
 22 | .calculator h1 {
 23 |     font-size: 60px;
 24 | }
 25 | 
 26 | .input-box {
 27 |     background: rgba(255, 255, 255, 0.3);
 28 |     border-radius: 10px;
 29 |     margin: 40px 0;
 30 |     padding: 35px;
 31 |     display: flex;
 32 |     align-items: center;
 33 | }
 34 | 
 35 | .input-box input {
 36 |     flex: 1;
 37 |     margin-right: 20px;
 38 |     padding: 14px 20px;
 39 |     border: 0;
 40 |     outline: 0;
 41 |     font-size: 18px;
 42 |     border-radius: 5px;
 43 |     position: relative;
 44 | }
 45 | 
 46 | .input-box button {
 47 |     background: #ffff76;
 48 |     border: 0;
 49 |     outline: 0;
 50 |     padding: 15px 30px;
 51 |     border-radius: 5px;
 52 |     font-weight: bold;
 53 |     color: #333;
 54 |     cursor: pointer;
 55 |     transition: background-color 0.3s;
 56 | }
 57 | 
 58 | .input-box button:hover {
 59 |     background-color: #ffd700;
 60 | }
 61 | 
 62 | .input-box input::-webkit-calendar-picker-indicator {
 63 |     top: 0;
 64 |     left: 0;
 65 |     right: 0;
 66 |     bottom: 0;
 67 |     width: auto;
 68 |     height: auto;
 69 |     position: absolute;
 70 |     background-position: calc(100% - 10px);
 71 |     background-size: 30px;
 72 |     cursor: pointer;
 73 | }
 74 | 
 75 | #result {
 76 |     font: 20px;
 77 | }
 78 | 
 79 | #result span {
 80 |     color: #ffff76;
 81 | }
 82 | 
 83 | /* Media Queries */
 84 | 
 85 | @media only screen and (max-width: 600px) {
 86 |     .calculator {
 87 |         margin: 20% auto;
 88 |     }
 89 | 
 90 |     .calculator h1 {
 91 |         font-size: 40px;
 92 |     }
 93 | 
 94 |     .input-box {
 95 |         flex-direction: column;
 96 |         align-items: flex-start;
 97 |         padding: 20px;
 98 |     }
 99 | 
100 |     .input-box input {
101 |         margin-bottom: 20px;
102 |     }
103 | 
104 |     .input-box button {
105 |         width: 100%;
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------