Untitled

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
    <body>
        <div style="background-color:#4CAF50">
        <center><h1>Taco Time!</h1></center>
        </div>

        <div style="background-color:lightblue">
        <center><button class="button" onclick="document.getElementById('myImage').src='Images/taco.png'">Fill Taco</button>
        <img id="myImage" src="Images/taco shell.png" style="width:250px" "height:250px">
        <button class="button" onclick="document.getElementById('myImage').src='Images/taco shell.png'">Empty Taco</button></center>


        <center><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="Images/sizetaco.png" alt="tacoSize" style=margin-top:80px width="75" height="75"></center>
        <center><h3>Help me grow by hovering over me! </h3></center>

        <center><img id="tacoLine" src="Images/tacoline10.png" style=margin-top:80px style="width:250px" "height:250px"></center>
        <center><button class="button" onclick="buttonCounter()">Eat Taco</button></center>

        <center><h3> Here are some tacos for you, we only have 10 though. </h3></center>

        <script>
            var tacosEaten = 0;

            function buttonCounter(){
                if (tacosEaten < 10){
                   tacosEaten++;
                   var pathToImage = "Images/tacoline" + (10 - tacosEaten) + ".png";
                   document.getElementById('output').innerHTML = "You have eaten " + tacosEaten + " tacos!";
                   document.getElementById('tacoLine').src = pathToImage;
               } else {
                   document.getElementById('output').innerHTML = "There are no more tacos!";
                   document.getElementById('tacoLine').src = "Images/tacoline0.png";
               }

          }

          function bigImg(x) {
              x.style.height = "150px";
              x.style.width = "150px";
          }

          function normalImg(x) {
              x.style.height = "75px";
              x.style.width = "75px";
          }

      </script>

        <center><h3 id="output"></h3></center>
    </div>
    </body>
</html>