diff --git a/Calculators/Age-Calculator/Age-Calculator.css b/Calculators/Age-Calculator/Age-Calculator.css index 9fed544e3..870ef791f 100644 --- a/Calculators/Age-Calculator/Age-Calculator.css +++ b/Calculators/Age-Calculator/Age-Calculator.css @@ -14,12 +14,20 @@ justify-content: center; } -#main { +#main { background-color: white; width: 60%; border: 2px solid blue; - border-radius: 25px; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); + margin-top: 20px; + margin-bottom: 20px; +} +#main:hover { + border-color: #19248d; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + transition: border-color 0.3s, box-shadow 0.3s; } #heading{ @@ -30,8 +38,22 @@ margin-bottom: 2.5vmax; } -#heading h1{ - font-size: 1.5vmax; +#heading h1 { + font-size: 2em; + color: #333; + text-align: center; + text-transform: uppercase; + margin-bottom: 20px; + animation: slideInFromLeft 1s ease-in-out; +} + +@keyframes slideInFromLeft { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0); + } } #oneone{ @@ -75,17 +97,7 @@ padding-right: 1vmax; } - -#onetwo button{ - padding: 0.7vmax; - font-size: 0.8vmax; - text-align: center; - border-radius: 0.8vmax; - border-color: rgb(255, 123, 0); - background-color: rgb(40, 155, 249); - cursor: pointer; -} - + #twomain{ margin-top: 3vmax; margin-bottom: 3vmax; @@ -100,4 +112,63 @@ } #twotwo h2{ font-size: 1.3vmax; -} \ No newline at end of file +} + +/* css for button */ +#onetwo button { + padding: 0.7em 1.5em; + font-size: 1em; + text-align: center; + border-radius: 0.5em; + border: none; + background-color: rgb(40, 155, 249); + color: white; + cursor: pointer; + transition: background-color 0.3s; +} + +#onetwo button:hover { + background-color: #277eae; +} + + + +/* css for the alert */ +.custom-alert { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + display: none; + width: 90%; + max-width: 400px; +} + +.alert-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +#alert-message { + margin: 0; +} + +#close-alert { + background-color: #f5c6cb; + color: #721c24; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +} + +#close-alert:hover { + background-color: #f8d7da; +} diff --git a/Calculators/Age-Calculator/Age-Calculator.html b/Calculators/Age-Calculator/Age-Calculator.html index 6341b56ad..f5002308e 100644 --- a/Calculators/Age-Calculator/Age-Calculator.html +++ b/Calculators/Age-Calculator/Age-Calculator.html @@ -4,6 +4,7 @@ Age Calculator + @@ -17,7 +18,7 @@
- +
@@ -48,6 +49,12 @@

- 0 Seconds

+
+
+

+ +
+
diff --git a/Calculators/Age-Calculator/Age-Calculator.js b/Calculators/Age-Calculator/Age-Calculator.js index 2ba4c8b9a..2a436c145 100644 --- a/Calculators/Age-Calculator/Age-Calculator.js +++ b/Calculators/Age-Calculator/Age-Calculator.js @@ -1,22 +1,30 @@ -// This Function is used to take realtime date and time from system. -function updatetill(){ +// This Function is used to take realtime date and time from the system. +function updatetill() { const currentDatetime = new Date(); const year = currentDatetime.getFullYear(); - const month = String(currentDatetime.getMonth() + 1).padStart(2, '0'); - const day = String(currentDatetime.getDate()).padStart(2, '0'); - const hours = String(currentDatetime.getHours()).padStart(2, '0'); - const minutes = String(currentDatetime.getMinutes()).padStart(2, '0'); + const month = String(currentDatetime.getMonth() + 1).padStart(2, "0"); + const day = String(currentDatetime.getDate()).padStart(2, "0"); + const hours = String(currentDatetime.getHours()).padStart(2, "0"); + const minutes = String(currentDatetime.getMinutes()).padStart(2, "0"); const formattedDatetime = `${year}-${month}-${day}T${hours}:${minutes}`; document.getElementById("ip2").value = formattedDatetime; } -// When the webpage reloads , the current time get updated automatically +// When the webpage reloads, the current time gets updated automatically window.onload = function () { updatetill(); + setDefaultDOB(); // Call the function to set the default DOB when the page loads }; -// This funtion is used to calculate actual age using given inputs +// Function to set the default value for the date of birth input field +function setDefaultDOB() { + const currentYear = new Date().getFullYear(); + const defaultDOB = `${currentYear}-01-01T00:00`; + document.getElementById("ip1").value = defaultDOB; +} + +// This function is used to calculate the actual age using given inputs function calculateage() { const birthDateInput = document.getElementById("ip1").value; const currentDateInput = document.getElementById("ip2").value; @@ -25,30 +33,54 @@ function calculateage() { const month = currentDatetime.getMonth() + 1; const day = currentDatetime.getDate(); console.log(day); - - // Here we check if user don't give any input , it will not work further anymmore. - if (birthDateInput === "" || currentDateInput === "" || !birthDateInput || !currentDateInput || !birthDateInput.trim() || !currentDateInput.trim()) { - alert("Please Enter a Valid Date/Time !"); + + // Here we check if user doesn't give any input, it will not work further anymore. + if ( + birthDateInput === "" || + currentDateInput === "" || + !birthDateInput || + !currentDateInput || + !birthDateInput.trim() || + !currentDateInput.trim() + ) { + showAlert("Please Enter a Valid Date/Time !"); return; } - + // Getting data that user submitted to it const userip = new Date(birthDateInput); const birthYear = userip.getFullYear(); const monthip = userip.getMonth() + 1; - + const ageInMilliseconds = currentDatetime - userip; const fyear = Math.floor(ageInMilliseconds / (365.25 * 24 * 60 * 60 * 1000)); - const remainingMilliseconds = ageInMilliseconds % (365.25 * 24 * 60 * 60 * 1000); - const fmonth = Math.floor(remainingMilliseconds / (30.44 * 24 * 60 * 60 * 1000)); + const remainingMilliseconds = + ageInMilliseconds % (365.25 * 24 * 60 * 60 * 1000); + const fmonth = Math.floor( + remainingMilliseconds / (30.44 * 24 * 60 * 60 * 1000) + ); const fmonth1 = 12 * fyear + fmonth; - - document.getElementById("op1").innerHTML = "Age = " + fyear + " Years " + fmonth + " Months"; + + document.getElementById("op1").innerHTML = + "Age = " + fyear + " Years " + fmonth + " Months"; document.getElementById("op2").innerHTML = "~ " + fmonth1 + " Months"; - + var timeDifference = Math.abs(currentDatetime - userip); - - // If user give data/time of future , it will show 0 in all fields. + + // custom alert function: + function showAlert(message) { + const alertBox = document.getElementById("custom-alert"); + const alertMessage = document.getElementById("alert-message"); + alertMessage.innerText = message; + alertBox.style.display = "block"; + + const closeButton = document.getElementById("close-alert"); + closeButton.addEventListener("click", function () { + alertBox.style.display = "none"; + }); + } + + // If the user gives a date/time of the future, it will show 0 in all fields. if (currentDatetime < userip) { timeDifference = 0; document.getElementById("op1").innerHTML = "Age = 0 Years 0 Months"; @@ -59,29 +91,30 @@ function calculateage() { document.getElementById("op5").innerHTML = "- 0 Minutes"; document.getElementById("op6").innerHTML = "- 0 Seconds"; document.getElementById("photo").src = "error.svg"; + showAlert("Please enter a valid date!"); return; } - + const fday = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); - + document.getElementById("op3").innerHTML = "- " + fday + " Days"; - + const fweeks = (fday / 7).toFixed(1); - + document.getElementById("op7").innerHTML = "~ " + fweeks + " Weeks"; - + const fhours = Math.floor(timeDifference / (1000 * 60 * 60)); - + document.getElementById("op4").innerHTML = "- " + fhours + " Hours"; - + const fminute = Math.floor(timeDifference / (1000 * 60)); - + document.getElementById("op5").innerHTML = "- " + fminute + " Minutes"; - + const fsecond = Math.floor(timeDifference / 1000); - + document.getElementById("op6").innerHTML = "- " + fsecond + " Seconds"; - + // Here we just check for age group so that we can show images according to it. if (fyear < 5 && fyear >= 0) { document.getElementById("photo").src = "child1.svg";