Challenge 3

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

For this challenge, you will add functionality to the text-control component. Within the text-control component, there are two buttons, one for shrinking the font size of the text and the other for enlarging the text.

Using the v-on directive, add two click listeners to the buttons. The listeners will emit the custom events enlarge-text and shrink-text. Then have the root component listen for those custom events and increase or decrease the value of the fontSize property. The fontSize value should move in 0.1 increments.

NOTE

For this challenge, you will need to edit the HTML and JavaScript.

Solution

We will add a v-on directive to the first button in the text-control component. This button will decrease the font size and, therefore, will emit the shrink-text event.

app.component('text-control', {
  template: `
    <div 
      class="btn-group" 
      role="group">
      <button 
        type="button" 
        class="btn btn-outline-secondary fs-6"
        @click="$emit('shrink-text')">A</button>
      <button 
        type="button" 
        class="btn btn-outline-secondary fs-5">A</button>
    </div>
  `
})

Then we perform the same process on the second button, which is used to increase the font size.

app.component('text-control', {
  template: `
    <div 
      class="btn-group" 
      role="group">
      <button 
        type="button" 
        class="btn btn-outline-secondary fs-6"
        @click="$emit('shrink-text')">A</button>
      <button 
        type="button" 
        class="btn btn-outline-secondary fs-5"
        @click="$emit('enlarge-text')">A</button>
    </div>
  `
})

With both buttons set up to emit events, we now add v-on directives to the <font-control> custom element so the root component can listen for the custom events.

<font-size-control
  @shrink-text="fontSize -= 0.1"
  @enlarge-text="fontSize += 0.1"></font-size-control>