Frontend Mentor - Tip Calculator Challenge solution

This is a solution to the Tip Calculator challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Calculate the correct tip and total cost of the bill per person
  • Bill Amount input throws an error if 0 or not a valid dollar amount
  • Number of people throws an error if 0 or not a whole number.

Links

• Solution URL: Solution URL
• Live Site URL: Live Site URL

My process

• I tried to build component by component
  1. Build out the form
  2. Styling
  3. JS Functionality
  4. Form Input Client-side Validation

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Bootstrap 5
• JavaScript

What I learned

I was able to think logically & practice client-side form validation using Regular Expressions. Although this does not call an external API, this is a good skill to have when using an API that only accepts certain data types/formats.

const inputValidation = (calcValue) => {
    const isValidInput = (/^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$/).test(calcValue) ? true : false;
    return isValidInput;
}

const replaceInvalidChars = (calc) => {
    return calc.id === 'bill-amount' ? calc.value = calc.value.replace(/[^0-9.]/g, '') : calc.value = calc.value.replace(/[^0-9]/g, '')
}

const displayError = (calcValue, inputId) => {
    let calcInput = document.getElementById(inputId);
    let errorText = calcInput.previousElementSibling.previousElementSibling; 
  
    if (!inputValidation(calcValue) || Number(calcValue) == 0) {
        radioButtons.forEach(radio => {
            radio.checked = false;
            radio.disabled = true;
        });
        errorText.classList.remove("d-none");
        calcInput.classList.add('error-box');
    }
    else {
        radioButtons.forEach(radio => {
            radio.disabled = false;
        });
        errorText.classList.add("d-none");
        calcInput.classList.remove('error-box');
    }

}

Continued development

I want to continue learning and become more confident in my validation skills.

Author

• Website - Portfolio Site
• Frontend Mentor - @fbell884
• LinkedIn - @yourusername