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

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

Step 2: Wrap the buttons in a section

Step 3: Add a class to the last section

Step 4: Display the active operator next to the total

Step 5: Render both headings as raw code

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.selected + Number(this.current));    }  },  methods: {    updateTotal: function() { = this.answer;    },    calculate: function(symbol = null) {      this.updateTotal();      this.selected = symbol;      this.current = 0;    }  }});

Try it out…it all works!

This marks the end of Part 9

Continue to Part 10: Style with CSS Grid and Flexbox

Designer, Developer, DataViz, Dad •