Créer un site Web de calcul d'âge-tutoriel CSS-php.cn

Créer un site Web de calcul d'âge

王林

Libérer： 2024-08-10 06:44:03

original

872 Les gens l'ont consulté

Building a Age Calculator Website

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !