Challenge 4

Challenges are opportunities to test what you have learned by interacting directly with live code.

For this challenge, you will convert a Vue Component to a Single-File Component using the CSS and JavaScript below.

app.component('counter-button', {
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    clicked: function () {
      this.count++
    }
  },
  template: `
  <button @click="clicked">
    Number of times clicked: {{ count }}
  </button>
  `
})

html, body {
  display: grid;
  justify-content: center;
  align-content: center;

  height: 100vh;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

button {
  background: #4fc08d;
  border: solid 1px;
  border-radius: 2em;
  color: #fff;
  font: inherit;
  padding: 0.75em 2em;
}

button:active {
  box-shadow: inset 0 0 10px 1px rgba(0,0,0,0.2);
}

Solution

<!-- add template here -->
<template>  
  <button @click="clicked">
    Number of times clicked: {{ count }}
  </button>
</template>

<!-- add logic here -->
<script>
  export default {
    data() {
      return {
        count: 0
      };
    },
    methods: {
      clicked: function () {
        this.count++
      }
    }
  };
</script>

<!-- add styling here -->
<style>
  html, body {
    display: grid;
    justify-content: center;
    align-content: center;

    height: 100vh;

    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
  }

  button {
    background: #4fc08d;
    border: solid 1px;
    border-radius: 2em;
    color: #fff;
    font: inherit;
    padding: 0.75em 2em;
  }
  
  button:active {
    box-shadow: inset 0 0 10px 1px rgba(0,0,0,0.2);
  }
</style>