From 16af88fd43524d67ca4b115d96b9eb7ef8954e00 Mon Sep 17 00:00:00 2001 From: NIKITA Date: Thu, 8 Feb 2024 01:48:52 +0530 Subject: [PATCH 1/3] added styling and custom alerts --- Calculators/Age-Calculator/Age-Calculator.css | 103 +++++++++++++++--- .../Age-Calculator/Age-Calculator.html | 9 +- Calculators/Age-Calculator/Age-Calculator.js | 97 +++++++++++------ 3 files changed, 160 insertions(+), 49 deletions(-) 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"; From 92b8dc00cd428745e417e410e168291b4397231f Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 9 Feb 2024 00:30:07 +0530 Subject: [PATCH 2/3] Update Age-Calculator.css --- Calculators/Age-Calculator/Age-Calculator.css | 70 ++++++++++--------- 1 file changed, 36 insertions(+), 34 deletions(-) diff --git a/Calculators/Age-Calculator/Age-Calculator.css b/Calculators/Age-Calculator/Age-Calculator.css index 870ef791f..e0476353d 100644 --- a/Calculators/Age-Calculator/Age-Calculator.css +++ b/Calculators/Age-Calculator/Age-Calculator.css @@ -2,13 +2,12 @@ margin: 0; padding: 0; font-family: 'Lato', sans-serif; - } -#container{ +#container { width: 100%; height: 100vh; - background:linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); + background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); display: flex; align-items: center; justify-content: center; @@ -19,18 +18,18 @@ width: 60%; border: 2px solid blue; border-radius: 10px; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); - margin-top: 20px; - margin-bottom: 20px; + 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; + border-color: #19248d; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + transition: border-color 0.3s, box-shadow 0.3s; } -#heading{ +#heading { width: 100%; display: flex; justify-content: center; @@ -44,19 +43,20 @@ text-align: center; text-transform: uppercase; margin-bottom: 20px; - animation: slideInFromLeft 1s ease-in-out; + animation: slideInFromLeft 1s ease-in-out; } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } + 100% { transform: translateX(0); } } -#oneone{ +#oneone { display: flex; flex-direction: column; gap: 1vmax; @@ -64,18 +64,18 @@ justify-content: space-evenly; } -#onemain{ +#onemain { display: flex; align-items: center; justify-content: center; gap: 2vmax; } -#ip1name{ +#ip1name { font-size: 1vmax; } -#ip1{ +#ip1 { font-size: 0.9vmax; text-align: center; border-radius: 0.5vmax; @@ -84,11 +84,12 @@ padding-right: 1vmax; } -#ip2name{ + +#ip2name { font-size: 1vmax; } -#ip2{ +#ip2 { font-size: 0.9vmax; text-align: center; border-radius: 0.5vmax; @@ -97,8 +98,8 @@ padding-right: 1vmax; } - -#twomain{ + +#twomain { margin-top: 3vmax; margin-bottom: 3vmax; display: flex; @@ -106,34 +107,35 @@ justify-content: space-evenly; } -#twoone img{ +#twoone img { height: 15vmax; max-width: 80%; } -#twotwo h2{ + +#twotwo h2 { font-size: 1.3vmax; } -/* css for button */ +/* Button CSS */ + #onetwo button { padding: 0.7em 1.5em; - font-size: 1em; + font-size: 1em; text-align: center; - border-radius: 0.5em; + border-radius: 0.5em; border: none; - background-color: rgb(40, 155, 249); + background-color: rgb(40, 155, 249); color: white; cursor: pointer; transition: background-color 0.3s; } #onetwo button:hover { - background-color: #277eae; + background-color: #277eae; } +/* Css for the alert */ - -/* css for the alert */ .custom-alert { position: fixed; top: 50%; @@ -142,12 +144,12 @@ 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); + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: none; - width: 90%; - max-width: 400px; + width: 90%; + max-width: 400px; } .alert-content { @@ -164,7 +166,7 @@ background-color: #f5c6cb; color: #721c24; border: none; - padding: 10px 20px; + padding: 10px 20px; border-radius: 5px; cursor: pointer; } From 7f8ab00f5de9a7b6ba4a1ef3703980f2e062b53d Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 9 Feb 2024 00:30:38 +0530 Subject: [PATCH 3/3] Update Age-Calculator.html --- Calculators/Age-Calculator/Age-Calculator.html | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/Calculators/Age-Calculator/Age-Calculator.html b/Calculators/Age-Calculator/Age-Calculator.html index f5002308e..e41145e90 100644 --- a/Calculators/Age-Calculator/Age-Calculator.html +++ b/Calculators/Age-Calculator/Age-Calculator.html @@ -1,26 +1,32 @@ + Age Calculator - + - + +
-

Age Calculator

+
+

Age Calculator

+
- + - +
@@ -57,4 +63,5 @@

- 0 Seconds

+