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