Créer un site Web de calcul de pourboire-tutoriel CSS-php.cn

Créer un site Web de calcul de pourboire

PHPz

Libérer： 2024-08-19 04:24:05

original

680 Les gens l'ont consulté

Build a Tip Calculator Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de vous présenter mon dernier projet : un calculateur de pourboires simple mais pratique. Ce projet est l'occasion idéale de mettre en pratique les concepts fondamentaux de JavaScript, tels que la gestion des entrées utilisateur, l'exécution de calculs et la mise à jour dynamique du DOM. Que vous soyez nouveau dans JavaScript ou que vous recherchiez un petit projet pour perfectionner vos compétences, ce calculateur de pourboires est un excellent choix.

Aperçu du projet

Le Calculateur de pourboire est une application Web qui permet aux utilisateurs de calculer rapidement le montant total à payer, y compris le pourboire, en fonction du montant de la facture et du pourcentage du pourboire. Le projet montre comment créer une interface utilisateur interactive, gérer les calculs et fournir des commentaires en temps réel à l'utilisateur.

Caractéristiques

Interface conviviale : Conception simple et intuitive pour une utilisation facile.
Calcul en temps réel : calcule instantanément le montant total lorsque vous saisissez la facture et le pourcentage de pourboire.
Conception réactive : la mise en page s'adapte à différentes tailles d'écran, garantissant une expérience fluide sur les ordinateurs de bureau et les appareils mobiles.
Fonctionnalité de réinitialisation : les utilisateurs peuvent facilement réinitialiser les champs de saisie et démarrer un nouveau calcul.

Technologies utilisées

HTML : Structure la page Web et les éléments de saisie.
CSS : stylise l'interface, garantissant un design épuré et réactif.
JavaScript : Gère la logique de calcul et met à jour le montant total en temps réel.

Structure du projet

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

Tip-Calculator/
├── index.html
├── styles.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML du calculateur de pourboire.
styles.css : inclut des styles CSS pour améliorer l'apparence de la calculatrice.
script.js : Gère la logique de calcul et les mises à jour dynamiques.

Installation

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

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Tip-Calculator
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser le calculateur de pourboire.

Usage

Ouvrez le site Web dans un navigateur Web.
Entrez le montant de la facture dans le champ de saisie désigné.
Entrez le pourcentage de pourboire à ajouter à la facture.
Cliquez sur le bouton « Calculer » pour voir le montant total, pourboire compris.
Réinitialisez les champs si vous souhaitez lancer un nouveau calcul.

Explication du code

HTML

Le fichier index.html fournit la structure de base du calculateur de pourboire, y compris les champs de saisie du montant de la facture et du pourcentage du pourboire, ainsi que le bouton pour déclencher le calcul. 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>Tip Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>

<body>
    <div class="container">
        <h1>Tip Calculator</h1>
        <p>Enter the bill amount and tip percentage to calculate the total amount</p>

        <label for="bill">Bill amount:</label>
        <input type="number" id="bill">
        <br>

        <label for="tip">Tip percentage:</label>
        <input type="number" id="tip">
        <br>

        <button id="calculate">Calculate</button>
        <br>

        <label for="total">Total Amount:</label>
        <span id="total"></span>
    </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 calculateur de pourboire, offrant une mise en page propre et réactive. Voici quelques styles clés :

* {
    box-sizing: border-box;
}

body {
    color: white;
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    background-color: rgb(0, 0, 0);
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    box-shadow: inset;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
}

button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin: 10px 0;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #45a049;
}

#total {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.footer {
    margin: 70px;
    text-align: center;
    color: black;
}

Copier après la connexion

Javascript

Le fichier script.js gère la logique de calcul, mettant à jour le montant total en fonction des entrées de l'utilisateur. En voici un extrait :

const btn = document.getElementById("calculate");
const inputBill = document.getElementById("bill");
const inputTip = document.getElementById("tip");
const totalSpan = document.getElementById("total");

function calculateTotal() {
    const billValue = parseFloat(inputBill.value);
    const tipValue = parseFloat(inputTip.value);
    const totalValue = billValue * (1 + tipValue / 100);
    totalSpan.innerText = totalValue.toFixed(2);
}

btn.addEventListener("click", calculateTotal);

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du calculateur de pourboire ici.

Conclusion

Construire ce calculateur de pourboires a été une expérience amusante et éducative qui a renforcé ma compréhension de JavaScript, notamment dans la création d'applications Web interactives. J'espère que ce projet vous incitera à expérimenter JavaScript et à créer vos propres outils utiles. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours continu visant à améliorer mes compétences en développement Web, en mettant l'accent sur la manipulation JavaScript et DOM.

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!