Happy Cats

Consider this implementation of a cat in Scratch that counts from 1 toward infinity:

  1. (4 points.) Complete the reimplementation of that same cat in JavaScript, below, in such a way that the cat (aka cat.png) counts from 1 toward infinity by updating the value of #count once per second. You might find window.setInterval of interest!

    <!DOCTYPE html>
    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, width=device-width">
            <script>
    
                document.addEventListener('DOMContentLoaded', function() {
                    // TODO
                });
    
            </script>
            <style>
    
                #cat
                {
                    max-width: 50%;
                }
    
                #count
                {
                    font-size: xx-large;
                    vertical-align: top;
                }
    
            </style>
            <title>count</title>
        </head>
        <body>
            <img alt="cat" id="cat" src="https://cdn.cs50.net/2020/fall/test/cats/cat.png">
            <input id="count" readonly type="text">
        </body>
    </html>
    

Consider this implementation of a cat in Scratch that meows anytime it is clicked:

  1. (4 points.) Complete the reimplementation of that same cat in JavaScript, below, in such a way that the cat (aka cat.png) meows (by playing meow.mp3) anytime it is clicked, one meow per click. You might find audio and play of interest!

    <!DOCTYPE html>
    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, width=device-width">
            <script>
    
                document.addEventListener('DOMContentLoaded', function() {
                    // TODO
                });
    
            </script>
            <style>
    
                #cat
                {
                    max-width: 50%;
                }
    
            </style>
            <title>meow</title>
        </head>
        <body>
            <img alt="cat" id="cat" src="https://cdn.cs50.net/2020/fall/test/cats/cat.png">
            <audio>
                <source src="https://cdn.cs50.net/2020/fall/test/cats/meow.mp3" type="audio/mpeg">
            </audio>
        </body>
    </html>