iTunes API Search App

In this example below you will see how to do a iTunes API Search App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by iamanoopc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright iamanoopc ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iTunes API Search App</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<head>
  <title>iTunes API Search App</title>
  <link href="https://fonts.googleapis.com/css?family=Cabin:500,500i,700,700i" rel="stylesheet"/>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="text-center display-4 my-5">Search Music</h1>
    </header>
    <section class="my-5">
      <form id="searchForm">         
        <div class="md-form">
          <input class="form-control" id="searchInput" type="text" name="search" value="" placeholder="Enter your search name here"/>
        </div>
        <div class="text-center">
          <button class="btn btn-indigo" type="submit" name="button">Search <i class="fa fa-search ml-1"></i></button>
        </div>
      </form>
      <hr/>
    </section>
    <h3 id="results"> </h3>
    <section id="searchResults"></section>
  </div>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/iamanoopc/itunes-api-search-app-WXeYJw */
body {
  font-family: 'Cabin', sans-serif;
}
#searchResults {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.songcard {
  margin: 10px;
  flex-basis: 20%;
  width: 380px;
  height: auto;
  justify-content: center;
  border: 1px solid #eee;
}
.songcard .songcard-body {
  padding: 10px;
}
.audio {
  width: 200px;
  margin: 10px auto;
}
img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}


/*Downloaded from https://www.codeseek.co/iamanoopc/itunes-api-search-app-WXeYJw */

let searchForm = document.getElementById('searchForm'),
    searchResults = document.getElementById("searchResults"),
    results = document.getElementById("results")

searchForm.addEventListener("submit", function(event) {
    event.preventDefault()
    let searchTerm = document.getElementById('searchInput').value   
    // console.log("searchText", searchTerm)
    searchResults.innerHTML = ""
    
    //Fetching the data
    fetch(`https://itunes.apple.com/search?term=${searchTerm}`)
    .then (function (data){
        return data.json()
    })
    .then (function(json) {
        // console.log(json, "data") 
      
        //Mapping the data to HTML elements
        let data= json.results
        results.innerHTML = (data.length>0) ?"Results...": "Nothing found..."
        
       
        data.map((item)=>{
          // console.log(item)
          let artistName = item.artistName,
              albumImage = item.artworkUrl100,
              songName = item.collectionName,
              songPreview = item.previewUrl,
              
              result = `
                          
                          <div class="songcard">
                              <img class="" src="${albumImage}" alt="Card image cap">

                              
                              <div class="songcard-body">
                                 
                                  <h4 class="songcard-title">${songName}</h4>
                                  <!--Text-->
                                  <p >${artistName}</p>
                                  <audio controls class ="audio">
                                  <source value="" src="${songPreview}" type="audio/mpeg">
                                  <a href="#" class="btn btn-primary">Play</a>
                              </div>

                          </div>
                         
                       `
               searchResults.insertAdjacentHTML("beforeEnd", result)
            
            
          
        })//Data Mapping
        
    })
})

Comments