qwen3.6-27b — web-tip-calculator
rep 1 PASS
screenshot
verify output
CHECK PASS: required elements exist CHECK PASS: total: bill=100 tip=20 -> 120.00 CHECK PASS: total: bill=50 tip=10 -> 55.00 CHECK PASS: two-decimal formatting CHECK PASS: split: bill=100 tip=15 people=3 -> total 115.00, perPerson 38.33 CHECK PASS: people empty/<1 treated as 1 (perPerson == total) CHECK PASS: negative bill/tip clamped to 0 CHECK PASS: no uncaught JS errors on empty inputs score: 8/8 (100%)
produced code
index.html
<!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>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f0f4f8;
color: #1a202c;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
padding: 2rem;
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #2d3748;
}
.field {
margin-bottom: 1rem;
}
label {
display: block;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: #4a5568;
}
input[type="number"] {
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
border: 1.5px solid #cbd5e0;
border-radius: 8px;
outline: none;
transition: border-color 0.15s;
}
input[type="number"]:focus {
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}
button {
width: 100%;
padding: 0.7rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: #3182ce;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
margin-top: 0.5rem;
}
button:hover {
background: #2b6cb0;
}
button:active {
background: #2c5282;
}
.results {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1.5px solid #e2e8f0;
display: none;
}
.results.visible {
display: block;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.4rem 0;
}
.result-label {
font-size: 0.9rem;
color: #4a5568;
}
.result-value {
font-size: 1.25rem;
font-weight: 700;
color: #2d3748;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<div class="field">
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" min="0" step="0.01" placeholder="0.00">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" min="0" step="1" placeholder="0">
</div>
<div class="field">
<label for="people">Number of People</label>
<input type="number" id="people" min="1" step="1" placeholder="1">
</div>
<button id="calculate">Calculate</button>
<div class="results" id="results">
<div class="result-row">
<span class="result-label">Total:</span>
<span class="result-value" id="total"></span>
</div>
<div class="result-row">
<span class="result-label">Per Person:</span>
<span class="result-value" id="perPerson"></span>
</div>
</div>
</div>
<script>
(function () {
function parseNonNegative(value) {
var num = parseFloat(value);
if (isNaN(num) || num < 0) return 0;
return num;
}
function parsePeople(value) {
var num = parseFloat(value);
if (isNaN(num) || num < 1) return 1;
return num;
}
var billInput = document.getElementById('bill');
var tipInput = document.getElementById('tip');
var peopleInput = document.getElementById('people');
var calculateBtn = document.getElementById('calculate');
var totalEl = document.getElementById('total');
var perPersonEl = document.getElementById('perPerson');
var resultsDiv = document.getElementById('results');
calculateBtn.addEventListener('click', function () {
var bill = parseNonNegative(billInput.value);
var tip = parseNonNegative(tipInput.value);
var people = parsePeople(peopleInput.value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = '$' + total.toFixed(2);
perPersonEl.textContent = '$' + perPerson.toFixed(2);
resultsDiv.classList.add('visible');
});
})();
</script>
</body>
</html>
rep 2 PASS
screenshot
verify output
CHECK PASS: required elements exist CHECK PASS: total: bill=100 tip=20 -> 120.00 CHECK PASS: total: bill=50 tip=10 -> 55.00 CHECK PASS: two-decimal formatting CHECK PASS: split: bill=100 tip=15 people=3 -> total 115.00, perPerson 38.33 CHECK PASS: people empty/<1 treated as 1 (perPerson == total) CHECK PASS: negative bill/tip clamped to 0 CHECK PASS: no uncaught JS errors on empty inputs score: 8/8 (100%)
produced code
index.html
<!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>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f5f7fa;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
padding: 2rem 2.5rem;
width: 100%;
max-width: 380px;
}
h1 {
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #1a1a2e;
}
label {
display: block;
font-weight: 600;
margin-bottom: .35rem;
font-size: .9rem;
color: #555;
}
.field { margin-bottom: 1.1rem; }
input[type="number"] {
width: 100%;
padding: .6rem .75rem;
border: 1px solid #d0d5dd;
border-radius: 6px;
font-size: 1rem;
transition: border-color .2s;
}
input[type="number"]:focus {
outline: none;
border-color: #4361ee;
box-shadow: 0 0 0 3px rgba(67,97,238,.15);
}
button#calculate {
width: 100%;
padding: .7rem;
background: #4361ee;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background .2s;
margin-top: .5rem;
}
button#calculate:hover { background: #3a56d4; }
button#calculate:active { background: #324ab1; }
.results {
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top: 1px solid #e9ecef;
display: none;
}
.results.visible { display: block; }
.result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .45rem 0;
}
.result-row .label {
font-weight: 600;
color: #555;
font-size: .95rem;
}
.result-row .value {
font-weight: 700;
font-size: 1.15rem;
color: #1a1a2e;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<div class="field">
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" min="0" step="0.01" placeholder="0.00">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" min="0" step="1" placeholder="15">
</div>
<div class="field">
<label for="people">Number of People</label>
<input type="number" id="people" min="1" step="1" placeholder="1">
</div>
<button id="calculate">Calculate</button>
<div class="results" id="results">
<div class="result-row">
<span class="label">Total</span>
<span class="value" id="total"></span>
</div>
<div class="result-row">
<span class="label">Per Person</span>
<span class="value" id="perPerson"></span>
</div>
</div>
</div>
<script>
(function () {
function parseNonNegative(value) {
var n = Number(value);
if (isNaN(n)) return 0;
return n < 0 ? 0 : n;
}
function parsePeople(value) {
var n = Number(value);
if (isNaN(n) || n < 1) return 1;
return n;
}
function formatCurrency(n) {
return '$' + n.toFixed(2);
}
document.getElementById('calculate').addEventListener('click', function () {
var bill = parseNonNegative(document.getElementById('bill').value);
var tip = parseNonNegative(document.getElementById('tip').value);
var people = parsePeople(document.getElementById('people').value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
document.getElementById('total').textContent = formatCurrency(total);
document.getElementById('perPerson').textContent = formatCurrency(perPerson);
document.getElementById('results').classList.add('visible');
});
})();
</script>
</body>
</html>
rep 3 PASS
screenshot
verify output
CHECK PASS: required elements exist CHECK PASS: total: bill=100 tip=20 -> 120.00 CHECK PASS: total: bill=50 tip=10 -> 55.00 CHECK PASS: two-decimal formatting CHECK PASS: split: bill=100 tip=15 people=3 -> total 115.00, perPerson 38.33 CHECK PASS: people empty/<1 treated as 1 (perPerson == total) CHECK PASS: negative bill/tip clamped to 0 CHECK PASS: no uncaught JS errors on empty inputs score: 8/8 (100%)
produced code
index.html
<!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>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f0f4f8;
color: #1a202c;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
padding: 2rem;
width: 100%;
max-width: 380px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #2d3748;
}
.field { margin-bottom: 1.25rem; }
label {
display: block;
font-size: .85rem;
font-weight: 600;
color: #4a5568;
margin-bottom: .35rem;
}
input[type="number"] {
width: 100%;
padding: .6rem .75rem;
border: 1px solid #cbd5e0;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: border-color .15s;
}
input[type="number"]:focus { border-color: #4299e1; }
button {
width: 100%;
padding: .7rem;
background: #4299e1;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
button:hover { background: #3182ce; }
.results {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid #e2e8f0;
display: none;
}
.results.visible { display: block; }
.result-row {
display: flex;
justify-content: space-between;
padding: .5rem 0;
}
.result-label {
font-size: .9rem;
color: #4a5568;
}
.result-value {
font-size: 1.1rem;
font-weight: 700;
color: #2d3748;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<div class="field">
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" placeholder="0.00" min="0" step="0.01">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" min="0" step="1">
</div>
<div class="field">
<label for="people">Number of People</label>
<input type="number" id="people" placeholder="1" min="1" step="1">
</div>
<button id="calculate">Calculate</button>
<div class="results" id="results">
<div class="result-row">
<span class="result-label">Total</span>
<span class="result-value" id="total"></span>
</div>
<div class="result-row">
<span class="result-label">Per Person</span>
<span class="result-value" id="perPerson"></span>
</div>
</div>
</div>
<script>
(function () {
var billInput = document.getElementById('bill');
var tipInput = document.getElementById('tip');
var peopleInput = document.getElementById('people');
var calcButton = document.getElementById('calculate');
var totalEl = document.getElementById('total');
var perPersonEl = document.getElementById('perPerson');
var resultsDiv = document.getElementById('results');
function parseNonNeg(value) {
var n = parseFloat(value);
if (isNaN(n) || n < 0) return 0;
return n;
}
function formatMoney(n) {
return '$' + n.toFixed(2);
}
calcButton.addEventListener('click', function () {
var bill = parseNonNeg(billInput.value);
var tip = parseNonNeg(tipInput.value);
var people = parseInt(peopleInput.value, 10);
if (isNaN(people) || people < 1) {
people = 1;
}
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatMoney(total);
perPersonEl.textContent = formatMoney(perPerson);
resultsDiv.classList.add('visible');
});
})();
</script>
</body>
</html>
rep 4 PASS
screenshot
verify output
CHECK PASS: required elements exist CHECK PASS: total: bill=100 tip=20 -> 120.00 CHECK PASS: total: bill=50 tip=10 -> 55.00 CHECK PASS: two-decimal formatting CHECK PASS: split: bill=100 tip=15 people=3 -> total 115.00, perPerson 38.33 CHECK PASS: people empty/<1 treated as 1 (perPerson == total) CHECK PASS: negative bill/tip clamped to 0 CHECK PASS: no uncaught JS errors on empty inputs score: 8/8 (100%)
produced code
index.html
<!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>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f4f6f9;
color: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
padding: 2rem 2.5rem;
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #16213e;
}
fieldset {
border: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
legend {
font-weight: 600;
margin-bottom: .5rem;
}
label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .95rem;
color: #333;
}
label span {
font-weight: 500;
flex: 1;
}
input[type="number"] {
width: 110px;
padding: .5rem .75rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
text-align: right;
transition: border-color .2s;
}
input[type="number"]:focus {
outline: none;
border-color: #4361ee;
box-shadow: 0 0 0 3px rgba(67,97,238,.15);
}
button#calculate {
margin-top: 1rem;
width: 100%;
padding: .75rem;
border: none;
border-radius: 10px;
background: #4361ee;
color: #fff;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
button#calculate:hover { background: #3a56d4; }
button#calculate:active { background: #2f48b0; }
.results {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
padding: 1rem 0 0;
border-top: 1px solid #e8e8e8;
}
.results .row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.results .label {
font-size: .95rem;
color: #555;
}
.results .value {
font-size: 1.25rem;
font-weight: 700;
color: #16213e;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<form onsubmit="return false">
<fieldset>
<legend>Enter Details</legend>
<label>
<span>Bill Amount</span>
<input type="number" id="bill" min="0" step="0.01" placeholder="0.00">
</label>
<label>
<span>Tip %</span>
<input type="number" id="tip" min="0" step="1" placeholder="0">
</label>
<label>
<span>Number of People</span>
<input type="number" id="people" min="1" step="1" placeholder="1">
</label>
</fieldset>
<button type="button" id="calculate">Calculate</button>
</form>
<div class="results">
<div class="row">
<span class="label">Total</span>
<span class="value" id="total">0.00</span>
</div>
<div class="row">
<span class="label">Per Person</span>
<span class="value" id="perPerson">0.00</span>
</div>
</div>
</div>
<script>
(function () {
var billInput = document.getElementById('bill');
var tipInput = document.getElementById('tip');
var peopleInput = document.getElementById('people');
var calcButton = document.getElementById('calculate');
var totalEl = document.getElementById('total');
var perPersonEl = document.getElementById('perPerson');
function parseNonNegNumber(value) {
var n = parseFloat(value);
if (isNaN(n)) return 0;
if (n < 0) return 0;
return n;
}
function formatTwoDecimals(n) {
return n.toFixed(2);
}
calcButton.addEventListener('click', function () {
var bill = parseNonNegNumber(billInput.value);
var tip = parseNonNegNumber(tipInput.value);
var people = parseNonNegNumber(peopleInput.value);
if (people < 1) people = 1;
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatTwoDecimals(total);
perPersonEl.textContent = formatTwoDecimals(perPerson);
});
})();
</script>
</body>
</html>
rep 5 PASS
screenshot
verify output
CHECK PASS: required elements exist CHECK PASS: total: bill=100 tip=20 -> 120.00 CHECK PASS: total: bill=50 tip=10 -> 55.00 CHECK PASS: two-decimal formatting CHECK PASS: split: bill=100 tip=15 people=3 -> total 115.00, perPerson 38.33 CHECK PASS: people empty/<1 treated as 1 (perPerson == total) CHECK PASS: negative bill/tip clamped to 0 CHECK PASS: no uncaught JS errors on empty inputs score: 8/8 (100%)
produced code
index.html
<!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>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #1a202c;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,.1);
padding: 2rem 2.5rem;
width: 100%;
max-width: 380px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #2d3748;
}
fieldset {
border: none;
display: grid;
gap: 1rem;
}
legend {
font-weight: 600;
margin-bottom: .5rem;
}
label {
display: flex;
flex-direction: column;
gap: .3rem;
font-size: .9rem;
font-weight: 500;
color: #4a5568;
}
input[type="number"] {
padding: .55rem .75rem;
border: 1px solid #cbd5e0;
border-radius: 6px;
font-size: 1rem;
transition: border-color .15s;
}
input[type="number"]:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66,153,225,.25);
}
button {
margin-top: .5rem;
padding: .7rem;
background: #4299e1;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
button:hover { background: #3182ce; }
button:active { background: #2b6cb0; }
.results {
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top: 2px solid #e2e8f0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
text-align: center;
}
.results .label {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .05em;
color: #718096;
}
.results .value {
font-size: 1.4rem;
font-weight: 700;
color: #2d3748;
margin-top: .25rem;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<form id="tip-form" autocomplete="off">
<fieldset>
<label>
Bill Amount ($)
<input type="number" id="bill" min="0" step="0.01" placeholder="0.00">
</label>
<label>
Tip Percentage (%)
<input type="number" id="tip" min="0" step="1" placeholder="0">
</label>
<label>
Number of People
<input type="number" id="people" min="1" step="1" placeholder="1">
</label>
<button type="button" id="calculate">Calculate</button>
</fieldset>
</form>
<div class="results">
<div>
<div class="label">Total</div>
<div class="value" id="total">—</div>
</div>
<div>
<div class="label">Per Person</div>
<div class="value" id="perPerson">—</div>
</div>
</div>
</div>
<script>
(function () {
function safeNum(value, fallback) {
var n = Number(value);
if (isNaN(n)) return fallback;
return n;
}
function clampZero(n) {
return n < 0 ? 0 : n;
}
document.getElementById('calculate').addEventListener('click', function () {
var bill = clampZero(safeNum(document.getElementById('bill').value, 0));
var tip = clampZero(safeNum(document.getElementById('tip').value, 0));
var people = safeNum(document.getElementById('people').value, 1);
if (people < 1) people = 1;
var total = bill + bill * (tip / 100);
var perPerson = total / people;
document.getElementById('total').textContent = '$' + total.toFixed(2);
document.getElementById('perPerson').textContent = '$' + perPerson.toFixed(2);
});
})();
</script>
</body>
</html>