<html>
<head>
  <title>iTunes Music Search</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header>
      <h1>Awesome Music Site</h1>
    </header>

    <section class="player">
      <audio class="music-player" controls="controls" src="" value="" autoplay></audio>
    </section>

   <hr>

    <section class="search">

      <form class="search-form">
       <input class="searchname" id="searchname" type="text" name="search" value="" placeholde = "search your song here">
   <button type="submit" name="button"> Search </button>
      </form>


    </section>

    <h3>Search result</h3>
    <div class="result-show">

    <section>

    </section>

  </div>
</div>
  <script src="main.js"></script>
</body>
</html>
body {
  background-color: white;
}

.searchname {
    width: 900px;
    padding: 14px;
    font-size: 16px;
    margin: 10px;
    margin-left: 190px;

}

img {
    width: 200px;
    height: 200px;
    margin-left: 35px;
    margin-top: 20px;

}

input[type=submit] {
    padding: 13px;
    width:50px;
    height: 50px;
    background:url("search.png");

    }

audio {
    width: 1000px;
    padding: 20px;
    margin-left: 180px;
}

.result-show {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

h1 {
    font-size: 40px;
    color: grey;
    font-family: 'Raleway', sans-serif;
    text-align: center;

}

.song {
    margin: 10px;
    flex-basis: 20%;
    width: 380px;
    height: auto;
    justify-content: center;
    border: 1px solid #E0E0E0;

}

.song h3 {
    font-size: 12px;
    color: #009999;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.song h2 {
    font-size: 14px;
    font-style: bold;
    color: #606060;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

h3 {
    font-size: 16px;
    color: #606060;
    font-family: 'Raleway', sans-serif;
    text-align: left;
    margin-left: 20px;
}

.play {
    width:120px;
    margin: 10px auto; width: 220px;}
}


img {
    width: 200px;
    height: 200px;
    margin-left: 35px;
    margin-top: 20px;

}
let form = document.querySelector(".search-form")
let resultShow = document.querySelector(".result-show")
let button = document.querySelector(".search")
let input = document.querySelector(".searchname")
let audio = document.querySelector("audio")


console.log(audio)
// text value need to storage when the submit button action happen
form.addEventListener("submit", function(event) {
    event.preventDefault()

    let searchText = document.querySelector("#searchname").value

    console.log("searchText", searchText)

    resultShow.textContent = ""

fetch(`https://itunes.apple.com/search?term=${searchText}`)  /// fetch pattern
.then (function (data){
    return data.json()
})
.then (function(json) {
    console.log(json)   /// fetch pattern

    for (var i = 0; i < json.results.length; i++) {
        let name = json.results[i].artistName
        let img = json.results[i].artworkUrl100
        let songName = json.results[i].collectionName
        let audio2 = json.results[i].previewUrl

        let show = `
        <div class = "song">
            <img src="${img}" value= "${audio2}" alt="">
            <h3> ${name} </h3>
            <h2> ${songName} </h2>
            <audio controls class = "play">
            <source value="" src="${audio2}" type="audio/mpeg">
        </div>
        `
        ///img scr tag, then add new value tag, so I can call it later
        ///when other event happend///
        resultShow.insertAdjacentHTML("beforeEnd", show)
    }
})
})

resultShow.addEventListener("click", function (click) {
    let img = document.querySelectorAll("img")
    if (click.target && click.target.nodeName === "IMG") // capital img tag
    audio.src = click.target.getAttribute("value")
    console.log("audio", audio.src)
    // click.target.getAttribute("value")

})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.