Tip Calculator App built with Vue.js & SCSS without Figma

Community feedback

• 

  Nemanja Dragun•340

  @ndragun92Posted over 1 year ago

  Hello,

  Great job for completing the challenge. I would like to give a few tips regarding Vue as a framework that could help reduce your code in the future. For example, for Tip percentages, you could use something like

    <div v-for="tip in [5, 10, 15, 25, 50]"
            :key="tip"
             class="tip-block"
            :class="{ active: selectedTip === tip }"
            v-text="`${tip}`%"
            @click="setSelectedTip(tip)"
  >
  

  Only this would reduce your code for a lot of lines and you are kind of safe with numbers and what you pass + this syntax is really easy to extend or even replace a hardcoded array with a dynamic array if you are getting it from API

  Other things are the shorthand of writing the if/else operator

  ${{ tipAmount ? tipAmount : "0.00" }} // Current
  ${{ tipAmount ?? "0.00" }} // New
  

  Another bonus validation that you could make is to prevent people from writing numbers such as 010 as well as preventing adding characters that are not numbers

  Also, you could wrap the element in <main> tag

  Overall good job :)

  Marked as helpful

  1

  ---

  

  Marko Dumnic•150

  @dumaaasPosted over 1 year ago

  @ndragun92

  Hey Nemanja, thank you very much for your feedback! Great stuff! :)

  0