contact-card-ui.vue

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <header class="tc pv3 pv3-ns">
      <h1 class="mt2 mb0 baskerville fw1 f2-ns f3">Contact Card Barcode Generator</h1>
    </header>
    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns">
        <label for="contact-name" class="db tl">Contact name</label>
        <input id="contact-name" v-model="contactName" type="text" name="contact-name" class="db pa2 w-40-l w-80-m w-100 mt2 br2 ba b--black-50">
        <label for="contact-number" class="db tl mt4">Contact number</label>
        <input id="contact-number" v-model="contactNumber" type="number" number="contact-number" class="db pa2 w-40-l w-80-m w-100 mt2 br2 ba b--black-50">
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>
      <section class="w-50-ns w-100 tl pa3">
          <!-- generated barcode goes here -->
      </section>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      contactName: '',
      contactNumber: 0,
    }
  }
}
</script>
<style>
/* chrome: removes the number type inner anchor  */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox: removes the number type inner anchor */
input[type="number"] {
  -moz-appearance: textfield;
}
</style>