Responsive Tip calculator app using JavaScript and tailwind CSS

What are you most proud of, and what would you do differently next time?

I’m proud of implementing a responsive, mobile-first design using Tailwind CSS and creating real-time input validation with JavaScript. The dynamic error handling for the "Number of People" input, showing "Can't be zero" with a red border only when bill and tip are valid, was a key achievement:

javascript

if ((people === 0 || isNaN(people)) && bill > 0 && selectedTip > 0) {
  peopleInput.classList.add('border-red-500');
  peopleError.classList.remove('hidden');
}

What I’d Do Differently Next Time: I’d replace the prompt for custom tip with a text input for better UX and add debouncing to input events to optimize performance. I’d also test CSS class application earlier to avoid issues like the red border not showing.

What challenges did you encounter, and how did you overcome them?

Challenges Encountered: Red Border Not Showing: The border-red-500 class didn’t apply consistently on the "Number of People" input, likely due to Tailwind CSS conflicts or missing class generation.

NaN in Outputs: When bill and tip were valid but people was 0 or empty, outputs showed NaN instead of $0.00.

Conditional Error Display: Ensuring the "Can't be zero" error only appeared after valid bill and tip inputs, not on page load, was tricky.

How I Overcame Them: Red Border: Added a fallback inline style (peopleInput.style.border = '2px solid rgb(239, 68, 68)') and CSS rule (#people.border-red-500 { border: 2px solid rgb(239, 68, 68) !important; }) to force the border. Ensured border-neutral-grey-50 was toggled off to avoid conflicts.

NaN Issue: Updated calculateTip to check people === 0 || isNaN(people) with bill > 0 and selectedTip > 0, setting outputs to $0.00 early to skip calculations:

javascript

if ((people === 0 || isNaN(people)) && bill > 0 && selectedTip > 0) {
  tipAmountDisplay.textContent = '$0.00';
  totalAmountDisplay.textContent = '$0.00';
}

Error Display: Modified validation to trigger error only when bill and tip were valid, keeping it hidden initially by adding hidden to the error <span> and adjusting logic:

javascript

if ((people === 0 || isNaN(people)) && bill > 0 && selectedTip > 0) {
  peopleError.classList.remove('hidden');
}

What specific areas of your project would you like help with?

I need help ensuring the border-red-500 class applies reliably without fallback inline styles, as it’s still not showing consistently despite Tailwind inclusion. Feedback on optimizing validation logic for edge cases would also be valuable.