Lädt...


🔧 Building a Age Calculator Website


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Introduction

Hello, fellow developers! Today, I'm excited to share a project I recently completed: an Age Calculator. This project allows users to calculate their exact age based on their date of birth, providing the result in a clear and user-friendly interface. It's a great way to practice working with JavaScript, particularly with date and time functions, while building something practical.

Project Overview

The Age Calculator is designed to give users an easy way to find out their current age in years, months, and days. Users simply enter their date of birth, and with the click of a button, their age is displayed. This project is perfect for developers who want to improve their skills in handling dates and building interactive web applications.

Features

  • Date Input: Users can enter their date of birth using a date picker for accurate input.
  • Age Calculation: The application calculates the user's exact age, down to the number of days.
  • Responsive Design: The tool is designed to be responsive, ensuring it works smoothly on different devices and screen sizes.

Technologies Used

  • HTML: Used for structuring the content on the webpage.
  • CSS: Applied for styling the webpage and ensuring it is responsive across various devices.
  • JavaScript: Implemented for handling the age calculation logic and updating the DOM.

Project Structure

Here's a quick look at the project structure:

Age-Calculator/
├── index.html
├── style.css
└── script.js
  • index.html: Contains the HTML structure of the webpage.
  • style.css: Holds the CSS styles, including responsive design rules.
  • script.js: Manages the dynamic aspects of the page using JavaScript.

Installation

To get started with the project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
    
  2. Open the project directory:

    cd Age-Calculator
    
  3. Run the project:

    • You can either run it on a local server or simply open the index.html file in a web browser.

Usage

  1. Open the website in a web browser.
  2. Enter your date of birth using the date picker input.
  3. Click the "Calculate Age" button to see your exact age displayed on the screen.

Code Explanation

HTML

The index.html file contains the structure of the webpage, including the input form and the section where the calculated age is displayed. Below is a snippet of the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Age Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="header">
    <h1>Age Calculator</h1>
  </div>

  <div class="container">
    <div class="form">
      <p id="birth">Enter your date of birth</p>
      <input type="date" id="birthday" name="birthday">
      <button id="btn">Calculate Age</button>
      <p id="result">Your age is 21 years old</p>
    </div>
  </div>

  <div class="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
</body>
</html>

CSS

The style.css file contains styles that ensure the webpage is visually appealing and responsive. Here are some key styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Manrope", sans-serif;
  width: 100%;
  height: 100vh;
  background: #2962ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.header {
  margin-bottom: 80px;
  text-align: center;
}
.container {
  background: black;
  color: white;
  width: 600px;
  height: 300px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  font-weight: bold;
  margin: 20px;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0062cc;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}


.footer {
  margin: 70px;
  text-align: center;
}
.footer p{
  font-size: 14px;
  font-weight: 400;
}

JavaScript

The script.js file manages the age calculation logic and updates the result on the webpage. Below is a snippet of the JavaScript code:

const btnE1 = document.getElementById("btn");
const birthE1 = document.getElementById("birthday");
const resultE1 = document.getElementById("result");

function calculateAge() {
  const birthdayValue = birthE1.value;
  if (birthdayValue === "") {
    alert("Please enter your birthday");
  } else {
    const age = getAge(birthdayValue);
    resultE1.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old.`;
  }
}

function getAge(birthdayValue) {
  const birthdayDate = new Date(birthdayValue);
  const currentDate = new Date();
  let age = currentDate.getFullYear() - birthdayDate.getFullYear();
  const month = currentDate.getMonth() - birthdayDate.getMonth();

  if (
    month < 0 ||
    (month === 0 && currentDate.getDate() < birthdayDate.getDate())
  ) {
    age--;
  }

  return age;
}

btnE1.addEventListener("click", calculateAge);

Live Demo

You can check out the live demo of the Age Calculator here.

Conclusion

Building this Age Calculator was a rewarding experience that allowed me to deepen my understanding of working with dates and building interactive web applications. I hope you find this project useful and insightful for your own learning journey. Feel free to explore the code and adapt it to your needs. Happy coding!

Credits

This project was inspired by the need for a simple and effective age calculation tool.

Author

...

🔧 Building a Age Calculator Website


📈 37.68 Punkte
🔧 Programmierung

🐧 Microsoft Calculator (UWP). Telemetry in a freaking calculator....


📈 28.47 Punkte
🐧 Linux Tipps

🪟 Is the best calculator on Android a port of the Windows Calculator?


📈 28.47 Punkte
🪟 Windows Tipps

🕵️ CVE-2024-8864 | composiohq composio up to 0.5.6 calculator.py Calculator code injection


📈 28.47 Punkte
🕵️ Sicherheitslücken

🔧 Step-By-Step Guide To Creating a Calculator App With HTML and JS (With Factor Calculator Example)


📈 28.47 Punkte
🔧 Programmierung

🕵️ CVE-2024-39173 | calculator-boilerplate 1.0 /routes/calculator.js eval input injection


📈 28.47 Punkte
🕵️ Sicherheitslücken

🔧 How To Create a Calculator Using HTML CSS & JavaScript | Simple Calculator in JavaScript


📈 28.47 Punkte
🔧 Programmierung

🔧 Age calculator


📈 23.84 Punkte
🔧 Programmierung

🔧 Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide


📈 23.84 Punkte
🔧 Programmierung

🔧 Build a Mortgage Calculator Website


📈 21.19 Punkte
🔧 Programmierung

🔧 Build a Loan Calculator Website


📈 21.19 Punkte
🔧 Programmierung

🔧 Build a Tip Calculator Website


📈 21.19 Punkte
🔧 Programmierung

🔧 Developing a Paycheck Calculator from Scratch and Integrating it into Your Website


📈 21.19 Punkte
🔧 Programmierung

⚠️ Nexthon Whois Website Value Calculator 1.5 SQL Injection


📈 21.19 Punkte
⚠️ PoC

⚠️ Nexthon Whois Website Value Calculator 1.5 SQL Injection


📈 21.19 Punkte
⚠️ PoC

🔧 Building a Calculator App with JavaScript: A Beginner's Guide


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a Calculator with HTML, CSS, and JavaScript


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a Custom Calculator with Dropdowns to Boost User Engagement on WordPress


📈 21.12 Punkte
🔧 Programmierung

🔧 React Calculator: Building Basic Arithmetic Operations with User-Friendly Interface


📈 21.12 Punkte
🔧 Programmierung

🔧 A Step Beyond Hello World: Building a Calculator App with ViewCode


📈 21.12 Punkte
🔧 Programmierung

🔧 Learn React by Building a Mortgage Calculator


📈 21.12 Punkte
🔧 Programmierung

🔧 Understanding Rust and Building a Simple Calculator API from Scratch


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a Simple Calculator with React


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a BMI Calculator with React


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a calculator using Flet with python


📈 21.12 Punkte
🔧 Programmierung

🔧 🚀 Day 15: Building Tip Calculator with Rect 🚀


📈 21.12 Punkte
🔧 Programmierung

🔧 Building an AWS Power Calculator Web Application


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a BMI Calculator with HTML, CSS, and JavaScript


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a Stylish Calculator with Cyclops UI: Quira Quest 15


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a Sleek C++ Calculator: Harnessing the Power of Modular Functions


📈 21.12 Punkte
🔧 Programmierung

🔧 [DAY 69-71] I started building a calculator using React and I failed


📈 21.12 Punkte
🔧 Programmierung

🔧 Building a BMI Calculator with Angular and Spring Boot


📈 21.12 Punkte
🔧 Programmierung

📰 Website Mirroring With HTTrack Website Copier| Website Hacking #2


📈 20.85 Punkte
📰 IT Security Nachrichten

matomo