Skip to content

Commit

Permalink
FOR narania
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dweirdgemini
Dweirdgemini committed Oct 4, 2023
1 parent afaceda commit 61d50e8
Show file tree
Hide file tree
Showing 3 changed files with 350 additions and 32 deletions.
107 changes: 75 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">

<title>Frontend Mentor | Age calculator app</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.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=Poppins:ital,wght@0,400;1,800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<title>Frontend Mentor | Age calculator app</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>

Day
DD

Month
MM

Year
YYYY

-- years
-- months
-- days

<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<main>
<div class="container">
<div class="inputs">
<div class="day-input">
<label for="day" id="day-label">Day</label>
<input type="number" name="day" id="day" placeholder="DD" />
<span class="error-day">Must be a valid day</span>
</div>
<div class="month-input">
<label for="month" id="month-label">Month</label>
<input type="number" name="month" id="month" placeholder="MM" />
<span class="error-month">Must be a valid month</span>
</div>
<div class="year-input">
<label for="year" id="year-label">Year</label>
<input type="number" name="year" id="year" placeholder="YYYY" />
<span class="error-year">Must be in the past</span>
</div>
</div>
<div class="middle">
<div class="line"></div>
<button id="submitBtn" title="Submit" class="circle">
<img src="./assets/images/icon-arrow.svg" alt="submit arrow icon" />
</button>
</div>
<div class="results">
<div class="result">
<span id="years-result">--</span>
<i>years</i>
</div>
<div class="result">
<span id="months-result">--</span>
<i>months</i>
</div>
<div class="result">
<span id="days-result">--</span>
<i>days</i>
</div>
</div>
</div>
<footer>
Challenge by
<a
href="https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q"
target="_blank"
>Age Calculator App - Frontend Mentor</a
>. Coded by
<a href="https://www.frontendmentor.io/profile/jadilovic"
>Jasmin Adilovic</a
>.
</footer>
</main>
<script src="./index.js"></script>
</body>
</html>
111 changes: 111 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
let input = document.querySelectorAll('input');
let submitButton = document.getElementById('submitBtn');
let dayLabel = document.getElementById('day-label');
let dayInput = document.getElementById('day');
let errorDay = document.querySelector('.error-day');
let daysResult = document.getElementById('days-result');
let monthLabel = document.getElementById('month-label');
let monthInput = document.getElementById('month');
let errorMonth = document.querySelector('.error-month');
let monthsResult = document.getElementById('months-result');
let yearLabel = document.getElementById('year-label');
let yearInput = document.getElementById('year');
let errorYear = document.querySelector('.error-year');
let yearsResult = document.getElementById('years-result');
const inputValues = { day: '', month: '', year: '' };

const updateValue = (e) => {
inputValues[e.target.name] = Number(e.target.value);
};

input.forEach((element) => {
element.addEventListener('input', (e) => {
updateValue(e);
});
});

const isValidYear = (year) => {
const currentYear = new Date().getFullYear();
return year <= currentYear && year > 0;
};

const isValidMonth = (month) => {
return month <= 12 && month > 0;
};

const isValidDay = (year, month, day) => {
var lastDay = new Date(year, month, 0).getDate();
return day > 0 && day <= lastDay;
};

const calculateDifference = (year, month, day) => {
// Set the date in the past
const pastDate = new Date(year, month, day);
// Get today's date
const today = new Date();

// Calculate the difference between the two dates in milliseconds
const diffMilliseconds = today - pastDate;

// Convert the difference to years, months, and days
const diffYears = Math.floor(diffMilliseconds / (1000 * 60 * 60 * 24 * 365));
const diffMonths = Math.floor(
(diffMilliseconds % (1000 * 60 * 60 * 24 * 365)) /
(1000 * 60 * 60 * 24 * 30)
);
const diffDays = Math.floor(
(diffMilliseconds % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24)
);

yearsResult.textContent = diffYears;
monthsResult.textContent = diffMonths;
daysResult.textContent = diffDays;
};

submitButton.addEventListener('click', () => {
const validYear = isValidYear(inputValues.year);
const validMonth = isValidMonth(inputValues.month);
const validDay = isValidDay(
inputValues.year,
inputValues.month,
inputValues.day
);

if (!validDay) {
dayLabel.style.color = 'hsl(0, 100%, 67%)';
dayInput.style.border = '2px solid hsl(0, 100%, 67%)';
errorDay.style.opacity = 1;
} else {
dayLabel.style.color = 'hsl(0, 1%, 44%)';
dayInput.style.border = '2px solid hsl(0, 0%, 86%)';
errorDay.style.opacity = 0;
}

if (!validMonth) {
monthLabel.style.color = 'hsl(0, 100%, 67%)';
monthInput.style.border = '2px solid hsl(0, 100%, 67%)';
errorMonth.style.opacity = 1;
} else {
monthLabel.style.color = 'hsl(0, 1%, 44%)';
monthInput.style.border = '2px solid hsl(0, 0%, 86%)';
errorMonth.style.opacity = 0;
}

if (!validYear) {
yearLabel.style.color = 'hsl(0, 100%, 67%)';
yearInput.style.border = '2px solid hsl(0, 100%, 67%)';
errorYear.style.opacity = 1;
} else {
yearLabel.style.color = 'hsl(0, 1%, 44%)';
yearInput.style.border = '2px solid hsl(0, 0%, 86%)';
errorYear.style.opacity = 0;
}

if (validDay && validMonth && validYear) {
calculateDifference(
inputValues.year,
inputValues.month - 1,
inputValues.day
);
}
});
164 changes: 164 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
body {
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
margin: 0;
}

main {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1440px;
margin: 0 auto;
background-color: hsl(0, 0%, 94%);
height: 100vh;
}

.container {
width: 100%;
max-width: 41em;
min-width: 18em;
background-color: hsl(0, 0%, 100%);
padding: 3em;
margin: 0 2em;
border-radius: 2em 2em 12em 2em;
}

.inputs {
display: flex;
column-gap: 2em;
}

input[type='number'] {
padding: 10px 15px;
margin: 5px 0;
line-height: 1.5;
font-size: 1.5em;
color: black;
font-weight: 700;
border-radius: 0.4em;
border: 1px solid hsl(0, 0%, 86%);
background-color: hsl(0, 0%, 100%);
}

.day-input,
.month-input,
.year-input {
max-width: 9.3em;
min-width: 6.5em;
display: flex;
flex-direction: column;
}

.error-day,
.error-month,
.error-year {
color: hsl(0, 100%, 67%);
opacity: 0;
}

label {
font-size: 0.7em;
letter-spacing: 0.4em;
}

span {
font-size: 0.8em;
}

label,
::placeholder {
font-weight: 700;
text-transform: uppercase;
color: hsl(0, 1%, 44%);
}

.line {
margin-top: 2.5em;
border-bottom: 1px solid hsl(0, 0%, 86%);
}

.middle {
position: relative;
}

.circle {
height: 5em;
width: 5em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: hsl(259, 100%, 65%);
position: absolute;
top: -2.5em;
right: 0;
cursor: pointer;
border: none;
}

.result {
display: flex;
align-items: center;
color: hsl(259, 100%, 65%);
font-size: 2em;
font-weight: 800;
font-style: italic;
}

.result > span {
font-size: 2em;
font-weight: 800;
font-style: italic;
}

i {
color: black;
font-size: 2em;
font-weight: 800;
margin-left: 0.3em;
}

@media screen and (max-width: 670px) {
.container {
padding: 2em;
}
.inputs {
column-gap: 1em;
}
input[type='number'] {
font-size: 0.9em;
}
.day-input,
.month-input,
.year-input {
min-width: 3.5em;
}
.error {
font-size: 0.6em;
}
.line {
margin: 2em 0 4em 0;
}
.circle {
height: 4em;
width: 4em;
top: -2em;
right: calc(50% - 2em);
}
.result {
font-size: 1.5em;
}
}

footer {
position: absolute;
bottom: 0;
font-size: 1em;
text-align: center;
}
footer a {
color: hsl(228, 45%, 44%);
}

0 comments on commit 61d50e8

Please sign in to comment.