Creating a soundtrack app in JavaScript to search and display tracks

1 year ago

#292252

Andrea Berger

I'm trying to build a small JavaScript program which allows the users to enter a search query, and then find the results of these query and display them through an asynchronous request. Below you can find what I tried so far, but it doesn't display anything other than a search box. Could you please help with implementation? Thanks in advance!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Podcasts</title>
<script>
    // TODO 1: Ensure that the main part of the script is executed when the DOM is ready.
    document.addEventListener('DOMContentLoaded', function (event) {

    })

    // TODO 2: Set the constant input to the input field from the HTML body
    const input = document.getElementById("input");
    const outputDiv = document.getElementById("output");

    // Attach the event handler to the input
    // Event handler function for when the user types
    // TODO 3: Register the inputHandler function as event listener on the input
    function InputHandler() {
        input.addEventListener('submit', function (event) {
            // TODO 4:
            //  While the user types in the field, the event listener inputHandler
            //  shall create an asynchronous request to access the API to search
            //  for soundtracks by title.
            async function asynchronousRequest () {
                const id = await document.getElementsByName('input');
                return document.getElementById(id);
            }
        });
    }

    function responseHandler (soundtracks) {
        outputDiv.innerHTML = '';
        const tb1 = document.createElement('table');
        // TODO 5: Process the result
        soundtracks.forEach(soundtrack => {
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            tr.append(td1);
            let td2 = document.createElement('td');
            tr.append(td2);
            let td3 = document.createElement('td');
            tr.append(td3);
        })
        const tr = tb1.insertRow();
        const td1 = tr.insertCell();

        // TODO 6: Create an additional audio element and set source to soundtracks' audioSrc.
        const audio = document.getElementById("audioSrc").src;
        outputDiv.appendChild(tb1);
        outputDiv.appendChild(td1);
        outputDiv.appendChild(audio);
    }

</script>
</head>
<body>
<input type="text" class="user-input">
<div id="output"></div>
</body>
</html>

javascript

dom

audio

addeventlistener

asynchronous-javascript

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs