Hallo, liebe Entwickler! Heute freue ich mich, ein Projekt vorzustellen, das ich kürzlich abgeschlossen habe: einen Altersrechner. Dieses Projekt ermöglicht es Benutzern, ihr genaues Alter anhand ihres Geburtsdatums zu berechnen und das Ergebnis in einer übersichtlichen und benutzerfreundlichen Oberfläche bereitzustellen. Es ist eine großartige Möglichkeit, die Arbeit mit JavaScript zu üben, insbesondere mit Datums- und Uhrzeitfunktionen, und gleichzeitig etwas Praktisches zu erstellen.
Der Altersrechner soll Benutzern eine einfache Möglichkeit bieten, ihr aktuelles Alter in Jahren, Monaten und Tagen herauszufinden. Benutzer geben einfach ihr Geburtsdatum ein und auf Knopfdruck wird ihr Alter angezeigt. Dieses Projekt ist perfekt für Entwickler, die ihre Fähigkeiten im Umgang mit Daten und beim Erstellen interaktiver Webanwendungen verbessern möchten.
Hier ein kurzer Blick auf die Projektstruktur:
Age-Calculator/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
Öffnen Sie das Projektverzeichnis:
cd Age-Calculator
Führen Sie das Projekt aus:
Die Datei index.html enthält die Struktur der Webseite, einschließlich des Eingabeformulars und des Abschnitts, in dem das berechnete Alter angezeigt wird. Unten finden Sie einen Ausschnitt des HTML-Codes:
<!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>
Die style.css-Datei enthält Stile, die sicherstellen, dass die Webseite optisch ansprechend und reaktionsfähig ist. Hier sind einige wichtige Stile:
* {
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;
}
Die Datei script.js verwaltet die Altersberechnungslogik und aktualisiert das Ergebnis auf der Webseite. Unten ist ein Ausschnitt des JavaScript-Codes:
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);
Sie können sich hier die Live-Demo des Altersrechners ansehen.
Die Erstellung dieses Altersrechners war eine lohnende Erfahrung, die es mir ermöglichte, mein Verständnis für die Arbeit mit Datumsangaben und die Erstellung interaktiver Webanwendungen zu vertiefen. Ich hoffe, dass Sie dieses Projekt nützlich und aufschlussreich für Ihre eigene Lernreise finden. Fühlen Sie sich frei, den Code zu erkunden und ihn an Ihre Bedürfnisse anzupassen. Viel Spaß beim Codieren!
Dieses Projekt wurde durch den Bedarf an einem einfachen und effektiven Tool zur Altersberechnung inspiriert.
Das obige ist der detaillierte Inhalt vonErstellen einer Website zur Altersberechnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
