Einführung
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.
Projektübersicht
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.
Merkmale
-
Datumseingabe: Benutzer können ihr Geburtsdatum mithilfe einer Datumsauswahl eingeben, um eine genaue Eingabe zu ermöglichen.
-
Altersberechnung: Die Anwendung berechnet das genaue Alter des Benutzers bis hin zur Anzahl der Tage.
-
Responsives Design: Das Tool ist reaktionsfähig gestaltet, um sicherzustellen, dass es auf verschiedenen Geräten und Bildschirmgrößen reibungslos funktioniert.
Verwendete Technologien
-
HTML: Wird zur Strukturierung des Inhalts auf der Webseite verwendet.
-
CSS: Wird zum Gestalten der Webseite und zum Sicherstellen, dass sie auf verschiedenen Geräten reagiert.
verwendet
-
JavaScript: Implementiert für die Handhabung der Altersberechnungslogik und die Aktualisierung des DOM.
Projektstruktur
Hier ein kurzer Blick auf die Projektstruktur:
Age-Calculator/
├── index.html
├── style.css
└── script.js
Nach dem Login kopieren
-
index.html: Enthält die HTML-Struktur der Webseite.
-
style.css: Enthält die CSS-Stile, einschließlich responsiver Designregeln.
-
script.js: Verwaltet die dynamischen Aspekte der Seite mithilfe von JavaScript.
Installation
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd Age-Calculator
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Sie können es entweder auf einem lokalen Server ausführen oder einfach die Datei index.html in einem Webbrowser öffnen.
Verwendung
-
Öffnen Sie die Websitein einem Webbrowser.
-
Geben Sie Ihr Geburtsdatum einüber die Datumsauswahl-Eingabe.
-
Klicken Sie auf die Schaltfläche „Alter berechnen“, um Ihr genaues Alter auf dem Bildschirm anzuzeigen.
Code-Erklärung
HTML
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>
Nach dem Login kopieren
CSS
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;
}
Nach dem Login kopieren
JavaScript
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);
Nach dem Login kopieren
Live-Demo
Sie können sich hier die Live-Demo des Altersrechners ansehen.
Abschluss
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!
Credits
Dieses Projekt wurde durch den Bedarf an einem einfachen und effektiven Tool zur Altersberechnung inspiriert.
Autor
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!
