Einführung

Hallo, liebe Entwickler! Heute freue ich mich, ein Projekt vorzustellen, das ich kürzlich abgeschlossen habe: einenAltersrechner. 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

DerAltersrechnersoll 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

• 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:

1. Klonen Sie das Repository:
   

   git clone https://github.com/abhishekgurjar-in/Age-Calculator.git

   Nach dem Login kopieren

2. Öffnen Sie das Projektverzeichnis:
   

   cd Age-Calculator

   Nach dem Login kopieren

3. 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

1. Öffnen Sie die Websitein einem Webbrowser.
2. Geben Sie Ihr Geburtsdatum einmit der Datumsauswahl-Eingabe.
3. 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 ist ein Ausschnitt des HTML-Codes:

         
  
 
Age Calculator
 
 
 
 
Enter your date of birth
  Calculate Age 
Your age is 21 years old
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Die Datei style.css enthält Stile, die dafür sorgen, 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; }

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);

Live-Demo

Hier können Sie sich 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

• Abhishek Gurjar
  • GitHub-Profil

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!