├── README.md ├── result.png ├── container.png ├── index (1).html ├── script.js ├── readme.md └── style (1).css /README.md: -------------------------------------------------------------------------------- 1 | # Age-calculator -------------------------------------------------------------------------------- /result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sowndhar2004/Age-calculator/HEAD/result.png -------------------------------------------------------------------------------- /container.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sowndhar2004/Age-calculator/HEAD/container.png -------------------------------------------------------------------------------- /index (1).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Age Calculator 9 | 10 | 11 |
12 |

13 |

Enter the DOB in format : (MM/DD/YYYY)

14 | 15 | 16 |
17 |
18 |

19 |
20 | 22 | 23 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let currDate= document.getElementById("currDate"); 2 | let dateOfBirth = document.querySelector("#DOB"); 3 | const CalcAge= document.getElementById("CalcAge"); 4 | const displayAge= document.getElementById("displayAge"); 5 | const Age= document.getElementById("age"); 6 | var today = new Date(); 7 | currDate.innerText=`Today's Date is : ${today.toLocaleDateString('en-US')}`; 8 | 9 | CalcAge.addEventListener("click",()=>{ 10 | var birthDate = new Date(dateOfBirth.value); 11 | var age = today.getFullYear() - birthDate.getFullYear(); 12 | var m = today.getMonth() - birthDate.getMonth(); 13 | if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { 14 | age = age - 1; 15 | } 16 | displayAge.style.visibility="visible"; 17 | Age.innerText=`You are ${age} years old.` 18 | }); 19 | 20 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome 🖐 to the Age Calculator 3 | It is a simple Javascript project which calculates our age in years. 4 | 5 | ## Default view 6 | ![Default View](container.png) 7 | ![Default View](result.png) 8 | 9 | ## 💻Tech Stack 10 |
11 | 12 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 13 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 14 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 15 | 16 |
17 | 18 | ### How to use: 19 | 20 | --- 21 | 22 | - Download or clone the repository 23 | 24 | ``` 25 | git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git 26 | ``` 27 | 28 | - Go to the directory 29 | - Run the index.html file 30 | - Enter your DOB and find age.. 31 | 32 |
33 | 34 | ## Happy Coding! -------------------------------------------------------------------------------- /style (1).css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing:border-box; 5 | font-family:cursive; 6 | } 7 | 8 | .container{ 9 | display:flex; 10 | width:600px; 11 | margin:auto; 12 | margin-top:10%; 13 | margin-bottom:10%; 14 | align-items:center; 15 | justify-content:center; 16 | flex-direction:column; 17 | background-color:darkslateblue; 18 | box-shadow:8px 8px black; 19 | color:white; 20 | padding:5% 0%; 21 | } 22 | 23 | #currDate{ 24 | font-size:40px; 25 | margin:20px; 26 | font-weight:bold; 27 | } 28 | 29 | input{ 30 | font-size:20px; 31 | padding:15px; 32 | margin:20px; 33 | text-align:center; 34 | border-radius:20px; 35 | border:1px solid yellow; 36 | cursor:pointer; 37 | } 38 | 39 | button{ 40 | font-size:20px; 41 | padding:10px 20px; 42 | border-radius:10px; 43 | border:none; 44 | background-color:yellow; 45 | color:black; 46 | margin:20px; 47 | text-transform: uppercase; 48 | font-weight:bold; 49 | cursor:pointer; 50 | } 51 | 52 | button:hover{ 53 | background-color:white; 54 | color:blue; 55 | } 56 | 57 | #displayAge{ 58 | display:flex; 59 | align-items:center; 60 | justify-content:center; 61 | width:620px; 62 | height:480px; 63 | background-color:rgb(228, 91, 91); 64 | border-radius:30px; 65 | position:absolute; 66 | top:19%; 67 | left:30%; 68 | visibility: hidden; 69 | } 70 | 71 | #age{ 72 | color:white; 73 | font-size:50px; 74 | margin:20px; 75 | font-weight:bold; 76 | } 77 | --------------------------------------------------------------------------------