qwen3.6-35b-a3b — 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #1a1a2e;
}
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
padding: 2.5rem 2rem 2rem;
width: 100%;
max-width: 420px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.75rem;
color: #16213e;
}
.field {
margin-bottom: 1.25rem;
}
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.4rem;
color: #555;
}
input[type="number"] {
width: 100%;
padding: 0.65rem 0.85rem;
font-size: 1rem;
border: 2px solid #dfe6e9;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"]:focus {
border-color: #6c63ff;
}
button#calculate {
display: block;
width: 100%;
padding: 0.75rem;
margin-top: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
color: #fff;
background: #6c63ff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
button#calculate:hover {
background: #5a52e0;
}
.results {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 2px solid #f0f2f5;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0;
}
.result-row .label {
font-size: 0.95rem;
color: #555;
}
.result-row .value {
font-size: 1.2rem;
font-weight: 700;
color: #16213e;
}
.result-row.total .value {
color: #6c63ff;
font-size: 1.35rem;
}
</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="any">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" min="0" step="any">
</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">
<div class="result-row total">
<span class="label">Total</span>
<span class="value" id="total">$0.00</span>
</div>
<div class="result-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 calculateBtn = document.getElementById('calculate');
var totalEl = document.getElementById('total');
var perPersonEl = document.getElementById('perPerson');
function parseBillOrTip(val) {
var n = Number(val);
if (isNaN(n) || n < 0) { return 0; }
return n;
}
function parsePeople(val) {
var n = Number(val);
if (isNaN(n) || n < 1) { return 1; }
return n;
}
function formatCurrency(n) {
return '$' + n.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
calculateBtn.addEventListener('click', function () {
var bill = parseBillOrTip(billInput.value);
var tip = parseBillOrTip(tipInput.value);
var people = parsePeople(peopleInput.value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatCurrency(total);
perPersonEl.textContent = formatCurrency(perPerson);
});
})();
</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #1a1a2e;
}
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
padding: 2.5rem 2rem;
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.75rem;
color: #16213e;
}
.field {
margin-bottom: 1.25rem;
}
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.4rem;
color: #444;
}
input[type="number"] {
width: 100%;
padding: 0.65rem 0.75rem;
font-size: 1rem;
border: 2px solid #d1d5db;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
}
input[type="number"]:focus {
border-color: #3b82f6;
}
button {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: #3b82f6;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
margin-top: 0.5rem;
}
button:hover {
background: #2563eb;
}
.results {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 2px solid #f0f2f5;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
}
.result-row .label {
font-size: 0.95rem;
color: #555;
}
.result-row .value {
font-size: 1.15rem;
font-weight: 700;
color: #16213e;
}
</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" step="0.01" min="0">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" step="0.01" min="0">
</div>
<div class="field">
<label for="people">Number of People</label>
<input type="number" id="people" placeholder="1" min="1" step="1" value="1">
</div>
<button id="calculate">Calculate</button>
<div class="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 () {
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');
function parseBillOrTip(value) {
var num = parseFloat(value);
if (isNaN(num) || num < 0) {
return 0;
}
return num;
}
function parsePeople(value) {
var num = parseInt(value, 10);
if (isNaN(num) || num < 1) {
return 1;
}
return num;
}
function formatCurrency(amount) {
return '$' + amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function calculate() {
var bill = parseBillOrTip(billInput.value);
var tip = parseBillOrTip(tipInput.value);
var people = parsePeople(peopleInput.value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatCurrency(total);
perPersonEl.textContent = formatCurrency(perPerson);
}
calculateBtn.addEventListener('click', calculate);
})();
</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
color: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
padding: 2.5rem 2rem 2rem;
width: 100%;
max-width: 420px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 2rem;
color: #16213e;
}
.field {
margin-bottom: 1.25rem;
}
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: #4a4a68;
}
input[type="number"] {
width: 100%;
padding: 0.7rem 0.85rem;
font-size: 1.1rem;
border: 2px solid #d1d5db;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
}
input[type="number"]:focus {
border-color: #3b82f6;
}
button {
width: 100%;
padding: 0.8rem;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
background: #3b82f6;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
margin-top: 0.5rem;
}
button:hover {
background: #2563eb;
}
.results {
margin-top: 1.75rem;
padding: 1.25rem;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.result-row:last-child {
margin-bottom: 0;
}
.result-label {
font-size: 0.95rem;
color: #4a4a68;
}
.result-value {
font-size: 1.2rem;
font-weight: 700;
color: #16213e;
}
.result-value.total {
font-size: 1.4rem;
color: #3b82f6;
}
</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" step="0.01" min="0">
</div>
<div class="field">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" step="0.1" min="0">
</div>
<div class="field">
<label for="people">Number of People</label>
<input type="number" id="people" placeholder="1" step="1" min="1">
</div>
<button id="calculate">Calculate</button>
<div class="results">
<div class="result-row">
<span class="result-label">Total</span>
<span class="result-value total" id="total">$0.00</span>
</div>
<div class="result-row">
<span class="result-label">Per Person</span>
<span class="result-value" id="perPerson">$0.00</span>
</div>
</div>
</div>
<script>
(function () {
"use strict";
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");
function getBill() {
var val = parseFloat(billInput.value);
return isNaN(val) || val < 0 ? 0 : val;
}
function getTip() {
var val = parseFloat(tipInput.value);
return isNaN(val) || val < 0 ? 0 : val;
}
function getPeople() {
var val = parseInt(peopleInput.value, 10);
return isNaN(val) || val < 1 ? 1 : val;
}
function formatCurrency(amount) {
return "$" + amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function calculate() {
var bill = getBill();
var tip = getTip();
var people = getPeople();
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatCurrency(total);
perPersonEl.textContent = formatCurrency(perPerson);
}
calculateBtn.addEventListener("click", calculate);
})();
</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: #f0f2f5;
color: #1a1a2e;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
padding: 2.5rem 2rem;
width: 100%;
max-width: 420px;
}
h1 {
text-align: center;
font-size: 1.6rem;
margin-bottom: 2rem;
color: #16213e;
}
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: #444;
}
input[type="number"] {
width: 100%;
padding: 0.7rem 0.9rem;
font-size: 1.05rem;
border: 2px solid #d1d5db;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
margin-bottom: 1.2rem;
}
input[type="number"]:focus {
border-color: #6366f1;
}
button {
width: 100%;
padding: 0.8rem;
font-size: 1.05rem;
font-weight: 600;
color: #fff;
background: #6366f1;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
margin-top: 0.4rem;
}
button:hover {
background: #4f46e5;
}
.results {
margin-top: 1.8rem;
padding-top: 1.5rem;
border-top: 2px solid #f0f0f0;
}
.results p {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #333;
}
.results .value {
font-weight: 700;
color: #16213e;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" placeholder="0.00" min="0" step="any">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" min="0" step="any">
<label for="people">Number of People</label>
<input type="number" id="people" placeholder="1" min="1" step="1">
<button id="calculate">Calculate</button>
<div class="results">
<p>Total: <span class="value" id="total">$0.00</span></p>
<p>Per Person: <span class="value" id="perPerson">$0.00</span></p>
</div>
</div>
<script>
(function () {
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');
function parseBillOrTip(val) {
var n = Number(val);
if (isNaN(n) || n < 0) return 0;
return n;
}
function parsePeople(val) {
var n = Number(val);
if (isNaN(n) || n < 1) return 1;
return n;
}
function formatCurrency(n) {
return '$' + n.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
calculateBtn.addEventListener('click', function () {
var bill = parseBillOrTip(billInput.value);
var tip = parseBillOrTip(tipInput.value);
var people = parsePeople(peopleInput.value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatCurrency(total);
perPersonEl.textContent = formatCurrency(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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #1a1a2e;
}
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
padding: 2.5rem 2rem 2rem;
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;
margin-bottom: 1.25rem;
}
label {
display: flex;
flex-direction: column;
font-size: 0.85rem;
font-weight: 600;
color: #444;
gap: 0.35rem;
}
label span {
font-weight: 400;
color: #888;
font-size: 0.78rem;
}
input[type="number"] {
padding: 0.6rem 0.75rem;
font-size: 1rem;
border: 2px solid #dfe6e9;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
width: 100%;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"]:focus {
border-color: #6c5ce7;
}
button {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: #6c5ce7;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #5a4bd1;
}
button:active {
background: #4a3db8;
}
.results {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 2px solid #f0f2f5;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.result-row .label {
font-size: 0.95rem;
color: #555;
}
.result-row .value {
font-size: 1.25rem;
font-weight: 700;
color: #16213e;
}
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<fieldset>
<label>
Bill Amount
<span>Enter the total bill</span>
<input type="number" id="bill" placeholder="0.00" step="0.01">
</label>
<label>
Tip Percentage
<span>e.g. 20 for 20%</span>
<input type="number" id="tip" placeholder="20" step="0.1">
</label>
<label>
Number of People
<span>Split the bill</span>
<input type="number" id="people" placeholder="1" step="1" min="1">
</label>
</fieldset>
<button id="calculate">Calculate</button>
<div class="results">
<div class="result-row">
<span class="label">Total</span>
<span class="value" id="total">$0.00</span>
</div>
<div class="result-row">
<span class="label">Per Person</span>
<span class="value" id="perPerson">$0.00</span>
</div>
</div>
</div>
<script>
(function () {
"use strict";
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");
function parseBill(value) {
var n = parseFloat(value);
if (isNaN(n) || n < 0) return 0;
return n;
}
function parseTip(value) {
var n = parseFloat(value);
if (isNaN(n) || n < 0) return 0;
return n;
}
function parsePeople(value) {
var n = parseInt(value, 10);
if (isNaN(n) || n < 1) return 1;
return n;
}
function formatCurrency(n) {
return "$" + n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function calculate() {
var bill = parseBill(billInput.value);
var tip = parseTip(tipInput.value);
var people = parsePeople(peopleInput.value);
var total = bill + bill * (tip / 100);
var perPerson = total / people;
totalEl.textContent = formatCurrency(total);
perPersonEl.textContent = formatCurrency(perPerson);
}
if (calculateBtn) {
calculateBtn.addEventListener("click", calculate);
}
})();
</script>
</body>
</html>