Code für Altersabfrage im Code Editor
JavaScripts zur Berechnung des Alters und Datumsbegrenzung
Bitte gebe deinen Geburtstag unten ein.
Geburtstag:
Für Erklärungen zum hier verwendeten Mobirise Popup-Fenster schaut euch bitte mein Tutorial hier an.
Für Erklärungen zur der hier verwendeten Bootstrap-Offcanvas-Sidebar schaut euch bitte mein Tutorial hier an.
Schaut euch auch diese Variante an , bei der der wählbare Zeitraum auf plus/minus 1 Jahr oder diese Variante , die auf plus/minus 1 Monat begrenzt ist. Ich habe unten diese Beispiele eingebaut. Um die Zeitspanne der Jahre oder Monate zu erweitern, müsst ihr lediglich im Skript die eindeutig erkennbaren Variablen minDate und maxDate nach euren Wünschen anpassen.
Diese Skripte wurden alle von der künstlichen Intelligenz ChatGPT erstellt. Ihr könnt den Quelltext gerne kopieren und verwenden. Klickt dazu mit der rechten Maustaste auf die entsprechende Beispielseite und kopiert den Inhalt.
Dieses JavaScript habe ich ebenfalls von der künstlichen Intelligenz ChatGPT erstellen lassen und etwas angepasst in Mobirise eingebaut. Hierfür habe ich ChatGPT folgende Anweisung erteilt:
Bitte erstelle ein JavaScript mit Eingabefeld Datum und Datepicker für den Geburtstag und berechne das Alter.
ChatGPT hat daraufhin in weniger als 3 Sekunden eine vollständig fertige HTML-Seite mit Eingabefeld und JavaScript erstellt.
Das Skript kopiert ihr in die Seiteneinstellungen in den Bereich "Inside <head> code":
<!-- Age calculation JavaScript created by ChatGPT -->
<script>
function calculateAge() {
const birthdate = document.getElementById('birthdate').value;
if (!birthdate) {
alert("Bitte ein Geburtsdatum eingeben.");
return;
}
const birthDate = new Date(birthdate);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDifference = today.getMonth() - birthDate.getMonth();
// Check if the birthday has already passed this year or is yet to come
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
document.getElementById('result').innerText = `Das Alter ist: ${age} Jahre`;
}
</script>
Um die Abfrage mit dem Datepicker und der Anzeige basierend auf der ID anzuzeigen, fügt den folgenden Code in einen Mobirise-Block ein. Hier habe ich einen einfachen Textblock aus der Rubrik "Article" verwendet. Siehe auch den Screenshot unten, in dem ihr zusätzlich etwas CSS für das Eingabefeld und den Button sehen könnt.
<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
Bitte gebe deinen Geburtstag unten ein.<br><br>
<!-- Choose a date and enter in input field -->
<b>Geburtstag:</b><br><br>
<input class="form-control" type="date" id="birthdate"><br>
<button class="btn btn-primary" type="submit" onclick="calculateAge()">Alter berechnen</button> <br><br>
<span class="result" id="result"></span>
</p>
Code für Altersabfrage im Code Editor
Hier ist nur ein Datum von plus/minus einem Monat wählbar.
Datum wählen:
Um den Quelltext und das JavaScript dieses Beispiels zu sehen und zu kopieren, klicke mit der rechten Maustaste auf die Originaldatei , die von ChatGPT generiert wurde oder auch auf diese Textdatei zur Ansicht des generierten Codes. Der Einbau in Mobirise erfolgt auf die gleiche Weise wie beim oben beschriebenen Skript zur Altersabfrage.
Hier ist nur ein Datum von plus/minus einem Jahr wählbar.
Datum wählen:
Um den Quelltext und das JavaScript dieses Beispiels zu sehen und zu kopieren, klicke mit der rechten Maustaste auf die Originaldatei , die von ChatGPT generiert wurde oder auch auf diese Textdatei zur Ansicht des generierten Codes. Der Einbau in Mobirise erfolgt auf die gleiche Weise wie beim oben beschriebenen Skript zur Altersabfrage.
