JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<input type="text" data-input-band />
<button type="button" data-get-band>Get band</button>
<div data-band></div>

JavaScript

const get_band_btn = document.querySelector('[data-get-band]');
const band_container = document.querySelector('[data-band]');

get_band_btn.addEventListener('click', () => {
	
	let input_band = document.querySelector('[data-input-band]');
	let band = input_band.value;
	
	if (required(input_band)) {
			fetch('https://theaudiodb.com/api/v1/json/1/search.php?s=' + band)
          .then(
            	res => res.json()
          )
          .then(
              res => {
                  if (res.artists[0]) {
                    console.log(res.artists[0])
                    createBand(res.artists[0])
                  }
                  //createMeal(res.meals[0]);
              }
          )
          .catch(e => {
            	console.warn(e);
          }
      )			
	}

});







const createBand = (artist) => {
/* 	const ingredients = [];
	// Get all ingredients from the object. Up to 20
	for(let i=1; i<=20; i++) {
	  if(meal[`strIngredient${i}`]) {
	    ingredients.push(`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`)
	  } else {
	    // Stop if no more ingredients
	    break;
	  }
	} */
	
	const newInnerHTML = `
		<div>
    		<h1>${artist.strArtist}</h1>
				<img src="${artist.strArtistThumb}" alt="Artist Image">
				${artist.strGenre ? `<p><strong>Genre:</strong> ${artist.strGenre}</p>` : ''}
        ${artist.strBiographyEN ? `<p><strong>Bio</strong> ${artist.strBiographyEN}</p>` : ''}
		</div>
	`;
	
	band_container.innerHTML = newInnerHTML;
}






// If the length of the element's string is 0 then display helper message 
 function required(input) 
 {
	  if (input.value.length == 0)
		{  	
			 return false; 
		}  	
		return true; 
}