Frontend Mentor - Tip calculator App

This is a solution to my tip calculator project.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learnt
  • Continued development
  • Useful resources
• Author

Overview

The challenge

The challenge is to create a working tip calculator.

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.
• Be able to add custom percent values.
• Be able to reset the values back to their original.

Screenshots

Desktop Design

Mobile Design

Links

• Repository: Click here >
• Live Site URL: Click here >

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript
• Flexbox
• Mobile-first workflow

What I learnt

Day 1:

I learnt how to change input element's placeholder text colour. Changing the placeholder colour is not standardised across web browsers so you will have to specify specific styles for individual web browsers i.e.

input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}

input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: red;
}

Day 2:

I was experimenting with mobile first design in this project and I discovered the benfits of designing for mobile first. Since, 56% of the internet's traffic now comes from a mobile device it makes sense to make sure every website or app is optimised for mobile viewing. By using a mobile first methodology, adapting the app to a desktop view was significantly easier than the opposite. It was also a lot easier to plan a mobile view.

Day 3:

I learnt how to make the body 100% of the browser height. In order to centre the body element, you need to give the html and body element a height 100%. So the body element will automatically look to the html element for its height.

/* Will not work*/
body {
  height: 100%;
}

/* You need to use this to make the height 100% of the browser height*/
html,
body {
  height: 100%;
}

Day 4:

Javascript When you use .toFixed() to convert a number to decimal place, it returns string not a number. This introduced a bug into my code when adding the tip and bill per person.

Continued development

I will use this section to outline areas that I want to continue focusing on in future projects. These could be concepts I'm still not completely comfortable with or techniques I found useful that you want to refine and perfect.

1. I would like to learn how to use css grid. I stuggled to arrange the "select tip buttons" in the way that I would like so i had to use work-rounds like adding custom classes to get it to look the way I wanted e.g. to adding spaces between the rows of the button I had to add the following classes.

.left {
  margin-right: 15px;
}

.right {
  margin-right: 15px;
  margin-left: 15px;
}

I think this could be done better using css grid, which would have sped up the process and allow me to do more advanced positioning.

2. Mobile first design I will continue to experiment and refine my skill with mobile first design. I found it incredibily useful so will utilise it in future projects from this point forward.

Useful resources

• Changing Placeholder text colour - Helped to change the placeholder text colour of an input element.
• Guide on Flex box - An easy to use guide on flexboxes.

Author

• Website - Lanre Sodeinde
• Frontend Mentor - @Lanrayy
• GitHUb - @Lanrayy