From 6dc4782f06fe09dd9ad8c88ffea864d887f6ed78 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 02:16:44 +0530 Subject: [PATCH 1/6] created template for age calculator --- Source-Code/AgeCalculator/index.html | 13 +++++++++++++ Source-Code/AgeCalculator/script.js | 0 Source-Code/AgeCalculator/style.css | 0 3 files changed, 13 insertions(+) create mode 100644 Source-Code/AgeCalculator/index.html create mode 100644 Source-Code/AgeCalculator/script.js create mode 100644 Source-Code/AgeCalculator/style.css diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html new file mode 100644 index 0000000..d903295 --- /dev/null +++ b/Source-Code/AgeCalculator/index.html @@ -0,0 +1,13 @@ + + + + + + Age Calculator + + + + + + + \ No newline at end of file diff --git a/Source-Code/AgeCalculator/script.js b/Source-Code/AgeCalculator/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/AgeCalculator/style.css b/Source-Code/AgeCalculator/style.css new file mode 100644 index 0000000..e69de29 From acb9009fde2e286e3c05ac6a9a2e64b7e475f634 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 02:53:09 +0530 Subject: [PATCH 2/6] create container to display age --- Source-Code/AgeCalculator/index.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html index d903295..bcd17d9 100644 --- a/Source-Code/AgeCalculator/index.html +++ b/Source-Code/AgeCalculator/index.html @@ -7,7 +7,17 @@ - +
+
+

+

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

+ + +
+
+

+
+
- \ No newline at end of file + From 269e827f23168edd7aac34a3d672d623be4b4c91 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 02:53:22 +0530 Subject: [PATCH 3/6] Add styles --- Source-Code/AgeCalculator/style.css | 79 +++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/Source-Code/AgeCalculator/style.css b/Source-Code/AgeCalculator/style.css index e69de29..f492f48 100644 --- a/Source-Code/AgeCalculator/style.css +++ b/Source-Code/AgeCalculator/style.css @@ -0,0 +1,79 @@ +*{ + 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; +} \ No newline at end of file From b296466ab575372f29363b526a39a7c6fb7432c8 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 02:54:45 +0530 Subject: [PATCH 4/6] Add functionalities --- Source-Code/AgeCalculator/script.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/Source-Code/AgeCalculator/script.js b/Source-Code/AgeCalculator/script.js index e69de29..b386593 100644 --- a/Source-Code/AgeCalculator/script.js +++ 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--; + } + + displayAge.style.visibility = "visible"; + ageText.innerText = `You are ${age} years old.`; + }); +}); From 0f51fc49b9b0346aae0ef6ed6445426ddc77a2f1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 02:58:09 +0530 Subject: [PATCH 5/6] solve linter errors --- Source-Code/AgeCalculator/index.html | 24 ++--- Source-Code/AgeCalculator/script.js | 24 ++--- Source-Code/AgeCalculator/style.css | 129 ++++++++++++++------------- 3 files changed, 90 insertions(+), 87 deletions(-) diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html index bcd17d9..39f9756 100644 --- a/Source-Code/AgeCalculator/index.html +++ b/Source-Code/AgeCalculator/index.html @@ -1,23 +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 index b386593..c7cc5d4 100644 --- a/Source-Code/AgeCalculator/script.js +++ b/Source-Code/AgeCalculator/script.js @@ -1,26 +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"); +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")}`; + currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`; - calcAgeButton.addEventListener("click", () => { + 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()) + monthDifference < 0 + || (monthDifference === 0 && today.getDate() < birthDate.getDate()) ) { - age--; + age -= 1; } - displayAge.style.visibility = "visible"; + 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 index f492f48..a1fdad4 100644 --- a/Source-Code/AgeCalculator/style.css +++ b/Source-Code/AgeCalculator/style.css @@ -1,79 +1,82 @@ -*{ - margin:0; - padding:0; - box-sizing:border-box; - font-family:cursive; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: cursive; } -.center{ - display:flex; - justify-content:center; - align-items:center; - height:100vh; + +.center { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } -.container{ - display:flex; - width:600px; - /* margin:auto; + +.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%; + 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; +#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; +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 { + 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); +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; +#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; -} \ No newline at end of file +#age { + color: white; + font-size: 50px; + margin: 20px; + font-weight: bold; +} From 80b2387a9e5993bfa0a491e9b4be0bbdc285e888 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 21 Jul 2024 03:01:48 +0530 Subject: [PATCH 6/6] Update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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)