Créer un site Web de calcul d'âge
Introduction
Bonjour, amis développeurs ! Aujourd'hui, je suis ravi de partager un projet que j'ai récemment terminé : un calculateur d'âge. Ce projet permet aux utilisateurs de calculer leur âge exact en fonction de leur date de naissance, fournissant le résultat dans une interface claire et conviviale. C'est un excellent moyen de s'entraîner à travailler avec JavaScript, en particulier avec les fonctions de date et d'heure, tout en créant quelque chose de pratique.
Aperçu du projet
Le Calculateur d'âge est conçu pour donner aux utilisateurs un moyen simple de connaître leur âge actuel en années, mois et jours. Les utilisateurs saisissent simplement leur date de naissance et, d'un simple clic, leur âge s'affiche. Ce projet est parfait pour les développeurs qui souhaitent améliorer leurs compétences dans la gestion des dates et la création d'applications Web interactives.
Caractéristiques
- Saisie de la date : les utilisateurs peuvent saisir leur date de naissance à l'aide d'un sélecteur de date pour une saisie précise.
- Calcul de l'âge : L'application calcule l'âge exact de l'utilisateur, jusqu'au nombre de jours.
- Conception réactive : l'outil est conçu pour être réactif, garantissant qu'il fonctionne correctement sur différents appareils et tailles d'écran.
Technologies utilisées
- HTML : utilisé pour structurer le contenu de la page Web.
- CSS : appliqué pour styliser la page Web et garantir sa réactivité sur différents appareils.
- JavaScript : Implémenté pour gérer la logique de calcul de l'âge et mettre à jour le DOM.
Structure du projet
Voici un aperçu rapide de la structure du projet :
Age-Calculator/ ├── index.html ├── style.css └── script.js
- index.html : Contient la structure HTML de la page Web.
- style.css : contient les styles CSS, y compris les règles de conception réactive.
- script.js : Gère les aspects dynamiques de la page à l'aide de JavaScript.
Installation
Pour démarrer le projet, suivez ces étapes :
-
Cloner le dépôt :
git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
Copier après la connexion -
Ouvrez le répertoire du projet :
cd Age-Calculator
Copier après la connexion -
Exécuter le projet :
- Vous pouvez l'exécuter sur un serveur local ou simplement ouvrir le fichier index.html dans un navigateur Web.
Usage
- Ouvrez le site Web dans un navigateur Web.
- Entrez votre date de naissance à l'aide du sélecteur de date.
- Cliquez sur le bouton « Calculer l'âge » pour voir votre âge exact affiché à l'écran.
Explication du code
HTML
Le fichier index.html contient la structure de la page Web, y compris le formulaire de saisie et la section où l'âge calculé est affiché. Ci-dessous un extrait du code HTML :
<!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
Le fichier style.css contient des styles qui garantissent que la page Web est visuellement attrayante et réactive. Voici quelques styles clés :
* {
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
Le fichier script.js gère la logique de calcul de l'âge et met à jour le résultat sur la page web. Vous trouverez ci-dessous un extrait du code JavaScript :
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);
Démo en direct
Vous pouvez consulter la démo en direct du calculateur d'âge ici.
Conclusion
Construire ce calculateur d'âge a été une expérience enrichissante qui m'a permis d'approfondir ma compréhension du travail avec les dates et de la création d'applications Web interactives. J'espère que vous trouverez ce projet utile et instructif pour votre propre parcours d'apprentissage. N'hésitez pas à explorer le code et à l'adapter à vos besoins. Bon codage !
Crédits
Ce projet a été inspiré par le besoin d'un outil de calcul de l'âge simple et efficace.
Auteur
-
Abhishek Gurjar
- Profil GitHub
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1666
14
1426
52
1328
25
1273
29
1255
24
Une comparaison des fournisseurs de formulaires statiques
Apr 16, 2025 am 11:20 AM
Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom
Apr 17, 2025 am 10:55 AM
Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves
Certains pratiques avec l'élément de dialogue HTML
Apr 16, 2025 am 11:33 AM
C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et
Forme de papier
Apr 16, 2025 am 11:24 AM
L'achat ou la construction est un débat classique de la technologie. Construire des choses vous-même peut être moins cher car il n'y a pas d'article de ligne sur votre facture de carte de crédit, mais
Où devrait «abonner au podcast» vers le lien?
Apr 16, 2025 pm 12:04 PM
Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:
C'est tout dans la tête: gérer la tête de document d'un site alimenté par réact avec un casque React
Apr 15, 2025 am 11:01 AM
Le chef de document n'est peut-être pas la partie la plus glamour d'un site Web, mais ce qui y va est sans doute tout aussi important pour le succès de votre site Web que son
Options pour héberger vos propres analyses non-javascript
Apr 15, 2025 am 11:09 AM
Il existe de nombreuses plates-formes d'analyse pour vous aider à suivre les données des visiteurs et d'utilisation sur vos sites. Peut-être plus particulièrement Google Analytics, qui est largement utilisé
