diff --git a/README.md b/README.md index 73ca3d1..da812fe 100644 --- a/README.md +++ b/README.md @@ -210,6 +210,17 @@ In order to run this project you need: +
  • +
    +Age Calculator +

    Age Calculator is a user-friendly tool built using HTML, CSS, and JavaScript. The Age Calculator project is a beginner-friendly web development project designed to help users calculate their age effortlessly. Users can input their date of birth and instantly see their age in years.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html new file mode 100644 index 0000000..39f9756 --- /dev/null +++ b/Source-Code/AgeCalculator/index.html @@ -0,0 +1,23 @@ + + + + + + Age Calculator + + + +
    +
    +

    +

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

    + + +
    +
    +

    +
    +
    + + + diff --git a/Source-Code/AgeCalculator/script.js b/Source-Code/AgeCalculator/script.js new file mode 100644 index 0000000..c7cc5d4 --- /dev/null +++ b/Source-Code/AgeCalculator/script.js @@ -0,0 +1,26 @@ +document.addEventListener('DOMContentLoaded', () => { + const currDate = document.getElementById('currDate'); + const dateOfBirth = document.querySelector('#DOB'); + const calcAgeButton = document.getElementById('CalcAge'); + const displayAge = document.getElementById('displayAge'); + const ageText = document.getElementById('age'); + const today = new Date(); + + currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`; + + calcAgeButton.addEventListener('click', () => { + const birthDate = new Date(dateOfBirth.value); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDifference = today.getMonth() - birthDate.getMonth(); + + if ( + monthDifference < 0 + || (monthDifference === 0 && today.getDate() < birthDate.getDate()) + ) { + age -= 1; + } + + displayAge.style.visibility = 'visible'; + ageText.innerText = `You are ${age} years old.`; + }); +}); diff --git a/Source-Code/AgeCalculator/style.css b/Source-Code/AgeCalculator/style.css new file mode 100644 index 0000000..a1fdad4 --- /dev/null +++ b/Source-Code/AgeCalculator/style.css @@ -0,0 +1,82 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: cursive; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + display: flex; + width: 600px; + + /* margin:auto; + margin-top:10%; + margin-bottom:10%; */ + align-items: center; + justify-content: center; + flex-direction: column; + background-color: rgb(169, 216, 80); + box-shadow: 8px 8px black; + color: white; + padding: 5% 0%; +} + +#currDate { + font-size: 30px; + margin: 20px; + font-weight: bold; +} + +input { + font-size: 20px; + padding: 15px; + margin: 20px; + text-align: center; + border-radius: 20px; + border: 1px solid yellow; + cursor: pointer; +} + +button { + font-size: 20px; + padding: 10px 20px; + border-radius: 10px; + border: none; + background-color: yellow; + color: black; + margin: 20px; + text-transform: uppercase; + font-weight: bold; + cursor: pointer; +} + +button:hover { + background-color: white; + color: rgb(169, 216, 80); +} + +#displayAge { + display: flex; + align-items: center; + justify-content: center; + width: 620px; + height: 490px; + background-color: rgb(91, 228, 141); + border-radius: 30px; + position: absolute; + visibility: hidden; +} + +#age { + color: white; + font-size: 50px; + margin: 20px; + font-weight: bold; +}