Part 9: Clean-up HTML and improve UX [Beginner Tutorial: Learn Vue, CSS Grid and Flexbox]

Before you continue, make sure you see this in Codepen

HTML you should see after completing Part 8
JS you should see after completing Part 8

At this point, we are done working in the JS pane

You have successfully built a functional digital calculator using Vue.

Part 10 is all about using CSS Grid and Flexbox to style our application

This part, Part 9, is a necessary pre-cursor to ensure your HTML is ready for the next part. In step 4 we will make a minor improvement to the interface.

Step 1: Wrap the headings in a section

  • Your template has an h1 and an h2 . Both are siblings of one another, and both are direct children of the outer div . For CSS Grid to work properly, we need to wrap both in an enclosing section element. This section should have a class of output that we will use in our CSS later.

Step 2: Wrap the buttons in a section

  • Your template has two button elements that are siblings, and direct children of the outer div . For CSS Grid to work properly, we need to wrap both in an enclosing section element. This section should have a class of operators that we will use in our CSS later.

Step 3: Add a class to the last section

  • The last section in your template does not currently have a class attribute. Add one and assign it the value digits .

Step 4: Display the active operator next to the total

Though not a feature of the iOS calculator, I thought it was important to remind the user of what mathematical operation they are currently using. In this step, let’s display it next to the total in the same h2 element.

  • Inside the opening span tag, add the Vue v-if directive and set selected as its value.

Step 5: Render both headings as raw code

This is a personal preference, so feel free to skip.

Full code for your template

<div id="app">  <section class="output">    <h1><pre>{{current}}</pre></h1>    <h2><pre>{{total}}<span v-if="selected"> {{selected}}</span></pre></h2>  </section>  <section class="modifiers">    <button v-on:click="current = 0, total = 0, selected = null">AC</button>    <button v-on:click="current = -current">+/-</button>    <button v-on:click="current = Number(current) * 0.01">%</button>  </section>  <section class="operators">    <button v-for="operator in operators" v-on:click="calculate(operator)">{{operator}}</button>    <button v-on:click="calculate()">=</button>  </section>  <section class="digits">    <buttonv-for="digit in [...Array(10).keys()]"v-on:click="current === 0 ? current = String(digit) : current += digit">      {{digit}}    </button>    <button v-on:click="current.toString().indexOf('.') == -1 ? current += '.' : null">.</button>  </section></div>

Full code for your Vue instance

let vm = new Vue({  el: '#app',  data: {    current: 0,    total: 0,    operators: ['+', '-', '*', '/'],    selected: null,  },  computed: {    answer: function() {      return eval(this.total + this.selected + Number(this.current));    }  },  methods: {    updateTotal: function() {      this.total = this.answer;    },    calculate: function(symbol = null) {      this.updateTotal();      this.selected = symbol;      this.current = 0;    }  }});

Try it out…it all works!

Play around, please. Again, I hope all your hard work feels great.

This marks the end of Part 9

In Part 10, we will finish this series by styling our entire application with the help of CSS Grid and Flexbox.

Continue to Part 10: Style with CSS Grid and Flexbox

Designer, Developer, DataViz, Dad • rmion.com