Skip to content

Commit

Permalink
added styling and custom alerts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikitakandwal
Nikitakandwal committed Feb 7, 2024
1 parent 6f3aa8d commit 16af88f
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 49 deletions.
103 changes: 87 additions & 16 deletions Calculators/Age-Calculator/Age-Calculator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -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{
Expand Down Expand Up @@ -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;
Expand All @@ -100,4 +112,63 @@
}
#twotwo h2{
font-size: 1.3vmax;
}
}

/* 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;
}
9 changes: 8 additions & 1 deletion Calculators/Age-Calculator/Age-Calculator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Calculator</title>
<link rel="shortcut icon" type="image/x-icon" href="../../assets/images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
Expand All @@ -17,7 +18,7 @@

<div id="onemain">
<div id="oneone">
<label for="ip1" id="ip1name">DOB - <input type="datetime-local" name="ip1" id="ip1"></label>
<label for="ip1" id="ip1name">DOB - <input type="datetime-local" name="ip1" id="ip1" value="yyyy-01-01T00:00"></label>

<label for="ip2" id="ip2name">Till - &nbsp;&nbsp;&nbsp;&nbsp;<input type="datetime-local" name="ip2" id="ip2"></label>
</div>
Expand Down Expand Up @@ -48,6 +49,12 @@ <h2 id="op6">- 0 Seconds</h2>
</div>

</div>
<div id="custom-alert" class="custom-alert">
<div class="alert-content">
<p id="alert-message"></p>
<button id="close-alert">Close</button>
</div>
</div>
</body>
<script src="Age-Calculator.js"></script>
</html>
97 changes: 65 additions & 32 deletions Calculators/Age-Calculator/Age-Calculator.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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";
Expand All @@ -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";
Expand Down

0 comments on commit 16af88f

Please sign in to comment.