Skip to content

Commit

Permalink
Age calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
umgu committed Jan 15, 2022
1 parent be2394e commit ad173f4
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 2 deletions.
94 changes: 94 additions & 0 deletions Age Calculator/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
*{
padding:0px;
margin: 0px;
box-sizing: border-box;
}

body{
background-color: black;
}

#title-section {
background-color: white;
margin-top: 1rem;
}

#title-section h1 {
font-size: 2rem;
}

#title-section p{
color:tomato;
font-size: 1.2rem;
padding: 0.7rem;
}

#content-section {
background-color: rgb(77, 78, 77);
padding: 2rem 1rem;
}

#content {
border: 2px solid white;
padding: 3rem 5rem;
background-color: tomato;
}

select, input{
width: 30%;
height: 3rem;
margin: 0 1%;
font-size: 1.5rem;
border-radius: 10px;
}

h3{
margin: 1%;
font-size: 1.5rem;
}

#present-date {
margin: 1.5rem 0;
}

#calculate-btn {
background-color: green;
}

#reset-btn {
background-color: gold;
}

#result{
width: 75%;
height: 13rem;
border: 1px solid white;
border-radius: 10px;
background-color: rgb(77, 78, 77);
margin: 1%;
padding: 1rem;
}

span {
font-size: 1.5rem;
}



/* utility classes */
.text-center{
text-align: center;
}

.full-width {
width: 100%;
}

.btn {
width: 100px;
padding: 10px;
font-size: 18px;
margin: 10px;
border-radius: 10px;
}

49 changes: 49 additions & 0 deletions Age Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<section id="title-section">
<h1 class="text-center">Age Calculator</h1>
<p class="text-center">Calculate age from date of birth and current date</p>
</section>
<section id="content-section">
<div id="content">
<div id="date-of-birth" class="full-width">
<h3>Date of Birth:</h3>
<select id="birth-month">
</select>
<select id="birth-date">
</select>
<input type="number" id="birth-year">
</div>
<div id="present-date" class="full-width">
<h3>Age at the date of:</h3>
<select id="current-month">
</select>
<select id="current-date">
</select>
<input type="number" id="current-year">
</div>
<div style="display: flex; flex-wrap: wrap;">
<button id="calculate-btn" class="btn">Calculate</button>
<button id="reset-btn" class="btn">Reset</button>
</div>
<div id="result-content">
<h3>Age result:</h3>
<section id="result">

</section>
</div>
</div>

</section>
</body>
</html>
58 changes: 58 additions & 0 deletions Age Calculator/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
document.addEventListener("DOMContentLoaded", () => {
function setMonthSelector(months, selector) {
months.forEach( (month) => {
let option = document.createElement("option");
option.setAttribute("value", month);
option.innerHTML=month;
selector.append(option);
});
}

function setDateSelector(selector) {
let date=1;
while( date<=31 ) {
let option = document.createElement("option");
option.setAttribute("value", date);
option.innerHTML=date++;
selector.append(option);
}
}

const months = {"January":1, "February":2, "March":3, "April":4, "May":5, "June":6, "July":7, "August":8, " September":9, "October":10, "November":11, "December":12};
const birthMonthSelector = document.getElementById("birth-month");
setMonthSelector(Object.keys(months), birthMonthSelector);
const currentMonthSelector = document.getElementById("current-month");
setMonthSelector(Object.keys(months), currentMonthSelector);

const birthDateSelector = document.getElementById("birth-date");
setDateSelector(birthDateSelector);
const currentDateSelector = document.getElementById("current-date");
setDateSelector(currentDateSelector);

const birthYear = document.getElementById("birth-year");
const birthMonth = document.getElementById("birth-month");
const birthDate = document.getElementById("birth-date");

const currentYear = document.getElementById("current-year");
const currentMonth = document.getElementById("current-month");
const currentDate = document.getElementById("current-date");

const result = document.getElementById("result");
const calculateBtn = document.getElementById("calculate-btn");

calculateBtn.addEventListener("click", ()=> {
const y = Math.abs(currentYear.value - birthYear.value);
const m = Math.abs(months[currentMonth.value] - months[birthMonth.value]);
const d = Math.abs(currentDate.value - birthDate.value);
result.innerHTML = `<span>${y} Years, ${m} months, ${d} Days</span><br>
<span>= ${ ( y + m/12 + d/(30*12) ).toFixed(2)} Years</span><br>
<span>= ${ ( y*12 + m + d/30 ).toFixed(2)} Months</span><br>
<span>= ${ ( y*52 + m*30/7 + d/7 ).toFixed(2)} Weeks</span><br>
<span>= ${ ( y*365 + m*30 + d)} Days</span>`;
})

const resetBtn = document.getElementById("reset-btn");
resetBtn.addEventListener("click", () => {
location.reload(true);
})
})
4 changes: 2 additions & 2 deletions Responsive Resume Using CSS Grid/resume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
<title>Document</title>
<link rel="stylesheet" href="./static/css/resume.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css">
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
</head>

<body>
<main class="main-content">
Expand Down

0 comments on commit ad173f4

Please sign in to comment.