Age Calculator App

In this project you will learn form validation, conditional logic and DOM manipulation.

In this Age Calculator App:

Day input is number between 1 to 31.

Month input is number between 1 to 12.

Year input is number between 1900 and current year.

If the input is current year than month should be either current month or less than current month.

If the inputs are words and not within the specified number range, error is displayed.

HTML

<div class="container">
  <form>
    <div class="date_input">
      <div class="input">
        <label>Day</label>
        <input type="text" placeholder="DD" name="day">
        <span class="error"></span>
      </div>
      <div class="input">
        <label>Month</label>
        <input type="text" placeholder="MM" name="month">
        <span class="error"></span>
      </div>
      <div class="input">
        <label>Year</label>
        <input type="text" placeholder="YY" name="year">
        <span class="error"></span>
      </div>
    </div>
    <div class="divider"></div>
    <div class="display_year">- - years </div>
    <div class="display_month">- - <span>months</span></div>
    <div class="button_section">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    background-color: #EBF0F6;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 70%;
    padding: 15px;
    background-color: #fff;
    border-radius: 55px;
    border-bottom-right-radius: 195px;
    box-shadow: 5px 10px 9px #ccc;
}

form {
    width: 80%;
    margin: 0 auto;
}

.date_input {
    display: flex;
}

.input {
    margin-left: 15px;
}

input[type=text] {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border-color: #000000;
    outline: none;
}

::placeholder {
    font-size: 28px;
}

.error {
    color: red;
    font-style: italic;
}

.divider {

    margin-top: 50px;
    border: 1px solid #eee;
}

.display_year,
.display_month,
.display_day {
    color: #5A3A9E;
    font-size: 3rem;
    font-weight: 900;
}

.display_year,
.display_month,
.display_day {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    color: #000;
    font-size: 3rem;
}

.button_section {
    margin-top: 25px;
}

button {
    padding: 15px 35px;
    font-size: 1.2rem;
    color: #fff;
    background-color: #5A3A9E;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}

JS

const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const errorSpans = document.querySelectorAll('.error')
const displayYear = document.querySelector('.display_year');
const displayMonth = document.querySelector('.display_month');
const dateVar = new Date();
let month = dateVar.getMonth();
const date = {}

const inputForm = document.querySelector('form');
inputForm.addEventListener('submit', formValidation);

function formValidation(e) {
    e.preventDefault();
    let errorCount = inputs.length;
    let year = dateVar.getFullYear();
    labels.forEach(function (e) {
        e.style.color = "#000";
    })
    errorSpans.forEach(function (e) {
        e.innerHTML = "";
    })
    inputs.forEach(function (e) {
        e.style.borderColor = "#000";
        let number = +e.value;
        if (isNaN(number)) {
            displayErr(e, "must be a number")
        }
        let inputName = e.getAttribute("name");
        if (inputName === "day") {
            if (number > 31 || number < 1) {
                console.log("e", e);
                displayErr(e, "must be a valid day")
            } else {
                date.day = +e.value;
                errorCount -= 1;
            }
        }
        if (inputName === "month") {
            if (number > 12 || number < 1) {
                displayErr(e, "must be a valid month")
            } else {
                date.month = +e.value;
                errorCount -= 1;
            }
        }
        if (inputName === "year") {
            if (number > year || number < 1900) {
                displayErr(e, "must be a valid year")
            } else {
                date.year = +e.value;
                errorCount -= 1;
            }
        }
    })
    if (errorCount === 0) {
        displayResult(date.day, date.month, date.year)
    }
}

function displayErr(inputField, text) {
    inputField.style.borderColor = "red";
    let errorLabel = inputField.previousElementSibling;
    errorLabel.style.color = "red";
    let errorSpan = inputField.nextElementSibling;
    errorSpan.innerHTML = text;
}

function displayResult(d, m, y) {
    console.log("month")
    console.log('month', m)
    console.log('day', d)
    let year = dateVar.getFullYear();
    let month = dateVar.getMonth() + 1;
    if (year === y) {
        if (month >= m) {
            displayYear.innerHTML = `${year - y} - - years`;
            displayMonth.innerHTML = `${month - m} - - months`;
        } else if (month < m) {
            inputs.forEach(function (e) {
                if (e.getAttribute("name") == "month") {
                    displayErr(e, "must be a valid month")
                }
            })
        }
    } else if (year > y) {
        if (month > m) {
            displayMonth.innerHTML = `${month - m} - - months`;
            displayYear.innerHTML = `${year - y} - - years`;
        } else if (month < m) {
            displayMonth.innerHTML = `${12 - (m - month)} - - months`;
            displayYear.innerHTML = `${(year - y) - 1} - - years`;
        } else if (month === m) {
            displayMonth.innerHTML = `${month - m} - - months`;
            displayYear.innerHTML = `${year - y} - - years`;
        }
    }

}