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.
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.
Hier ein kurzer Blick auf die Projektstruktur:
Tip-Calculator/ ├── index.html ├── styles.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Tip-Calculator.git
Öffnen Sie das Projektverzeichnis:
cd Tip-Calculator
Führen Sie das Projekt aus:
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:
<!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>
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;
}
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);
Sie können sich hier die Live-Demo des Trinkgeldrechners ansehen.
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!
Dieses Projekt wurde als Teil meiner kontinuierlichen Reise zur Verbesserung meiner Webentwicklungsfähigkeiten entwickelt, mit Schwerpunkt auf JavaScript und DOM-Manipulation.
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!
So ändern Sie C-Sprachsoftware auf Chinesisch
Einführung in den Eröffnungsort von Win8
Welche Datenkonvertierungsmethoden gibt es in Golang?
So zentrieren Sie die Webseite in Dreamweaver
So lösen Sie ungültige Syntax in Python
Checken Sie den virtuellen Standort auf DingTalk ein
So legen Sie ein geplantes Herunterfahren in UOS fest
Nach dem Einschalten des Computers zeigt der Monitor kein Signal
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
