From 8e71b089d80194e5f57e4603b6c1b6c6c6ce2e37 Mon Sep 17 00:00:00 2001 From: Lakshmikar378 Date: Thu, 21 Mar 2024 09:41:30 +0530 Subject: [PATCH] project 17 completed --- README.md | 5 ++ project-17_Age_calculator/css/style.css | 68 ++++++++++++++++++++++ project-17_Age_calculator/index.html | 21 +++++++ project-17_Age_calculator/script/script.js | 28 +++++++++ 4 files changed, 122 insertions(+) create mode 100644 project-17_Age_calculator/css/style.css create mode 100644 project-17_Age_calculator/index.html create mode 100644 project-17_Age_calculator/script/script.js diff --git a/README.md b/README.md index a754a81..1b559b1 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,11 @@ This repository contains a collection of frontend projects.Each project is built Pricing card Click Here + + 17 + Age Calculator + Click Here + diff --git a/project-17_Age_calculator/css/style.css b/project-17_Age_calculator/css/style.css new file mode 100644 index 0000000..4f23fb1 --- /dev/null +++ b/project-17_Age_calculator/css/style.css @@ -0,0 +1,68 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +body{ + padding: 20px; + font-family: "montserrat", sans-serif; + background-color: #f7f7f7; +} +.container{ + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + padding: 20px; + max-width: 600px; + margin:50px auto 0; + border-radius: 5px; +} +h1{ + font-size: 36px; + text-align: center; + margin-top: 0; + margin-bottom: 20px; +} +.form{ + display: flex; + flex-direction: column; + align-items: center; +} +label{ + font-weight: bold; + margin-bottom: 10px; +} +input{ + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + width: 100%; + max-width: 300px; +} +button{ + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.3s ease; +} +button:hover{ + background-color: #0062cc; +} +#result{ + margin-top: 20px; + font-size: 24px; + font-weight: bold; +} +@media only screen +and (min-device-width: 320px) +and (max-device-width: 480px) { + body{ + background-color: bisque; + } + .container{ + max-width: 300px; + } +} \ No newline at end of file diff --git a/project-17_Age_calculator/index.html b/project-17_Age_calculator/index.html new file mode 100644 index 0000000..7376895 --- /dev/null +++ b/project-17_Age_calculator/index.html @@ -0,0 +1,21 @@ + + + + + + Age Calculator + + + +
+

Age Calculator

+
+ + + +

your age is 21 years old

+
+
+ + + \ No newline at end of file diff --git a/project-17_Age_calculator/script/script.js b/project-17_Age_calculator/script/script.js new file mode 100644 index 0000000..a202d0d --- /dev/null +++ b/project-17_Age_calculator/script/script.js @@ -0,0 +1,28 @@ +const btnEl = document.getElementById('btn'); +const birthdayEl = document.getElementById('birthday'); +const resultEl = document.getElementById('result'); + +function calculateAge() { + const birthdayValue = birthdayEl.value; + if (birthdayValue === " ") { + alert("please enter your birthday"); + } else { + const age = getAge(birthdayValue); + resultEl.innerText = `your age is ${age} ${age > 1 ? 'years' : 'years'} old`; + } +} + +function getAge(birthdayValue) { + const currentDate = new Date(); + const birthdayDate = new Date(birthdayValue); + let age = currentDate.getFullYear() - birthdayDate.getFullYear(); + const month = currentDate.getMonth() - birthdayDate.getMonth(); + + if (month < 0 || (month == 0 && currentDate.getDate() + < birthdayDate.getDate())) + { + age--; + } + return age; +} +btnEl.addEventListener('click', calculateAge); \ No newline at end of file