Pet Dino 2.0

[luketlancaster]

Pet Dino 2.0

User Story

As a user, when I click the “Pet Dino” button I will see the button text change to “Petting…” for 5 seconds, followed by a dismissable modal that says “HP+1 :heart:”

AC

When the user clicks the “Pet Dino” button, Then I will see the button text change to “Petting…” And that text will remain for 5 seconds, Then button text will return to default And a dismissible modal will appear that announces the new hit point level for that Dino.

Dev Notes

• [ ] Bootstrap button with text “Pet Dino” - element id should be pet-dino (follow style guide for color and size)
• [ ] Event listener for pet-dino button
• [ ] Callback function for event listener should be called petDino
• [ ] Change button text with innerHTML method
• [ ] petDino function should contain an inner function (coordinate with issues #14 and #9 for this function) to update the Dino array with new hit point increased by 1, change button text back to default (“Pet Dino”) and would call the dismissible modal
• [ ] Use setTimeout() to delay call of inner function for 5000ms.
• [ ] Text inside modal should be “HP +1” with Heart emoji. Modal background and chrome should be transparent so that the only part of the modal that is visible is the emoji and text. Should appear over that Dinos picture. Modal should dismiss itself after a few seconds. Pseudo-code:

  petDino {
  document.getElementById(‘pet-dino’).innerHTML = “Petting…”;
  changeHPPoints();
  setTimeout(function () {
      //change button text back to “Pet Dino”
      //call modal here
      //dismiss modal
      }, 5000);   
  }