Créer un site Web de convertisseur de poids-tutoriel CSS-php.cn

Créer un site Web de convertisseur de poids

WBOY

Libérer： 2024-08-18 06:32:32

original

905 Les gens l'ont consulté

Build a Weight Converter Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de vous présenter mon dernier projet : un Convertisseur de poids. Ce projet est un outil simple mais pratique qui aide les utilisateurs à convertir le poids des livres en kilogrammes. C'est un excellent moyen de pratiquer JavaScript, en particulier dans la gestion des entrées utilisateur, des calculs et de la manipulation DOM. Que vous débutiez avec JavaScript ou que vous recherchiez un projet amusant et rapide, ce convertisseur de poids est parfait pour vous.

Aperçu du projet

Le Convertisseur de poids est une application Web qui permet aux utilisateurs de saisir un poids en livres et d'obtenir le poids équivalent en kilogrammes. Ce projet montre comment travailler avec les entrées de formulaire, effectuer des calculs en JavaScript et mettre à jour dynamiquement le contenu de la page Web en fonction des entrées de l'utilisateur.

Caractéristiques

Gestion des entrées utilisateur : accepte les entrées de l'utilisateur en livres et les convertit en kilogrammes.
Validation : affiche des messages d'erreur pour les entrées non valides (par exemple, des valeurs non numériques ou négatives).
Calcul en temps réel : met à jour le résultat de la conversion immédiatement au fur et à mesure que l'utilisateur tape.
Conception réactive : la mise en page est conçue pour être réactive, offrant une expérience cohérente sur tous les appareils.

Technologies utilisées

HTML : Structure l'interface du convertisseur de poids.
CSS : style le convertisseur, y compris la mise en page réactive et la gestion des erreurs.
JavaScript : gère la validation des entrées utilisateur, la conversion du poids et les mises à jour du DOM.

Structure du projet

Voici un aperçu rapide de la structure du projet :

Weight-Converter/
├── index.html
├── styles.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML du convertisseur de poids.
styles.css : inclut les styles CSS pour la mise en page et le design réactif.
script.js : gère la logique de conversion du poids et de validation des entrées.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/Weight-Converter.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Weight-Converter
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour utiliser le convertisseur de poids.

Usage

Ouvrez le site Web dans un navigateur Web.
Entrez un poids en livres dans le champ de saisie.
Affichez le poids converti en kilogrammes affiché sur la page. Si la saisie n'est pas valide, un message d'erreur apparaîtra.

Explication du code

HTML

Le fichier index.html configure la structure du convertisseur de poids, y compris le champ de saisie et l'affichage des résultats. En voici un extrait :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weight Converter</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1>Weight Converter</h1>
      <label for="input">Pounds</label>
      <input
        type="number"
        id="input"
        class="input"
        step="0.1"
        placeholder="Enter number"
      />
      <p>Your weight in kg is: <span id="result"></span></p>
      <p class="error" id="error"></p>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Copier après la connexion

CSS

Le fichier styles.css stylise le convertisseur de poids, y compris le champ de saisie, les messages d'erreur et la mise en page. Voici quelques styles clés :

body {
    margin: 0;
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    color: white;
  }

  .container {
    background: rgba(141, 133, 133, 0.632);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    width: 85%;
    max-width: 450px;
    margin-bottom: 200px;
  }

  .input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
  }

  .input {
    padding: 10px;
    width: 70%;
    background: rgb(255, 253, 253);
    border-color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    outline: none;
  }

  .error {
    color: red;
  }

  #result {
    color: rgb(0, 255, 0);
  }

Copier après la connexion

Javascript

Le fichier script.js gère la logique de conversion, la validation des entrées et met à jour le DOM. En voici un extrait :

const inputEl = document.getElementById("input");
const errorEl = document.getElementById("error");
const resultEl = document.getElementById("result");
let errorTime;
let resultTime;

function updateResults() {
  if (inputEl.value <= 0 || isNaN(inputEl.value)) {
    errorEl.innerText = "Please enter a valid number!";
    clearTimeout(errorTime);
    errorTime = setTimeout(() => {
      errorEl.innerText = "";
      inputEl.value = "";
    }, 2000);
  } else {
    resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
    clearTimeout(resultTime);
    resultTime = setTimeout(() => {
      resultEl.innerText = "";
      inputEl.value = "";
    }, 10000);
  }
}

inputEl.addEventListener("input", updateResults);

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du convertisseur de poids ici.

Conclusion

Construire ce convertisseur de poids a été un projet agréable qui m'a permis d'explorer le potentiel de JavaScript dans la gestion de la validation des entrées et des calculs en temps réel. J'espère que ce projet vous inspirera pour créer des outils similaires qui faciliteront les tâches quotidiennes. N'hésitez pas à explorer, personnaliser et améliorer le code en fonction de vos besoins. Bon codage !