north-mini-code-1.0 — 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>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #e8f5e8;
border-radius: 5px;
}
.result h3 {
margin-top: 0;
color: #2e7d32;
}
.amount {
font-size: 24px;
font-weight: bold;
color: #1b5e20;
}
.error {
color: #d32f2f;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Tip Calculator</h1>
<div class="input-group">
<label for="bill">Bill Amount ($):</label>
<input type="number" id="bill" placeholder="0.00" step="0.01">
</div>
<div class="input-group">
<label for="tip">Tip Percentage (%):</label>
<input type="number" id="tip" placeholder="0" step="1">
</div>
<div class="input-group">
<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="result">
<h3>Results:</h3>
<p>Total: <span id="total" class="amount">0.00</span></p>
<p>Per Person: <span id="perPerson" class="amount">0.00</span></p>
</div>
<script>
function getValidNumber(input, min = 0) {
const value = parseFloat(input.value);
if (isNaN(value) || value === '') {
return 0;
}
return Math.max(min, value);
}
function calculate() {
// Get and validate inputs
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
// Parse bill (clamp to 0)
const bill = Math.max(0, getValidNumber(billInput, 0));
// Parse tip (clamp to 0)
const tip = Math.max(0, getValidNumber(tipInput, 0));
// Parse people (clamp to 1 minimum)
const people = Math.max(1, getValidNumber(peopleInput, 1));
// Calculate total
const total = bill + bill * (tip / 100);
// Calculate per person amount
const perPerson = total / people;
// Display results formatted to 2 decimal places
document.getElementById('total').textContent = total.toFixed(2);
document.getElementById('perPerson').textContent = perPerson.toFixed(2);
}
// Add click event listener to calculate button
document.getElementById('calculate').addEventListener('click', calculate);
// Optional: Allow Enter key to trigger calculation
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
// Check if any of the input fields are focused
if (document.activeElement === billInput ||
document.activeElement === tipInput ||
document.activeElement === peopleInput) {
event.preventDefault();
calculate();
}
}
});
</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>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.calculator {
display: flex;
flex-direction: column;
gap: 15px;
}
.input-group {
display: flex;
justify-content: space-between;
align-items: center;
}
label {
font-weight: bold;
color: #555;
}
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
width: 100px;
font-size: 16px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #e8f5e9;
border-radius: 4px;
text-align: center;
font-size: 18px;
}
.result p {
margin: 5px 0;
color: #2e7d32;
}
</style>
</head>
<body>
<h1>Tip Calculator</h1>
<div class="calculator">
<div class="input-group">
<label for="bill">Bill Amount ($):</label>
<input type="number" id="bill" step="0.01" min="0" placeholder="0.00">
</div>
<div class="input-group">
<label for="tip">Tip Percentage (%):</label>
<input type="number" id="tip" step="1" min="0" placeholder="0">
</div>
<div class="input-group">
<label for="people">Number of People:</label>
<input type="number" id="people" step="1" min="1" placeholder="1">
</div>
<button id="calculate">Calculate Tip</button>
</div>
<div class="result">
<p>Total: <span id="total">0.00</span></p>
<p>Per Person: <span id="perPerson">0.00</span></p>
</div>
<script>
// Get references to all DOM elements
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
const calculateButton = document.getElementById('calculate');
const totalElement = document.getElementById('total');
const perPersonElement = document.getElementById('perPerson');
// Helper function to safely parse number input
function parseInputValue(input) {
const value = input.value;
if (value === '' || isNaN(parseFloat(value))) {
return 0;
}
const parsed = parseFloat(value);
return parsed < 0 ? 0 : parsed;
}
// Calculate function
function calculate() {
// Parse and validate inputs
const bill = parseInputValue(billInput);
const tip = parseInputValue(tipInput);
let people = parseInputValue(peopleInput);
// Ensure people is at least 1
if (people < 1) {
people = 1;
// Update the people input to show the corrected value
peopleInput.value = '1';
}
// Calculate total with tip
const total = bill + bill * (tip / 100);
// Calculate amount per person
const perPerson = total / people;
// Format to exactly two decimal places
totalElement.textContent = total.toFixed(2);
perPersonElement.textContent = perPerson.toFixed(2);
}
// Add event listener to the calculate button
calculateButton.addEventListener('click', calculate);
// Optional: Allow calculation when pressing Enter in any input
[billInput, tipInput, peopleInput].forEach(input => {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
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>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #e8f5e9;
border-radius: 5px;
text-align: center;
}
.result p {
margin: 10px 0;
font-size: 18px;
}
.total, .per-person {
font-weight: bold;
color: #2e7d32;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Tip Calculator</h1>
<div class="input-group">
<label for="bill">Bill Amount ($):</label>
<input type="number" id="bill" step="0.01" placeholder="0.00">
</div>
<div class="input-group">
<label for="tip">Tip Percentage (%):</label>
<input type="number" id="tip" step="0.1" placeholder="0">
</div>
<div class="input-group">
<label for="people">Number of People:</label>
<input type="number" id="people" step="1" placeholder="1">
</div>
<button id="calculate">Calculate Tip</button>
<div class="result">
<p>Total: <span class="total" id="total">0.00</span></p>
<p>Per Person: <span class="per-person" id="perPerson">0.00</span></p>
</div>
<script>
function getValidNumber(input, clampToZero = false) {
const value = input.value;
if (value === '') {
return 0;
}
let num = parseFloat(value);
if (isNaN(num)) {
return 0;
}
if (clampToZero && num < 0) {
return 0;
}
return num;
}
function getValidPeople(input) {
const value = input.value;
if (value === '') {
return 1;
}
let num = parseInt(value, 10);
if (isNaN(num) || num < 1) {
return 1;
}
return num;
}
function formatCurrency(amount) {
// Format to exactly two decimal places
return amount.toFixed(2);
}
document.getElementById('calculate').addEventListener('click', function() {
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
const totalElement = document.getElementById('total');
const perPersonElement = document.getElementById('perPerson');
// Get validated values
const bill = getValidNumber(billInput, true);
const tip = getValidNumber(tipInput, true);
const people = getValidPeople(peopleInput);
// Calculate
const total = bill + bill * (tip / 100);
const perPerson = total / people;
// Display formatted results
totalElement.textContent = formatCurrency(total);
perPersonElement.textContent = formatCurrency(perPerson);
});
</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>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.calculator {
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #666;
font-weight: 500;
}
input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #4a90e2;
}
button {
width: 100%;
padding: 0.75rem;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #357ae8;
}
button:active {
transform: translateY(1px);
}
.result {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #eee;
text-align: center;
}
.result-item {
margin-bottom: 1rem;
}
.label {
color: #888;
font-size: 0.9rem;
margin-bottom: 0.25rem;
display: block;
}
.value {
font-size: 1.5rem;
font-weight: 600;
color: #333;
}
.currency {
color: #4a90e2;
font-weight: 700;
}
.error {
color: #e74c3c;
font-size: 0.85rem;
margin-top: 0.25rem;
display: none;
}
input.error {
border-color: #e74c3c;
}
input.error + .error {
display: block;
}
</style>
</head>
<body>
<div class="calculator">
<h1>Tip Calculator</h1>
<div class="input-group">
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" step="0.01" min="0" placeholder="0.00">
<span class="error">Please enter a valid bill amount</span>
</div>
<div class="input-group">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" step="1" min="0" placeholder="15">
<span class="error">Please enter a valid tip percentage</span>
</div>
<div class="input-group">
<label for="people">Number of People</label>
<input type="number" id="people" step="1" min="1" placeholder="1">
<span class="error">Please enter a valid number of people</span>
</div>
<button id="calculate">Calculate</button>
<div class="result">
<div class="result-item">
<span class="label">Total Amount</span>
<span class="value"><span class="currency">$</span><span id="total">0.00</span></span>
</div>
<div class="result-item">
<span class="label">Amount per Person</span>
<span class="value"><span class="currency">$</span><span id="perPerson">0.00</span></span>
</div>
</div>
</div>
<script>
// Get references to all input elements and result elements
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
const calculateButton = document.getElementById('calculate');
const totalElement = document.getElementById('total');
const perPersonElement = document.getElementById('perPerson');
// Function to validate and parse input values
function parseInput(value, min = 0, allowNegative = false) {
// Handle empty values
if (value === '') {
return 0;
}
// Parse as float
const num = parseFloat(value);
// Check for NaN
if (isNaN(num)) {
return 0;
}
// Handle negative values
if (num < 0 && !allowNegative) {
return 0;
}
return num;
}
// Function to format numbers to exactly two decimal places
function formatCurrency(amount) {
return amount.toFixed(2);
}
// Function to calculate and display results
function calculate() {
// Parse input values with validation
const bill = parseInput(billInput.value, 0);
const tipPercentage = parseInput(tipInput.value, 0);
let people = parseInput(peopleInput.value, 1, true);
// Ensure at least 1 person
if (people < 1) {
people = 1;
peopleInput.value = '1';
}
// Calculate total amount
const tipAmount = bill * (tipPercentage / 100);
const total = bill + tipAmount;
// Calculate amount per person
const perPerson = total / people;
// Update display with formatted values
totalElement.textContent = formatCurrency(total);
perPersonElement.textContent = formatCurrency(perPerson);
}
// Add click event listener to the calculate button
calculateButton.addEventListener('click', calculate);
// Optional: Add input validation feedback
function validateInput(input, min, allowNegative = false) {
const value = parseInput(input.value, min, allowNegative);
if (input.value !== '' && isNaN(parseFloat(input.value))) {
input.classList.add('error');
} else {
input.classList.remove('error');
}
}
// Add input event listeners for real-time validation
billInput.addEventListener('input', () => validateInput(billInput, 0));
tipInput.addEventListener('input', () => validateInput(tipInput, 0));
peopleInput.addEventListener('input', () => validateInput(peopleInput, 1, true));
// Initialize with empty values (all treated as 0)
calculate();
</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>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: 500;
}
input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #4CAF50;
}
button {
width: 100%;
padding: 14px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
button:active {
transform: translateY(1px);
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
text-align: center;
}
.result h3 {
margin: 0 0 15px 0;
color: #333;
}
.amount {
font-size: 24px;
font-weight: bold;
color: #2e7d32;
}
.per-person {
margin-top: 10px;
font-size: 20px;
color: #666;
}
.per-person .amount {
color: #1976d2;
}
.error {
color: #d32f2f;
font-size: 14px;
margin-top: 5px;
display: none;
}
.input-with-error input {
border-color: #d32f2f;
}
@media (max-width: 480px) {
.container {
padding: 20px;
}
h1 {
font-size: 24px;
}
.amount {
font-size: 20px;
}
.per-person {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Tip Calculator</h1>
<div class="input-group">
<label for="bill">Bill Amount ($)</label>
<input type="number" id="bill" placeholder="0.00" step="0.01" min="0">
<div class="error" id="bill-error">Please enter a valid bill amount</div>
</div>
<div class="input-group">
<label for="tip">Tip Percentage (%)</label>
<input type="number" id="tip" placeholder="0" step="1" min="0">
<div class="error" id="tip-error">Please enter a valid tip percentage</div>
</div>
<div class="input-group">
<label for="people">Number of People</label>
<input type="number" id="people" placeholder="1" step="1" min="1">
<div class="error" id="people-error">Please enter a valid number of people</div>
</div>
<button id="calculate">Calculate Tip</button>
<div class="result">
<h3>Results</h3>
<div class="perPerson">
<span class="per-person-label">Total:</span>
<span class="amount" id="total">$0.00</span>
</div>
<div class="per-person">
<span class="per-person-label">Per Person:</span>
<span class="amount" id="perPerson">$0.00</span>
</div>
</div>
</div>
<script>
function getValidNumber(input, min = 0) {
const value = input.value;
if (value === '' || isNaN(value)) {
return 0;
}
const num = parseFloat(value);
return Math.max(min, num);
}
function formatCurrency(amount) {
return '$' + amount.toFixed(2);
}
function calculate() {
const billInput = document.getElementById('bill');
const tipInput = document.getElementById('tip');
const peopleInput = document.getElementById('people');
const totalElement = document.getElementById('total');
const perPersonElement = document.getElementById('perPerson');
const bill = getValidNumber(billInput);
const tip = getValidNumber(tipInput, 0);
let people = getValidNumber(peopleInput, 1);
if (peopleInput.value === '' || people < 1) {
people = 1;
}
const total = bill + bill * (tip / 100);
const perPerson = total / people;
totalElement.textContent = formatCurrency(total);
perPersonElement.textContent = formatCurrency(perPerson);
}
document.addEventListener('DOMContentLoaded', function() {
const calculateButton = document.getElementById('calculate');
calculateButton.addEventListener('click', calculate);
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('input', function() {
if (this.value !== '') {
this.classList.remove('input-with-error');
const errorDiv = this.parentElement.querySelector('.error');
if (errorDiv) {
errorDiv.style.display = 'none';
}
}
});
});
});
</script>
</body>
</html>