Créer un site Web de calcul de pourboire

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

• 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 :

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Tip-Calculator
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser le calculateur de pourboire.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Entrez le montant de la facture dans le champ de saisie désigné.
3. Entrez le pourcentage de pourboire à ajouter à la facture.
4. Cliquez sur le bouton « Calculer » pour voir le montant total, pourboire compris.
5. 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 :

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923

93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Tip Calculator6e916e0f7d1e588d4f442bf645aedb2f
    e4bb307b77bfd1a1ec7fd6c485d2bfb1
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Tip Calculator473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846beeEnter the bill amount and tip percentage to calculate the total amount94b3e26ee717c64999d7867364b1b4a3

        da55a23ba75f1a91499fd53db6dde99fBill amount:8c1ecd4bb896b2264e0711597d40766c
        da68c775d7dd560fd6878751c0c9e570
        0c6dc11e160d3b678d68754cc175188a

        54616200344afdb89867e9df0f118122Tip percentage:8c1ecd4bb896b2264e0711597d40766c
        2f56d4979a58a88631c556197730f8be
        0c6dc11e160d3b678d68754cc175188a

        c64b5582d11b3d494d9cfa5ac00d34dbCalculate65281c5ac262bf6d81768915a4a77ac0
        0c6dc11e160d3b678d68754cc175188a

        f42db1d3de5697d736e79e701ac6f5b5Total Amount:8c1ecd4bb896b2264e0711597d40766c
        2999737d3770e77603f9c3571ac488af54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

    ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

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

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

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!