JSFiddle - React, Tailwind, and code Playground

by Jacob Moore

HTML

<body>
  <div class="container">
    <header>
      <h1>Really Awesome Music Site</h1>
    </header>
    <section class="player">
      <audio class="music-player" controls="controls"><source src='' type='audio/mp4'></audio>
    </section>
    <section class="search">
      <form class="search-form">
        <input type="search" id="myInput" placeholder="Searchbox"/>
        <button id="search_button">Search</button>

      </form>
    </section>
    <section class="results"></section>
  </div>
  <script src="main.js"></script>
</body>

CSS

body {
  background-color: gray;
  max-width: 1300px;
  display: flex;
  justify-content: center;
}

.container{
  display: block;
}

#search_button{
  background-color: blue;
  height: 40px;
  width: 80px;
  font-size: 20px;
  margin-top: 10px;
}

#myInput{
  width: 215px;
}

JavaScript

let player = document.getElementsByClassName("player");
let music_player = document.getElementsByClassName("music-player");
let search = document.getElementsByClassName("search");
let search_form = document.getElementsByClassName("search-form");
let results = document.getElementsByClassName("results");
let inputElement = document.getElementById("myInput");

inputElement.addEventListener("keypress", function(event) { // NOTE: Need to change the event listener to Submit button click
  if (event.key == "Enter") {
    dataPull();
  }
});

function dataPull() {
    let api = "https://itunes.apple.com/search?term=jack+johnson&limit=25";
  fetch(api)
      .then(function(response) {
          if (response.status !== 200) {
            console.log(response.status);
            return;
          }

         //successful fetch function
          response.json().then(function(data){
            console.log(data);
            let returnResponse = document.createElement("div");
            let inputElement = inputElement.value;
            for (let i=0; i<data.length; i++){
              if (inputElement===data[i].artistName){
                console.log(data[i].artistName);
                returnResponse.innerHTML = `
                <div class="box">
                <img src=${artWorkUrl30} alt="Album Image">
                <p><span>Artist Name:</span>${data[i].artistName}</p>
                <p><span>Track: </span>${data[i].trackName}</p>
                <p><span>Album Name: </span>${data[i].collectionName}</p>
                <p><span>Album Price: </span>${data[i].collectionPrice}</p>
                </div>
                `;
                results.appendChild(returnResponse);
            }}
            console.log(data);
          });
        }
      )

     //error
      .catch(function(err) {
        console.log("Fetch Error :-S", err);
      });
}