https://github.com/paularoo/tip-calculator
calculates the tip amount split between a given number of people.
https://github.com/paularoo/tip-calculator
Last synced: about 2 months ago
JSON representation
calculates the tip amount split between a given number of people.
- Host: GitHub
- URL: https://github.com/paularoo/tip-calculator
- Owner: PaulAroo
- Created: 2022-07-19T16:26:54.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-05T18:50:57.000Z (almost 2 years ago)
- Last Synced: 2025-02-02T11:43:15.814Z (4 months ago)
- Language: CSS
- Homepage: https://paularoo.github.io/tip-calculator/
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)
- [Author](#author)
### 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
### Links
- Solution URL: [CODE](https://github.com/PaulAroo/tip-calculator)
- Live Site URL: [PREVIEW](https://paularoo.github.io/tip-calculator/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Javascript
### What I learned
- DOM manipulation
- Input Validation
### Continued development
- better ways to structure Javascript code (achieve less code)
- use less media queries and more css functions to achieve responsiveness
## Author
- Website - [Paul Aromolaran](https://github.com/PaulAroo)
- Frontend Mentor - [@PaulAroo](https://www.frontendmentor.io/profile/PaulAroo)
- Twitter - [@paul_aroo](https://twitter.com/paul_aroo)