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

• Frontend Mentor - Tip calculator app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

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

Links

• Solution URL: https://www.frontendmentor.io/solutions/tip-calculator-made-entirely-with-vuejs-q6peEdfB2-
• Live Site URL: https://admirable-begonia-dfe568.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Vue.js - Vue Framework

What I learned

• learnt how to reset the data(){} property in vue.

  export default {
    data() {
      return this.initialState();
    },
    methods: {
      initialState() {
        return {
          isChecked: false,
          isDisabled: true,
          tip: null,
          bill: null,
          noOfPeople: null,
        };
      },
      reset() {
        Object.assign(this.$data, this.initialState());
      },
    },
  };

• learnt about the :maxlength property in Vue.js

<input type="text" placeholder="0" v-model="bill" :maxlength="3"/>

Continued development

• I need to add responsiveness for phone/tablet devices.
• I need to add icons before the inputs and align input text to the right side.
• I need to set the totals to $0.00 by default

Author

• Website - Joshua Steed
• Frontend Mentor - @0xjoshva