Pet of the Month explainer

The aim of this puzzle: Add an event listener to a button that changes its text when the button is clicked.

Walkthrough of the solution: Event listeners wait for a specific event, for example, click , and then run a callback function when that event occurs.

In this puzzle, you’ll add an event listener to buttonso its text changes to 'voted' when it’s clicked.
To complete the puzzle, attach .addEventListener() to button. Set the first argument inside the parentheses () to 'click'.

Set the second argument inside the parentheses () to an arrow function. Inside the code block {} of the arrow function, set the .textContent of button to 'voted'.

Sample code solution:
(Tap below to reveal)

import { puppyProfile } from 'animals.data';

let title = document.createElement('h1');
title.textContent = 'Pet of the Month';

let dogName = document.createElement('h2');
dogName.textContent = puppyProfile[0];

let img = document.createElement('img');
img.src = puppyProfile[1];

let description = document.createElement('p');
description.textContent = puppyProfile[2];

let button = document.createElement('button');
button.textContent = 'vote';

button.addEventListener( 'click', () => {
    button.textContent = 'voted';
});

document.body.appendChild(title);
document.body.appendChild(dogName);
document.body.appendChild(img);
document.body.appendChild(description);
document.body.appendChild(button);

HTML Concepts:<button>
JavaScript Concepts: .textContent, .createElement(), document, body, .appendChild(), addEventListener method, Arrow Function