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

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
Copyright iamanoopc ©


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

  <meta charset="UTF-8">
  <title>iTunes API Search App</title>
  <link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>

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



  <title>iTunes API Search App</title>
  <link href=",500i,700,700i" rel="stylesheet"/>
  <div class="container">
      <h1 class="text-center display-4 my-5">Search Music</h1>
    <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 class="text-center">
          <button class="btn btn-indigo" type="submit" name="button">Search <i class="fa fa-search ml-1"></i></button>
    <h3 id="results"> </h3>
    <section id="searchResults"></section>

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



/*Downloaded from */
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 */

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

searchForm.addEventListener("submit", function(event) {
    let searchTerm = document.getElementById('searchInput').value   
    // console.log("searchText", searchTerm)
    searchResults.innerHTML = ""
    //Fetching the data
    .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..."
          // 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>
                                  <p >${artistName}</p>
                                  <audio controls class ="audio">
                                  <source value="" src="${songPreview}" type="audio/mpeg">
                                  <a href="#" class="btn btn-primary">Play</a>

               searchResults.insertAdjacentHTML("beforeEnd", result)
        })//Data Mapping