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>