Spaces:
Running
Running
| const form = document.querySelector('form'); | |
| const input = document.querySelector('input[type="text"]'); | |
| const searchButton = document.querySelector('input[type="submit"]'); | |
| const resultsDiv = document.querySelector('.results'); | |
| form.addEventListener('submit', handleSubmit); | |
| searchButton.addEventListener('click', handleSubmit); | |
| function handleSubmit(event) { | |
| event.preventDefault(); | |
| const inputValue = input.value; | |
| if (inputValue.length > 0) { | |
| const request = new XMLHttpRequest(); | |
| request.open('GET', `//api.dataseer.com/v1/music?keywords=${inputValue}`, true); | |
| request.onload = function () { | |
| if (request.status === 200) { | |
| const data = JSON.parse(request.responseText); | |
| if (data.results) { | |
| renderResults(data.results); | |
| } | |
| } else { | |
| alert('Error getting results'); | |
| } | |
| }; | |
| request.send(); | |
| } | |
| } | |
| function renderResults(results) { | |
| resultsDiv.innerHTML = ''; | |
| results.forEach((result) => { | |
| const artist = document.createElement('div'); | |
| artist.className = 'result'; | |
| const title = document.createElement('h3'); | |
| const text = document.createTextNode(result.name); | |
| title.appendChild(text); | |
| artist.appendChild(title); | |
| resultsDiv.appendChild(artist); | |
| }); | |
| } |