Skip to content

A fully responsive and simple tip calculator made with pure html, css, javascript challenged by frontendmentor

Notifications You must be signed in to change notification settings

kaizokuopamya/Splitter-Tip-Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Tip calculator app

Design preview for the Tip calculator app coding challenge

Welcome! 👋

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

Overview

I have completed this challenge provided by frontend mentor. It is responsive for all screen sizes and fully functional

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

Splitter - Tip Calculator

Links

My process

I have approached designing with Mobile-first workflow added rupee symbol instead of dollar so that I can use it according to Indian currency standards

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Responsive web design

What I learned

This was an excellent challenge to improve my web designing approach and knowledge of Javascript, responsive web design

Continued development

I'm thinking of adding Light/Dark toggle to change themes

Useful resources

Author

Acknowledgments

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

About

A fully responsive and simple tip calculator made with pure html, css, javascript challenged by frontendmentor

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published