008 Play MP3 Final Source Code

<html>

<head>
    <title>JavaScript</title>
    <style>
        .animal {
            width: 100px;
            height: 50px;
            color: black;
            text-align: center;
            border: 1px solid black;
            display: inline-block;
            margin: 15px;
        }
        
        .active {
            border: 1px solid red;
            color: red;
        }
    </style>
</head>

<body>
    <script>
        const myArray = ["lion", "cougar", "bark"];
        document.addEventListener("DOMContentLoaded", init);

        function init() {
            myArray.forEach(function (item) {
                let div = document.createElement("div");
                div.setAttribute("class", "animal " + item);
                div.innerText = item.toUpperCase();
                div.addEventListener("click", function () {
                    playit(item);
                })
                document.body.appendChild(div);
            })
        }

        function playit(name) {
            let activeEle = document.querySelector("." + name);
            let sound1 = new Audio("sound/" + name + ".mp3");
            sound1.play();
            activeEle.classList.add("active");
            setTimeout(function () {
                activeEle.classList.remove("active");
            }, 200)
        }
    </script>
</body>

</html>