<body>
<!-- header section begins -->
<section>
<header class="header">
<h1> Age based list management</h1>
<p class="lead">
Build an app that takes users info (name and age) and put them first in a general list(users). In the process, verifies if user is an adult or a minor, then put them in separate lists(adults and minors) and displays the adults and minors list in the browser.</p>
<p class="lead"> In a real world case, this is good for when your app is gerenally for all ages but only allows to sell to its adults users. This way you can send info only to minors that are just for them, vase versa.</p>
</header>
</section>
<!-- header section ends -->
<!-- form and lists section begins -->
<section>
<div class="container">
<!-- form begins-->
<form id="userForm">
<label for="name">Username:
<input type="text" id="name" class="form-control" placeholder="Enter username" required></label>
<label for="birthdate">Birthdate:
<input type="date" id="birthdate" class="form-control" required></label>
<button type="submit">Add Person</button>
</form>
<!-- forms ends -->
<!-- adults and minors list container -->
<div class="lists-container">
<!-- adults list begins-->
<div class="lists-flex">
<div class="adults-div">
<div class="adults-list-title">
<h2 id="ad">Adults List</h2>
<p id="adults-message" style="color: red;"></p>
</div>
<ol id="adults-list"></ol>
<button id="sort-adults">Sort List A-Z</button>
</div>
<!-- adults list ends -->
<!-- minors list begins-->
<div class="minors-div">
<div class="minors-list-title">
<h2 id="mn">Minors List:</h2>
<p id="minors-message" style="color: red;"></p>
</div>
<ol id="minors-list"></ol>
<button id="sort-minors">Sort List A-Z</button>
</div>
<!-- minors list ends -->
</div>
</div>
</div>
</section>
<!-- form and lists section ends -->
</body>*,
::before,
::after {
box-sizing: border-box;
margin: 0;
}
body {
font-family: arial, sans-serif;
}
.header {
padding: 2rem 1rem;
background-color: #222;
}
h1,
.lead {
color: white;
max-width: 70%;
margin-bottom: 1rem;
line-height: 1.5rem;
}
h1 {
line-height: 2rem;
}
#minors-message,
#adults-message {
font-weight: 1rem;
max-width: 100%;
}
.container {
display: flex;
width: 100%;
}
#userForm {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 1rem;
width: 30%;
}
label {
font-size: 1.3rem;
}
.lists-container {
display: flex;
flex-direction: column;
width: 70%;
gap: 1rem;
padding: 2rem 1rem;
}
.lists-flex {
display: flex;
gap: 1rem;
width: 100%;
margin-top: 1.6rem;
}
.adults-div,
.minors-div {
width: 50%;
}
#sort-adults,
#sort-minors {
display: block;
width: 100%;
margin-top: 1rem;
}
.adults-list-title,
.minors-list-title,
ol {
border: 1px solid #222;
padding: 1rem;
}
.adults-list-title,
.minors-list-title {
border-bottom: 0;
background-color: #ddd;
}
li {
margin-left: 1rem;
}
.form-control {
display: block;
width: 100%;
min-height: 2.3rem;
border: 1px solid #222;
color: #222;
padding: 0.325rem;
font-size: 1rem;
}
input[type="date"] {
padding: 10px;
border: 1px solid #222;
font-size: 16px;
max-width: 100%;
min-width: 95%;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="date"]:focus {
border-color: #222;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}
input[type="date"]::webkit-calendar-picker-indicator {
filter: invert(1);
}
button {
padding: 0.7rem;
font-size: 1.2rem;
color: white;
background-color: #333;
border: none;
&:hover {
background-color: #222;
}
}
@media (max-width: 576px) {
.container {
flex-direction: column;
}
input[type="date"] {
min-width: 95%;
}
#userForm {
width: 100%;
}
.lists-container {
flex-direction: column;
width: 100%;
}
.lists-flex {
flex-direction: column;
}
.adults-div,
.minors-div {
width: 100%;
}
}
@media (max-width: 860px) {
.container {
flex-direction: column;
}
input[type="date"] {
min-width: 95%;
}
#userForm {
width: 100%;
}
.lists-container {
width: 100%;
}
.adults-div,
.minors-div {
width: 100%;
}
h1,
p,
.lead {
color: white;
max-width: 100%;
}
}
const users = [];
const adults = [];
const minors = [];
document
.getElementById("userForm")
.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent form submission
mngList(); // Call mngList function
});
document.getElementById("sort-adults").addEventListener("click", function () {
adults.sort((a, b) => a.name.localeCompare(b.name));
displayAdults(); // Update the display after sorting
});
document.getElementById("sort-minors").addEventListener("click", function () {
minors.sort((a, b) => a.name.localeCompare(b.name));
displayMinors(); // Update the display after sorting
});
function mngList() {
const name = document.getElementById("name").value.trim();
const birthdate = new Date(document.getElementById("birthdate").value);
// Calculate age based on birthdate
const age = calculateAge(birthdate);
// Check for valid input
if (name === "" || isNaN(birthdate.getTime())) {
document.getElementById("adults-message").textContent =
"Please enter a valid name and birthdate.";
return; // Exit if input is invalid
}
addPerson(name, age);
displayAdults(); // Call displayAdults to update the adults list
displayMinors(); // Call displayMinors to update the minors list
}
function calculateAge(birthdate) {
const today = new Date();
let age = today.getFullYear() - birthdate.getFullYear();
const monthDifference = today.getMonth() - birthdate.getMonth();
// Adjust age if the birthdate hasn't occurred yet this year
if (
monthDifference < 0 ||
(monthDifference === 0 && today.getDate() < birthdate.getDate())
) {
age--;
}
return age;
}
function addPerson(name, age) {
users.push({ name: name, age: age });
document.getElementById("name").value = ""; // Reset the form
document.getElementById("birthdate").value = ""; // Reset the form
// Clear previous messages
document.getElementById("adults-message").textContent = "";
document.getElementById("minors-message").textContent = "";
// Verify if the user is an adult or minor
if (age >= 18) {
if (adults.length < 3) {
adults.push({ name: name, age: age });
} else {
document.getElementById("adults-message").textContent =
"Adults list is full: You cannot add more than 3 adults.";
}
} else {
if (age < 0) {
document.getElementById("minors-message").textContent =
"Age must be a positive number for minors.";
} else if (minors.length < 3) {
minors.push({ name: name, age: age });
} else {
document.getElementById("minors-message").textContent =
"Minors list is full: You cannot add more than 3 minors.";
}
}
}
function displayAdults() {
const list = document.getElementById("adults-list");
list.innerHTML = ""; // Clear the list
// Create loop through adults array
for (const item of adults) {
const listItem = document.createElement("li");
listItem.textContent = item.name;
list.appendChild(listItem);
}
}
function displayMinors() {
const list = document.getElementById("minors-list"); // Ensure correct ID
list.innerHTML = ""; // Clear the list
// Create loop through minors array
for (const item of minors) {
const listItem = document.createElement("li");
listItem.textContent = item.name;
list.appendChild(listItem);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.