Tip Calculator App Solution

Frontend Mentor Challenge        Switch to Portuguese 🇧🇷

View the App    Report an Issue    Suggest a Feature

       

Table of Contents

1. Introduction
2. Key Features
3. My Role in the Project
4. Purpose and Objective
5. Highlight
6. Screenshots
7. How to Run the Project Locally
8. My Process
   • Planning
   • Code Architecture
   • Challenges Faced
9. Learnings
10. Technologies Used
11. Author
12. Acknowledgments

Introduction

This project is a tip calculator application that allows users to easily calculate the tip amount and total bill per person. The design and challenge were proposed by Frontend Mentor, aiming to create a responsive interface that adapts to different screen sizes.

Key Features

• Automatic tip calculation based on predefined or custom percentages.
• Real-time data input with instant visual feedback.
• Input validation to ensure valid data.
• Responsive and accessible design.

My Role in the Project

In this project, I was responsible for the entire implementation, from frontend development to the JavaScript calculation logic.

Purpose and Objective

The purpose of this project is to provide a practical tool to help users quickly and efficiently calculate tips. The app aims to simplify the process of splitting bills in group settings, such as dinners or shared meals.

Highlight

The main feature of this project is the ability to automatically calculate the tip and total bill based on user inputs. The calculation logic is implemented in JavaScript, ensuring precise results and real-time updates as users interact with the input fields.

Screenshots

Mobile

Tablet

How to Run the Project Locally

To run this project locally on your machine, follow these steps:

1. Clone the Repository:

git clone https://github.com/alberto-rj/tip-calculator/

2. Navigate to the Project Directory:

cd tip-calculator

3. Open the index.html file in your browser: You can either open the file directly in your browser or use a local server like Live Server if you're using Visual Studio Code.

4. Interact with the app: The app is ready to use! Simply enter the desired values into the fields and calculate the tips.

My Process

To develop this application, I followed a structured process.

Planning

I understood the requirements of the challenge and created an initial interface sketch.

Code Architecture

The project was structured using HTML, CSS, and JavaScript, with an emphasis on accessibility and usability best practices.

Challenges Faced

1. Accessible Validation

• Problem: The app must remain accessible during user input validation.
• Solution:
  • Implementation of accessible validations.
  • Clear and informative error messages.
  • Tested on different devices to ensure an inclusive experience.

2. Interactive Visual Feedback

• Problem: Need to implement hover and focus states for all interactive elements on the page.
• Solution:
  • Use of CSS pseudo-classes :hover and :focus-visible.
  • Ensured consistent visual feedback on buttons and fields.
  • Improved usability and accessibility of the app.

3. Responsive Layout

• Problem: The layout must be optimized for different screen sizes.
• Solution:
  • Implemented media queries to adjust the layout.
  • Used relative units (such as %, and rem) to ensure scalability.
  • Applied Flexbox and CSS Grid to create a flexible and adaptable layout.
  • Tested on various devices to ensure proper viewing.

4. Precise Tip Calculation

• Problem: The app must accurately calculate the tip and total cost per person.
• Solution:
  • Implemented precise calculation functions in JavaScript.
  • Ensured that results are displayed clearly and understandably.

Learnings

• Accessibility:

  • I learned how to implement accessible validations and error messages, ensuring that all users can interact with the app, regardless of their abilities.

• Visual Feedback:

  • I understood the importance of hover and focus states to improve usability and accessibility, providing a better user experience.

• Responsive Design:

  • I developed CSS skills, using relative units, Flexbox, and CSS Grid to ensure the layout adapts to different screen sizes.

• Testing:

  • I realized the importance of testing the app on different devices and contexts to identify and correct usability issues.

• Continuous Improvement:

  • I learned that there is always room for improvement and that each challenge faced is an opportunity to learn.

Technologies Used

                 

Author

• GitHub - @alberto-rj
• Frontend Mentor - @alberto-rj
• Twitter - @albertorauljose

Acknowledgments

Challenge provided by Frontend Mentor.