Erstellen Sie eine Website mit einem Trinkgeldrechner

Einführung

Hallo, liebe Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einen einfachen, aber praktischen Trinkgeldrechner. Dieses Projekt ist eine perfekte Gelegenheit, grundlegende JavaScript-Konzepte zu üben, z. B. den Umgang mit Benutzereingaben, die Durchführung von Berechnungen und die dynamische Aktualisierung des DOM. Egal, ob Sie JavaScript-Neuling sind oder nach einem kleinen Projekt suchen, um Ihre Fähigkeiten zu verbessern, dieser Tipp-Rechner ist eine gute Wahl.

Projektübersicht

Der Trinkgeldrechner ist eine webbasierte Anwendung, mit der Benutzer schnell den zu zahlenden Gesamtbetrag, einschließlich Trinkgeld, basierend auf dem Rechnungsbetrag und dem Trinkgeldprozentsatz berechnen können. Das Projekt zeigt, wie man eine interaktive Benutzeroberfläche erstellt, Berechnungen verwaltet und dem Benutzer Echtzeit-Feedback gibt.

Merkmale

• Benutzerfreundliche Oberfläche: Einfaches und intuitives Design für einfache Verwendung.
• Echtzeitberechnung: Berechnet sofort den Gesamtbetrag, während Sie die Rechnung und den Trinkgeldprozentsatz eingeben.
• Responsives Design: Das Layout passt sich an unterschiedliche Bildschirmgrößen an und sorgt so für ein nahtloses Erlebnis sowohl auf Desktop- als auch auf Mobilgeräten.
• Funktionalität zurücksetzen: Benutzer können die Eingabefelder einfach zurücksetzen und eine neue Berechnung starten.

Verwendete Technologien

• HTML: Strukturiert die Webseite und Eingabeelemente.
• CSS: Gestaltet die Benutzeroberfläche und sorgt so für ein klares und ansprechendes Design.
• JavaScript: Verwaltet die Berechnungslogik und aktualisiert den Gesamtbetrag in Echtzeit.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

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

• index.html: Enthält die HTML-Struktur für den Trinkgeldrechner.
• styles.css: Enthält CSS-Stile, um das Erscheinungsbild des Rechners zu verbessern.
• script.js: Verwaltet die Berechnungslogik und dynamische Aktualisierungen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

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

2. Öffnen Sie das Projektverzeichnis:
   

   cd Tip-Calculator
   

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um den Trinkgeldrechner zu verwenden.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Geben Sie den Rechnungsbetragin das dafür vorgesehene Eingabefeld ein.
3. Geben Sie den Trinkgeldprozentsatz ein, der der Rechnung hinzugefügt werden soll.
4. Klicken Sie auf die Schaltfläche „Berechnen“, um den Gesamtbetrag inklusive Trinkgeld anzuzeigen.
5. Setzen Sie die Felder zurück, wenn Sie eine neue Berechnung starten möchten.

Code-Erklärung

HTML

Die Datei index.html stellt die Grundstruktur des Trinkgeldrechners bereit, einschließlich der Eingabefelder für den Rechnungsbetrag und Trinkgeldprozentsatz sowie die Schaltfläche zum Auslösen der Berechnung. Hier ist ein Ausschnitt:

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

Die Datei „styles.css“ formatiert den Tipp-Rechner und sorgt für ein sauberes und reaktionsfähiges Layout. Hier sind einige wichtige Stile:

* {
    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

Die Datei script.js übernimmt die Berechnungslogik und aktualisiert den Gesamtbetrag basierend auf Benutzereingaben. Hier ist ein Ausschnitt:

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

Live-Demo

Sie können sich hier die Live-Demo des Trinkgeldrechners ansehen.

Abschluss

Das Erstellen dieses Tipp-Rechners war eine unterhaltsame und lehrreiche Erfahrung, die mein Verständnis von JavaScript, insbesondere beim Erstellen interaktiver Webanwendungen, stärkte. Ich hoffe, dieses Projekt inspiriert Sie dazu, mit JavaScript zu experimentieren und Ihre eigenen nützlichen Tools zu erstellen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Reise zur Verbesserung meiner Webentwicklungsfähigkeiten entwickelt, mit Schwerpunkt auf JavaScript und DOM-Manipulation.

Autor

• Abhishek Gurjar
  • GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website mit einem Trinkgeldrechner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!