How to add stylish age calculator HTML, JAVASCRIPT,CSS code to blogger

How to add stylish age calculator HTML, JAVASCRIPT, and CSS code to blogger

In this post you learn how to add a stylish age calculator as an online tool to your Blogger site, you can use HTML, CSS, and JavaScript to create a visually appealing and functional age detector with these Blogger coding tips codes simple example steps:

Go to your Blogger dashboard.

Create a new HTML/JavaScript gadget where you want to display the age calculator.

Paste the following codes into the gadget:

CSS.

  <style>

    body {

      font-family: 'Arial', sans-serif;

      background-color: #f4f4f4;

      text-align: center;

      padding: 20px;

    }

    h2 {

      color: #333;

    }

    label {

      display: block;

      margin: 10px 0;

    }

    input {

      padding: 8px;

      margin: 5px;

      width: 60%;

    }

    button {

      padding: 10px;

      background-color: #4caf50;

      color: #fff;

      border: none;

      cursor: pointer;

    }

    button:hover {

      background-color: #45a049;

    }

    #result {

      margin-top: 20px;

      font-size: 18px;

      color: #333;

    }

  </style>

HTML;

  <title>Age Calculator</title>

  <h2>Age Calculator</h2>

  <label for="dob">Enter your date of birth:</label>

  <input type="date" id="dob">

  <br>

  <button onclick="calculateAge()">Calculate Age</button>

  <div id="result"></div>

JAVASCRIPT:

<script>

    function calculateAge() {

      var dob = document.getElementById('dob').value;

      var dobDate = new Date(dob);

      var today = new Date();

      var age = today.getFullYear() - dobDate.getFullYear();

      var monthDiff = today.getMonth() - dobDate.getMonth();

      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dobDate.getDate())) {

        age--;

      }

      document.getElementById('result').innerHTML = 'Your age is: ' + age + ' years';

    }

  </script>

These codes include HTML for the structure, CSS for styling, and JavaScript for the age calculation. You can customize the styles and layout according to your preferences by adjusting the CSS part.

DEMO