JavaScript Days Converter | Convert Age In Days

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to convert user age into days using JavaScript.

Video Tutorial Of JavaScript Days Converter:

Source Code:

index.html

<!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>Age In Days</title>
    <!-- CSS File Link -->
    <link rel="stylesheet" href="/statics/style.css">
    <!-- Font Cdn Link -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>

<body>
    <div class="container">
        <h2>Your Age In Days</h2>
        <div class="input-box">
            <input type="number" class="age-number" id="years" placeholder="Enter you birth year">
            <i class="fa fa-calendar-o icon"></i>
        </div>
        <div class="box">
            <button class="btn" onclick="ageInDays()">Click Here</button>
            <button class="btn-primary" onclick="reset()">Reset</button>
        </div>
        <h1 class="message" id="message"></h1>
    </div>
    <script src="/statics/script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

.container {
    background-color: #fff;
    width: 500px;
    padding: 25px;
    margin: 100px auto;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 50%);
    border-radius: 10px;
    text-align: center;
}

h2 {
    background-color: #fcfcfc;
    color: #21cdd3;
    font-size: 24px;
    padding: 10px;
    margin-bottom: 8px;
    text-align: center;
    border: 1px dashed #21cdd3;
}

.input-box {
    width: 100%;
    margin-top: 30px;
    position: relative;
}

.age-number {
    padding: 14px 10px 14px 50px;
    width: 100%;
    background-color: #fcfcfc;
    border: 1px dashed #21cdd3;
    outline: none;
    letter-spacing: 1px;
    transition: 0.3s;
    border-radius: 3px;
    color: #333;
}

.input-box .icon {
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    color: #333;
    background-color: #f1f1f1;
    border-radius: 2px 0 0 2px;
    transition: 0.3s;
    font-size: 20px;
    pointer-events: none;
    border: 1px dashed #21cdd3;
    border-right: none;
}

.input-box .age-number:focus {
    -webkit-box-shadow: 0 0 2px 1px #21cdd3;
    -moz-box-shadow: 0 0 2px 1px #21cdd3;
    box-shadow: 0 0 2px 2px #21cdd3;
    border: 1px solid #21cdd3;
}

.age-number:focus+.icon {
    background-color: #21cdd3;
    color: #fff;
    border-right: 1px solid #21cdd3;
    transition: 1s;
}

.box {
    display: flex;
    padding: 10px;
    margin: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    background-color: #21cdd3;
    color: #fff;
    font-size: 20px;
    padding: 10px 10px;
    margin: 5px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}

.btn:hover {
    background-color: #27dde4;
}

.btn-primary {
    background-color: #FF6363;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #e06a6a;
}

.message{
    margin: 10px auto;
    padding: 10px;
}

script.js

function ageInDays() {
  const d = new Date();
  let year = d.getFullYear();

  var birthYear = document.getElementById("years").value;
  var bYear = (year - birthYear) * 365;
  var message = document.getElementById("message");

  message.textContent = "🎉You are " + bYear + " " + "days old.";
  message.style.color = "#21cdd3";
}
 
function reset() {
  document.getElementById("message").textContent = "";
  document.getElementById("years").value = "";
}

Sagar Developer

JavaScript Days Converter | Convert Age In Days

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

JavaScript Days Converter | Convert Age In Days

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form