<div class="tip-card">
  <h3>Tip Calculator</h3>
  <div class="input-group">
    <label>Bill Amount</label>
    <input type="number" id="bill" placeholder="0.00">
  </div>
  <div class="input-group">
    <label>Service Quality</label>
    <select id="service">
      <option value="0.30">30% - Outstanding</option>
      <option value="0.20" selected>20% - Good</option>
      <option value="0.15">15% - OK</option>
      <option value="0.10">10% - Bad</option>
    </select>
  </div>
  <div class="result">
    <p>Tip Amount: <span id="tipAmount">$0.00</span></p>
    <p>Total Bill: <span id="totalBill">$0.00</span></p>
  </div>
  <button onclick="calculateTip()">Calculate</button>
</div>

.tip-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 300px;
  margin: 0 auto;
}
h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
}
.input-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #4b5563;
}
input, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
}
.result {
  background: #f3f4f6;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.result p {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #374151;
}
span {
  color: #2563eb;
}
button {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

function calculateTip() {
  const bill = parseFloat(document.getElementById("bill").value);
  const service = parseFloat(document.getElementById("service").value);
  
  if (isNaN(bill)) return;
  
  const tip = bill * service;
  const total = bill + tip;
  
  document.getElementById("tipAmount").innerText = "$" + tip.toFixed(2);
  document.getElementById("totalBill").innerText = "$" + total.toFixed(2);
}

Back to Snippets

Tip Calculator JS

Calculate tips instantly with this handy widget. Users enter the bill amount and select a service level to see the total amount, and the math happens in real-time with simple JavaScript.

439

#javascript

#css

#calculator

#tip

#form

#math

#tool

#ui

/HTML *CSS ()JS Output Live Updates

Tip Calculator JS

Share Code Snippet