Age Calculator Code Free with HTML, CSS, & JS

Age Calculator Code Free – Ever wondered how old you are in days, months, and even seconds? Look no further! With this free tutorial, you’ll learn how to build a simple yet functional age calculator using HTML, CSS, and JavaScript.

Contents

Age Calculator What you'll need:

This project is perfect for beginners who want to practice their web development skills and create something interactive. Let’s dive in!

Age Calculator

Enter your birthdate:

What you'll need:

A text editor (like Visual Studio Code, Sublime Text, etc.)
Basic understanding of HTML, CSS, and JavaScript

Steps:

Create the HTML Structure:

Start by creating an HTML file named index.html. This file will contain the basic structure of your age calculator. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="style.css">
  <title>Age Calculator</title>
</head>
<body>
  <div class="container">
    <h1>Age Calculator</h1>
    <label for="birthdate">Enter your birthdate:</label>
    <input type="date" id="birthdate" required>
    <button onclick="calculateAge()">Calculate Age</button>
    <button onclick="clearForm()">Clear</button>
    <p id="result"></p>
    <div id="share-icons"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

This code defines the basic structure of the page, including a heading, a form with a date input and a button, and a section to display the result.

Style the Calculator with CSS:

Create a CSS file named style.css to add some styling to your calculator. Here's an example:

body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: #333;
}

label {
  margin-right: 10px;
}

input {
  padding: 8px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#result {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
}

#share-icons {
  margin-top: 20px;
}

#share-icons a {
  font-size: 24px;
  margin-right: 10px;
  color: #333;
}

#share-icons a:hover {
  color: #4caf50;
}

This code styles the elements of your calculator, making it look more presentable.

Add the JavaScript Functionality:

Finally, create a JavaScript file named script.js to add the interactivity. Here's the code:

function calculateAge() {
  var birthdate = document.getElementById("birthdate").value;
  var birthdateObj = new Date(birthdate);
  var currentDate = new Date();

  var years = currentDate.getFullYear() - birthdateObj.getFullYear();
  var months = currentDate.getMonth() - birthdateObj.getMonth();
  var days = currentDate.getDate() - birthdateObj.getDate();

  // Adjust for negative months or days
  if (days < 0) {
    months--;
    days += new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
  }
  if (months < 0) {
    years--;
    months += 12;
  }

  var ageString = years + " years, " + months + " months, and " + days + " days.";
  var shareLink = "https://usesofai.com/age-calculator-code-free/?age=" + encodeURIComponent(ageString);

  document.getElementById("result").innerText = "Your age is: " + ageString;

  // Add share icons to the page
  var shareIconsContainer = document.getElementById("share-icons");
  shareIconsContainer.innerHTML = "<p>Share your age:</p>";
  
  var socialMediaIcons = [
    '<a href="https://www.facebook.com/sharer/sharer.php?u=' + shareLink + '" target="_blank"><i class="fab fa-facebook"></i></a>',
    '<a href="https://twitter.com/intent/tweet?url=' + shareLink + '" target="_blank"><i class="fab fa-twitter"></i></a>',
    '<a href="https://www.linkedin.com/shareArticle?url=' + shareLink + '" target="_blank"><i class="fab fa-linkedin"></i></a>',
    // Add more social media icons as needed
  ];

  shareIconsContainer.innerHTML += socialMediaIcons.join("");
}

function clearForm() {
  document.getElementById("birthdate").value = "";
  document.getElementById("result").innerText = "";
  document.getElementById("share-icons").innerHTML = "";
}

Run the Calculator:

Save all the files (index.html, style.css, and script.js) in the same folder. Open the index.html file in your web browser to see your age calculator in action!

Customization:

You can further customize the calculator by adding features like:
- Displaying age in months and days as well as years.
- Adding input fields for time of birth for more precise calculations.
- Implementing different themes and designs.

Remember, this is a basic example, and you can build upon it and add more features based on your needs and creativity.

Age Calculator Code Free with HTML, CSS, & JS

Age Calculator

What you'll need:

Leave a Reply Cancel reply

Latest AI Tools Review