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);
 });
}