astn/fem_tip-calculator-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
30 commits 1 branch 0 tags 346 KiB
  • CSS 47.1%
  • HTML 29.6%
  • JavaScript 23.3%
Find a file
Exact
Gemini 5fcde94d03 Number inputs should now have spinners hidden in firefox
2024-09-15 23:18:37 -07:00
design init 2024-09-13 00:45:57 -07:00
fonts/Space_Mono Added fonts and css 2024-09-13 09:28:44 -07:00
images init 2024-09-13 00:45:57 -07:00
.gitignore init 2024-09-13 00:45:57 -07:00
index.html Button now disabled, and disables and enables based on input 2024-09-15 22:55:29 -07:00
README.md Updated readme 2024-09-15 23:06:55 -07:00
script.js Button now disabled, and disables and enables based on input 2024-09-15 22:55:29 -07:00
style-guide.md init 2024-09-13 00:45:57 -07:00
style.css Number inputs should now have spinners hidden in firefox 2024-09-15 23:18:37 -07:00

README.md

Frontend Mentor - Tip calculator app solution

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

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

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

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • JavaScript

What I learned

Since I personally lack experience in working with forms more often, this challenge helped me a lot in getting the hang of them more. In particular with using them in JavaScript. I had some other personal projects I made before that involved checkboxes, but it had been a while since then, and this challenge was a good way to get back into it.

Continued development

I had some issues with calculating the tip, which is ironic because I thought that would have been the easy part. The issue was that I kept misunderstanding how numbers and floats were cast in JavaScript, and I made a lot of my if-statements too complicated. I ended up with a bit of a simpler solution, however this made me miss working with TypeScript more.