Add example solution for Tip Calculator App (#325) #347

suryaprakash0010 · 2025-10-06T12:46:49Z

Description #325

This PR adds a complete Tip Calculator example solution for issue #325. The application demonstrates fundamental JavaScript concepts including DOM manipulation, event handling, and input validation.

Features Implemented

Bill Amount Input: Numeric input field for bill total
Tip Selection: Preset percentage buttons (10%, 15%, 20%, 25%) + custom percentage input
Dynamic Calculations: Real-time tip and total amount calculation
Split Bill Feature: Divide total among multiple people
Input Validation: Client-side validation with visual feedback
Animations: Smooth CSS transitions for result updates
Responsive Design: Works on different screen sizes

Technical Implementation

HTML: Semantic structure with proper accessibility
CSS: Modern styling with gradients, animations, and hover effects
JavaScript: Clean, commented code with:
- Event-driven architecture
- Input validation functions
- DOM manipulation for results
- Math calculations for tip amounts

vercel · 2025-10-06T12:46:55Z

@suryaprakash0010 is attempting to deploy a commit to the Suman Kunwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-10-06T23:44:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learn-javascript	Ready	Preview	Comment	Oct 6, 2025 11:46pm

Copilot

Pull Request Overview

Adds a complete Tip Calculator example app demonstrating DOM manipulation, event handling, validation, and styling. Key changes:

Introduces HTML structure for inputs, tip selection, results, and a calculate button.
Adds CSS for responsive layout, animations, and visual states.
Implements JavaScript for validation, tip/total calculations, split-bill logic, and UI interactions.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 11 comments.

File	Description
examples/tip-calculator/index.html	Adds semantic markup for the calculator UI and results display.
examples/tip-calculator/style.css	Provides styling, transitions, and layout for the calculator.
examples/tip-calculator/script.js	Implements input validation, tip calculations, and UI updates.
examples/tip-calculator/README.md	Documents features, usage, and implementation details of the example.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-06T23:48:29Z

examples/tip-calculator/README.md

+- **Bill Amount Input**: Enter the total bill amount
+- **Tip Percentage Selection**: Choose from preset percentages (10%, 15%, 20%, 25%) or enter a custom percentage
+- **Split Bill**: Divide the total among multiple people
+- **Real-time Calculations**: Automatically calculates tip amount and total


README claims real-time calculations, but the app only updates results on 'Calculate' click; either update the doc to reflect click-to-calculate or call calculateTip() on input changes and tip button clicks to truly make it real-time.

Suggested change

- **Real-time Calculations**: Automatically calculates tip amount and total

- **Click-to-Calculate**: Calculates tip amount and total when you click "Calculate"

Copilot · 2025-10-06T23:48:30Z

examples/tip-calculator/index.html

+        <div class="tip-selection">
+            <label>Tip Percentage:</label>
+            <div class="tip-buttons">
+                <button class="tip-btn" data-tip="10">10%</button>
+                <button class="tip-btn" data-tip="15">15%</button>
+                <button class="tip-btn" data-tip="20">20%</button>
+                <button class="tip-btn" data-tip="25">25%</button>
+            </div>
+            <div class="custom-tip">
+                <input type="number" id="custom-tip" placeholder="Custom %" min="0" max="100">
+            </div>


The custom tip input lacks an associated label and the tip controls aren’t grouped; wrap the percentage controls in a fieldset/legend and add a label or aria-label for the custom tip input to improve screen-reader accessibility.

Copilot · 2025-10-06T23:48:30Z

examples/tip-calculator/index.html

+
+        <button id="calculate-btn">Calculate</button>
+
+        <div class="results" id="results">


Dynamic result updates aren’t announced to assistive technologies; add aria-live="polite" (and optionally role="status") to the results container so changes to amounts are announced.

Suggested change

<div class="results" id="results">

<div class="results" id="results" aria-live="polite" role="status">

Copilot · 2025-10-06T23:48:30Z

examples/tip-calculator/script.js

+    // Update active button
+    tipButtons.forEach(btn => {
+        btn.classList.remove('active');
+        if (parseInt(btn.dataset.tip) === percentage) {


Use a radix with parseInt or use Number() for clarity: parseInt(btn.dataset.tip, 10) or Number(btn.dataset.tip).

Suggested change

if (parseInt(btn.dataset.tip) === percentage) {

if (parseInt(btn.dataset.tip, 10) === percentage) {

Copilot · 2025-10-06T23:48:30Z

examples/tip-calculator/script.js

+// Event listeners for tip buttons
+tipButtons.forEach(button => {
+    button.addEventListener('click', () => {
+        updateTipPercentage(parseInt(button.dataset.tip));


Specify a radix with parseInt or use Number(): updateTipPercentage(parseInt(button.dataset.tip, 10)) or updateTipPercentage(Number(button.dataset.tip)).

Suggested change

updateTipPercentage(parseInt(button.dataset.tip));

updateTipPercentage(parseInt(button.dataset.tip, 10));

Copilot · 2025-10-06T23:48:31Z

examples/tip-calculator/script.js

+        tipButtons.forEach(btn => btn.classList.remove('active'));
+    }
+
+    numPeople = parseInt(numPeopleInput.value) || 1;


This allows 0 or negative values (they’re truthy/falsey but not clamped); enforce the min by clamping: numPeople = Math.max(1, parseInt(numPeopleInput.value, 10) || 1).

Suggested change

numPeople = parseInt(numPeopleInput.value) || 1;

numPeople = Math.max(1, parseInt(numPeopleInput.value, 10) || 1);

Copilot · 2025-10-06T23:48:31Z

examples/tip-calculator/style.css

+    color: white;
+    transform: translateY(-2px);
+}
+


Buttons have hover styles but no visible focus style for keyboard users; add a :focus-visible style (e.g., outline or box-shadow) to ensure clear focus indication.

Suggested change

.tip-btn:focus-visible {

outline: 3px solid #764ba2;

outline-offset: 2px;

box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);

}

Copilot · 2025-10-06T23:48:31Z

examples/tip-calculator/style.css

+}
+
+.custom-tip input {
+    width: calc(100% - 24px);


With box-sizing: border-box set on number inputs, subtracting 24px is unnecessary and makes the input narrower than its container; prefer width: 100% here.

Suggested change

width: calc(100% - 24px);

width: 100%;

Copilot · 2025-10-06T23:48:32Z

examples/tip-calculator/script.js

+
+// Function to animate result updates
+function animateResult(element, newValue) {
+    element.textContent = '$' + newValue;


[nitpick] String-concatenating '$' assumes USD and locale; consider Intl.NumberFormat for currency formatting (e.g., new Intl.NumberFormat(navigator.language, { style: 'currency', currency: 'USD' }).format(value)).

Suggested change

element.textContent = '$' + newValue;

element.textContent = new Intl.NumberFormat(navigator.language, { style: 'currency', currency: 'USD' }).format(Number(newValue));

Copilot · 2025-10-06T23:48:32Z

examples/tip-calculator/script.js

+    tipButtons.forEach(btn => {
+        btn.classList.remove('active');
+        if (parseInt(btn.dataset.tip) === percentage) {
+            btn.classList.add('active');
+        }
+    });


In addition to the visual .active class, set aria-pressed to reflect selection state for assistive technologies (e.g., btn.setAttribute('aria-pressed', String(parseInt(btn.dataset.tip, 10) === percentage))); also set aria-pressed="false" when clearing active states in the custom tip handler.

Add example solution for Tip Calculator App (sumn2u#325)

b275e43

sumn2u requested a review from Copilot October 6, 2025 23:44

vercel bot deployed to Preview October 6, 2025 23:46 View deployment

Copilot AI reviewed Oct 6, 2025

View reviewed changes

	- Real-time Calculations: Automatically calculates tip amount and total
	- Click-to-Calculate: Calculates tip amount and total when you click "Calculate"


		<button id="calculate-btn">Calculate</button>

		<div class="results" id="results">

	<div class="results" id="results">
	<div class="results" id="results" aria-live="polite" role="status">

	if (parseInt(btn.dataset.tip) === percentage) {
	if (parseInt(btn.dataset.tip, 10) === percentage) {

	updateTipPercentage(parseInt(button.dataset.tip));
	updateTipPercentage(parseInt(button.dataset.tip, 10));

	numPeople = parseInt(numPeopleInput.value) \|\| 1;
	numPeople = Math.max(1, parseInt(numPeopleInput.value, 10) \|\| 1);

+.tip-btn:focus-visible {
+    outline: 3px solid #764ba2;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
+}

	element.textContent = '$' + newValue;
	element.textContent = new Intl.NumberFormat(navigator.language, { style: 'currency', currency: 'USD' }).format(Number(newValue));

Uh oh!

Add example solution for Tip Calculator App (#325) #347

Are you sure you want to change the base?

Add example solution for Tip Calculator App (#325) #347

Uh oh!

Conversation

suryaprakash0010 commented Oct 6, 2025

Description #325

Features Implemented

Technical Implementation

Uh oh!

vercel bot commented Oct 6, 2025

Uh oh!

vercel bot commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Oct 6, 2025 •

edited

Loading