From c9dc1875b33f4ee3eccc46fe3fb4b02fb6d17837 Mon Sep 17 00:00:00 2001 From: Huzaifa Azim Date: Thu, 22 Feb 2024 17:11:09 +0500 Subject: [PATCH 1/2] UI enhancement --- index.html | 162 +++++++++++++++++++++-------------------------------- main.js | 5 +- style.css | 72 ++++++++++++++++++++---- 3 files changed, 129 insertions(+), 110 deletions(-) diff --git a/index.html b/index.html index 5b04aa2..c434296 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,11 @@ - - - - - - - - - - - Age Calculator app - - - - + + + Age Calculator App + -
@@ -47,73 +13,73 @@

Age Calculator

- - + +

-
+
-

Years:

-

Months:

-

Weeks:

-

Days:

-

Age In

-

Milliseconds:

-

Seconds:

-

Minutes:

-

Hours:

-
-

Days - Hours - Minutes - Seconds

+
+

Your Age

+

Time from your birth

+

years, months, weeks, days

+ + + +
+
+
+
+

Life Milestones

+

Retirement Age:

+

Half-Life:

+

Age 18:

+

Age 21:

+

Age 30:

+
+
+

Age In

+

Hours:

+

Minutes:

+

Seconds:

+

Milliseconds:

+
+
+
-
-

Life Milestones

-

Retirement Age:

-

Half-Life:

-

Age 18:

-

Age 21:

-

Age 30:

- -
-
- + + - - \ No newline at end of file + diff --git a/main.js b/main.js index 1dd0a95..10ceb74 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,9 @@ function calculateAge() { let userDate = document.getElementById('birthdate').value if (userDate == NaN || userDate == '') {  - return alert('Enter a valid date of birth. You may have not entered a complete date or entered a non-existent date information.')  + document.getElementById('error').style.display = 'block' + document.getElementById('error').textContent = 'Enter a valid date of birth. You may have not entered a complete date or entered a non-existent date information.' + return } const birthdate = new Date(userDate) const currentDate = new Date() @@ -19,6 +21,7 @@ function calculateAge() { return } // but if the birthdate is less than the current date, calculate the difference and display the result + document.getElementById('resultSection').style.display = 'block' document.getElementById('result').style.display = 'block' const ageInMilliseconds = currentDate - birthdate const millisecondsInYear = 1000 * 60 * 60 * 24 * 365.25 diff --git a/style.css b/style.css index d9d92d5..4b69cc4 100644 --- a/style.css +++ b/style.css @@ -5,8 +5,9 @@ body { } .container { - max-width: 400px; + /* max-width: 600px; */ margin: 0 auto; + width: 700px; padding: 20px; background-color: #000000; border-radius: 10px; @@ -15,6 +16,13 @@ body { border-color: aliceblue; } +#error{ + background-color: #dc143c; + border-radius: 5px; + padding : 10px; + display: none; +} + h1 { color: white; } @@ -55,19 +63,21 @@ button:hover { margin-top: 20px; } -#result h2{ - border-bottom: 1px ridge #2B39CC -} -#milestones { - background-color: #333; - border: 1px solid #444; +#yourAgeContainer, #ageInContainer,#milestonesContainer, #nextBirthday, #owner-section{ + background-color: #242424; border-radius: 5px; - margin-top: 20px; - padding: 10px; - text-align: left; + padding : 10px; + margin : 10px 0px; } +.ageInHours{ + float:right +} + + + + #milestones h2 { font-size: 18px; color: #fff; @@ -108,11 +118,17 @@ footer p { } .owner-info { + padding: 30px; + height:300px; text-align: left; } - +.info{ + float: left; +} .social-feed { margin-top: 10px; + width: 400px; + float: right; } .social-feed a { @@ -129,3 +145,37 @@ footer p { height: 100px; border-radius: 50%; } + +#nextBirthdayDays, + #nextBirthdayHours, + #nextBirthdayMinutes, + #nextBirthdaySeconds { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: #fff; + margin: 5px; + } + .nextBirthdayResults{ + display: none; + } + + body { + display: flex; + flex-direction: column; + min-height: 100vh; + } + .container { + flex: 1; + } + footer { + margin-top: auto; + } + + p{ + font-size: 16px; + } + + h2{ + font-size: 25px; + } \ No newline at end of file From 2c2e7351ab417d448563c16c097f7c57b81948db Mon Sep 17 00:00:00 2001 From: Huzaifa Azim Date: Fri, 23 Feb 2024 11:47:23 +0500 Subject: [PATCH 2/2] added meta tags --- index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c434296..337599f 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,12 @@ - - + + + + + + Age Calculator App