https://github.com/yashi-singh-9/tip-calculator-app
The Tip Calculator App is a responsive web application that allows users to calculate the tip amount and total cost per person based on the bill amount and selected tip percentage. Built with HTML, LESS, JavaScript, and Bootstrap 5, the app features a dynamic UI, custom tip input, and real-time calculations for an intuitive user experience.
https://github.com/yashi-singh-9/tip-calculator-app
bootstrap css frontend-mentor frontend-mentor-challenge html javascript less less-preprocessor
Last synced: 3 months ago
JSON representation
The Tip Calculator App is a responsive web application that allows users to calculate the tip amount and total cost per person based on the bill amount and selected tip percentage. Built with HTML, LESS, JavaScript, and Bootstrap 5, the app features a dynamic UI, custom tip input, and real-time calculations for an intuitive user experience.
- Host: GitHub
- URL: https://github.com/yashi-singh-9/tip-calculator-app
- Owner: Yashi-Singh-9
- License: mit
- Created: 2025-01-29T02:18:56.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-29T02:34:53.000Z (5 months ago)
- Last Synced: 2025-01-29T03:25:06.501Z (5 months ago)
- Topics: bootstrap, css, frontend-mentor, frontend-mentor-challenge, html, javascript, less, less-preprocessor
- Language: JavaScript
- Homepage: https://yashi-singh-9.github.io/Tip-Calculator-App/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Tip Calculator App Solution
This is a solution to the [Tip Calculator App Challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Getting Started](#getting-started)
- [Installing LESS](#installing-less)
- [Running the Project](#running-the-project)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## 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.
### Screenshot
**Desktop Design**
**Mobile Design**
### Links
- Solution URL: [Solution](https://www.frontendmentor.io/solutions/tip-calculator-app-6rV_bqW6vq)
- Live Site URL: [Live](https://yashi-singh-9.github.io/Tip-Calculator-App/)
## My Process
### Built With
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- LESS preprocessor
- Vanilla JavaScript
- Mobile-first workflow
- [Bootstrap 5](https://getbootstrap.com/) for styling.
### What I Learned
This project taught me how to effectively use the LESS preprocessor to create reusable and maintainable styles. Additionally, I enhanced my JavaScript skills by implementing dynamic calculations based on user input. For instance:
```less
@strong-cyan: hsl(172, 67%, 45%);
@very-dark-cyan: hsl(183, 100%, 15%);
input {
border: 2px solid @very-dark-cyan;
&:hover {
border-color: @strong-cyan;
}
}
```
### Continued Development
I plan to focus on improving accessibility (e.g., better handling for screen readers) and optimizing performance for larger projects in the future.
### Useful Resources
- [LESS Documentation](https://lesscss.org/) - Helped me understand LESS syntax and usage.
- [CSS-Tricks: Guide to LESS](https://css-tricks.com/less/)
## Getting Started
### Installing LESS
To work with LESS in this project, you need to install the LESS preprocessor. Follow these steps:
1. Ensure you have [Node.js](https://nodejs.org/) installed on your system.
2. Open a terminal and run the following command to install LESS globally:
```bash
npm install -g less
```
3. Verify that LESS is installed by running:
```bash
lessc --version
```
### Running the Project
1. Clone the project repository:
```bash
git clone https://github.com/Yashi-Singh-9/Tip-Calculator-App
cd tip-calculator
```
2. Compile the LESS file to CSS:
```bash
lessc style.less style.css
```
This command converts the `style.less` file into a standard `style.css` file.
3. Open the `index.html` file in your browser to view the project.
4. Make any updates to the `style.less` file as needed, and recompile it to see changes.
## Author
- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246/)
- Frontend Mentor - [Yashi-Singh-9](https://www.frontendmentor.io/profile/Yashi-Singh-9)
## Acknowledgments
Thanks to Frontend Mentor for the challenge, and to the developers who create amazing open-source tools like LESS!