vikingeducation · Austin1780 · Nov 11, 2017 · Nov 12, 2017 · Nov 12, 2017 · Nov 12, 2017
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # assignment_royalty_free_music_player
 Ushering in the reign of Royalty Free Music w/ JavaScript.
+Austin Smith
diff --git a/audio/Gillicuddy_-_01_-_Jupiter_the_Blue.mp3 b/audio/Gillicuddy_-_01_-_Jupiter_the_Blue.mp3
diff --git a/audio/Jason_Shaw_-_RUNNING_WATERS.mp3 b/audio/Jason_Shaw_-_RUNNING_WATERS.mp3
diff --git a/audio/Kevin_MacLeod_-_08_-_Slow_Burn.mp3 b/audio/Kevin_MacLeod_-_08_-_Slow_Burn.mp3
diff --git a/audio/Paper_Navy_-_08_-_Swan_Song.mp3 b/audio/Paper_Navy_-_08_-_Swan_Song.mp3
diff --git a/audio/Scott_Joplin_-_04_-_The_Entertainer_1902_piano_roll.mp3 b/audio/Scott_Joplin_-_04_-_The_Entertainer_1902_piano_roll.mp3
diff --git a/images/FF.jpg b/images/FF.jpg
diff --git a/images/RR.jpg b/images/RR.jpg
diff --git a/images/Thumbs.db b/images/Thumbs.db
diff --git a/images/crown.jpg b/images/crown.jpg
diff --git a/images/pause.jpg b/images/pause.jpg
diff --git a/images/play_button.png b/images/play_button.png
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Austin Smith - Royalty Free Music Player</title>
+  <meta charset="UTF-9">
+  <meta name="viewport" content="width= device-width initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="script.js"> </script>
+</head>
+<body>
+  <header id="header">
+    <img id="logo" src="images/crown.jpg">
+    <h1>Austin's Royalty Free Music Player</h1>
+  </header>
+
+  <main id="main">
+
+    <!-- song #1-->
+    <section>
+      <div class="playBox">
+        <img class="play" src="images/play_button.png">
+      </div>
+      <div class="trackInfo">
+        <h2>Jupiter the Blue</h2>
+        <p>Gillicuddy</p>
+      </div>
+      <audio src="audio/Gillicuddy_-_01_-_Jupiter_the_Blue.mp3"></audio>
+    </section>
+
+    <!-- song #2-->
+    <section>
+      <div class="playBox">
+        <img class="play" src="images/play_button.png">
+      </div>
+      <div class="trackInfo">
+        <h2>Running Waters</h2>
+        <p>Jason Shaw</p>
+      </div>
+      <audio src="audio/Jason_Shaw_-_RUNNING_WATERS.mp3"></audio>
+    </section>
+
+    <!-- song #3-->
+    <section>
+      <div class="playBox">
+        <img class="play" src="images/play_button.png">
+      </div>
+      <div class="trackInfo">
+        <h2>Slow Burn</h2>
+        <p>Kevin MacLeod</p>
+      </div>
+      <audio src="audio/Kevin_MacLeod_-_08_-_Slow_Burn.mp3"></audio>
+    </section>
+
+    <!-- song #4-->
+    <section>
+      <div class="playBox">
+        <img class="play" src="images/play_button.png">
+      </div>
+      <div class="trackInfo">
+        <h2>Swan Song</h2>
+        <p>Paper Navy</p>
+      </div>
+      <audio src="audio/Paper_Navy_-_08_-_Swan_Song.mp3"></audio>
+    </section>
+
+    <!-- song #5-->
+    <section>
+      <div class="playBox">
+        <img class="play" src="images/play_button.png">
+      </div>
+      <div class="trackInfo">
+        <h2>The Entertainer</h2>
+        <p>Scott Joplin</p>
+      </div>
+      <audio src="audio/Scott_Joplin_-_04_-_The_Entertainer_1902_piano_roll.mp3"></audio>
+    </section>
+
+  </main>
+
+  <footer id="footer">
+    <div id="controls">
+      <img id="prev" src="images/RR.jpg">
+      <img id="playPause" src="images/play_button.png">
+      <img id="next" src="images/FF.jpg">
+      <div class="trackInfo">
+        <h2 id="currentSong">Song</h2>
+        <p id="currentArtist">Artist</p>
+      </div>
+    </div>
+    <audio id="currentMusic" src="audio/Gillicuddy_-_01_-_Jupiter_the_Blue.mp3"></audio>
+  </footer>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,103 @@
+$(document).ready(function() {
+
+  let songIndex = 0;
+
+  //listens for click on each song's play/pause button
+  $(".play").each((idx, el) => {
+    $(el).on("click", () => {
+      if ($(el).attr("src") === "images/play_button.png") {
+        for (i = 1; i <= 5; i++) {
+          $("img").eq(i).attr("src", "images/play_button.png");
+          $("h2").eq(i - 1).removeClass("current");
+        }
+        $(el).attr("src", "images/pause.jpg");
+        $("#playPause").attr("src", "images/pause.jpg");
+        let newSong = $("audio").eq(idx).attr("src");
+        songIndex = idx;
+        if ($("#currentMusic").attr("src") !== newSong) {
+          $("#currentMusic").attr("src", newSong);
+        }
+        $("h2").eq(idx).addClass("current");
+        $("audio").get(5).play();
+        let songName = $("h2").eq(idx).text();
+        let artistName = $("p").eq(idx).text();
+        $("h2").eq(5).text(songName);
+        $("p").eq(5).text(artistName);
+        /*let songName = $("h2").eq(idx).text;
+        let artistName = $("p").eq(idx).text;
+        console.log(songName);
+        $("h2").eq(5).text(songName);
+        $("h2").eq(5).text(artistName);*/
+      } else {
+        $(el).attr("src", "images/play_button.png");
+        $("#playPause").attr("src", "images/play_button.png");
+        $("h2").eq(idx).removeClass("current");
+        $("audio").get(5).pause();
+      }
+    })
+  })
+
+  //listens for click on the footer play/pause button
+  $("#playPause").on("click", () => {
+    if ($("#playPause").attr("src") === "images/play_button.png") {
+      $("#playPause").attr("src", "images/pause.jpg");
+      $(".play").eq(songIndex).attr("src", "images/pause.jpg");
+      $("h2").eq(songIndex).addClass("current");
+      $("audio").get(5).play();
+    } else {
+      $("#playPause").attr("src", "images/play_button.png");
+      $(".play").eq(songIndex).attr("src", "images/play_button.png");
+      $("h2").eq(songIndex).removeClass("current");
+      $("audio").get(5).pause();
+    }
+  });
+
+  //listens for click on previous button
+  $("#prev").on("click", () => {
+    for (i = 1; i <= 5; i++) {
+      $("img").eq(i).attr("src", "images/play_button.png");
+      $("h2").eq(i - 1).removeClass("current");
+    }
+    if ($("#playPause").attr("src") === "images/pause.jpg") {
+      if (songIndex !== 0) {
+        songIndex = songIndex - 1;
+      } else {
+        songIndex = 4;
+      }
+      let newSong = $("audio").eq(songIndex).attr("src");
+      $("#currentMusic").attr("src", newSong);
+      $("audio").get(5).play();
+      $(".play").eq(songIndex).attr("src", "images/pause.jpg");
+      $("h2").eq(songIndex).addClass("current");
+      let songName = $("h2").eq(songIndex).text();
+      let artistName = $("p").eq(songIndex).text();
+      $("h2").eq(5).text(songName);
+      $("p").eq(5).text(artistName);
+    }
+  });
+
+  //listens for click on next button
+  $("#next").on("click", () => {
+    for (i = 1; i <= 5; i++) {
+      $("img").eq(i).attr("src", "images/play_button.png");
+      $("h2").eq(i - 1).removeClass("current");
+    }
+    if ($("#playPause").attr("src") === "images/pause.jpg") {
+      if (songIndex !== 4) {
+        songIndex = songIndex + 1;
+      } else {
+        songIndex = 0;
+      }
+      let newSong = $("audio").eq(songIndex).attr("src");
+      $("#currentMusic").attr("src", newSong);
+      $("audio").get(5).play();
+      $(".play").eq(songIndex).attr("src", "images/pause.jpg");
+      $("h2").eq(songIndex).addClass("current");
+      let songName = $("h2").eq(songIndex).text();
+      let artistName = $("p").eq(songIndex).text();
+      $("h2").eq(5).text(songName);
+      $("p").eq(5).text(artistName);
+    }
+  });
+
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,75 @@
+section {
+  border: 2px solid black;
+  height: 80px;
+  display: flex;
+}
+section h2 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: black;
+  font-weight: bold;
+}
+section p {
+  margin-top: 10px;
+  color: gray;
+  font-weight: bold;
+}
+
+.play {
+  height: 75px;
+  width: auto;
+  padding: 2px;
+}
+
+#header {
+  border: 5px solid black;
+  background: #d9d9db;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+#header #logo {
+  width: 150px;
+  height: auto;
+  margin: 10px;
+}
+
+#header h1 {
+  font-family: "Roboto", sans-serif;
+  text-align: left;
+  margin-left: 50px;
+  font-size: 50px;
+}
+
+#footer {
+  background-color: black;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+#footer h2, #footer p {
+  font-family: "Roboto", sans-serif;
+  color: white;
+}
+#footer h2 {
+  font-size: 28px;
+}
+#footer p {
+  font-size: 20px;
+}
+
+#controls {
+  display: flex;
+  align-items: flex-start;
+}
+
+.trackInfo {
+  text-align: left;
+  margin-left: 30px;
+}
+
+.current {
+  color: blue;
+}