index.html

<!DOCTYPE html>
<html>

<head>
  <script src="scriptFunctions.js"> </script>
</head>

<body>

  <h2 style="background-color: lightpink; height: 30%; 
  text-align: center; border: 3px solid rgb(238, 127, 143);">
    This is my first JavaScript Project: Meow
  </h2>

  <p style="font-size: large;">Hello, this is <b>Meow</b> and she's not in the right mood to focus on anything. And that's where your turn comes. You can either help her to smile and become a friend or just ignore- the choice is all yours. <br> </p>


  <p style="text-align: center;">
    <button style="background-color: green; color: white; font-size: large; offset: 20%" onclick="changeToSmile()">Make Meow Happy</button>

    <img id="gif" src="./assets/mood.gif" style="width: 150px;">

    <button style="background-color: red; color: white; font-size: large; offset: 20%;" onclick="changeToSad()">Not Interested</button>

  </p>

</body>

</html>