vikingeducation · Holly-E · Dec 4, 2017 · Dec 4, 2017 · Dec 4, 2017 · Dec 4, 2017
diff --git a/.sass-cache/c5f2f6d364c6af5bb7be6097931c46301aaadcda/styles.scssc b/.sass-cache/c5f2f6d364c6af5bb7be6097931c46301aaadcda/styles.scssc
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.
+Create a fully functioning music player w/ JavaScript.
+
+# assignment_royalty_free_music_player for Viking Code School
diff --git a/audio/Mnage_Quad_-_06_-_How_Sweet_It_Is_Interlude.mp3 b/audio/Mnage_Quad_-_06_-_How_Sweet_It_Is_Interlude.mp3
diff --git a/audio/Podington_Bear_-_Blue_Highway.mp3 b/audio/Podington_Bear_-_Blue_Highway.mp3
diff --git a/audio/Sonic_Snafu_-_04_-_Sleep.mp3 b/audio/Sonic_Snafu_-_04_-_Sleep.mp3
diff --git a/audio/The_Underscore_Orkestra_-_02_-_Devil_on_my_Shoulder.mp3 b/audio/The_Underscore_Orkestra_-_02_-_Devil_on_my_Shoulder.mp3
diff --git a/audio/US_Army_Blues_-_11_-_Walk_That_Dog.mp3 b/audio/US_Army_Blues_-_11_-_Walk_That_Dog.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Royalty Free Music Player</title>
+
+  <link rel="stylesheet" type="text/css" href="styles/styles.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+  <script type="text/javascript" src="scripts.js"></script>
+</head>
+
+<body>
+  <div id="container">
+    <header>
+      <i class="fa fa-music fa-2x" aria-hidden="true"></i>
+      <span class="top">Royalty Free Music Player</span>
+    </header>
+
+    <section id=selections>
+      <div class="songs">
+        <i class="fa fa-play" aria-hidden="true"></i>
+        <div class="songInfo">
+          <span class="song1">Menage Quad</span>
+          <span class="song2">How Sweet It Is</span>
+          <audio>
+            <source src="audio/Mnage_Quad_-_06_-_How_Sweet_It_Is_Interlude.mp3" type="audio/mpeg">
+          </audio>
+        </div>
+      </div>
+      <div class="songs">
+        <i class="fa fa-play" aria-hidden="true"></i>
+        <div class="songInfo">
+          <span class="song1">Podington Bear</span>
+          <span class="song2">Blue Highway</span>
+          <audio>
+            <source src="audio/Podington_Bear_-_Blue_Highway.mp3" type="audio/mpeg">
+          </audio>
+        </div>
+      </div>
+      <div class="songs">
+        <i class="fa fa-play" aria-hidden="true"></i>
+        <div class="songInfo">
+          <span class="song1">Sonic Snafu</span>
+          <span class="song2">Sleep</span>
+          <audio>
+            <source src="audio/Sonic_Snafu_-_04_-_Sleep.mp3" type="audio/mpeg">
+          </audio>
+        </div>
+      </div>
+      <div class="songs">
+        <i class="fa fa-play" aria-hidden="true"></i>
+        <div class="songInfo">
+          <span class="song1">The Underscore Orkestra</span>
+          <span class="song2">Devil on my Shoulder</span>
+          <audio>
+            <source src="audio/The_Underscore_Orkestra_-_02_-_Devil_on_my_Shoulder.mp3" type="audio/mpeg">
+          </audio>
+        </div>
+      </div>
+      <div class="songs">
+        <i class="fa fa-play" aria-hidden="true"></i>
+        <div class="songInfo">
+          <span class="song1">US Army Blues</span>
+          <span class="song2">Walk That Dog</span>
+          <audio>
+            <source src="audio/US_Army_Blues_-_11_-_Walk_That_Dog.mp3" type="audio/mpeg">
+          </audio>
+        </div>
+      </div>
+    </section>
+
+    <div class="filler"></div>
+
+    <footer>
+      <div id="controls">
+        <i class="fa fa-step-backward" aria-hidden="true"></i>
+        <i id="playPause" class="fa fa-play-circle-o fa-2x" aria-hidden="true"></i>
+        <i class="fa fa-step-forward" aria-hidden="true"></i>
+      </div>
+      <div id="displayBar">
+        <span class="bottom1">Menage Quad</span>
+        <span class="bottom2">How Sweet It Is</span>
+      </div>
+
+    </footer>
+
+  </div>
+
+</body>
+
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,152 @@
+/*jshint esversion: 6 */
+
+$(document).ready(function() {
+  //create array of song files
+  let $songs = $('.songInfo').find('audio');
+  let arrSongs = $songs.get();
+
+  //create array of play buttons
+  let $play = $('.songs').find('i');
+  let arrPlay = $play.get();
+
+  //create array of songs to style
+  let $songDivs = $('#selections').find('.songs');
+  let arrSongDivs = $songDivs.get();
+
+  (function colorSongs() {
+    for (var i = 0; i < arrSongDivs.length; i++) {
+      if (i == 0 || i % 2 == 0) {
+        $(arrSongDivs[i]).addClass('light');
+      } else {
+        $(arrSongDivs[i]).addClass('dark');
+      }
+    }
+  })();
+
+  //keep track of current song
+  var currentSong = 0;
+
+  //show current song information in footer
+  function updateFooter(current) {
+    let band = $(arrSongs[current])
+      .siblings('.song1')
+      .text();
+    let song = $(arrSongs[current])
+      .siblings('.song2')
+      .text();
+    $('.bottom1').text(band);
+    $('.bottom2').text(song);
+  }
+
+  //toggle play/pause button next to song
+  function togglePlayTop(current) {
+    $(arrPlay[current])
+      .toggleClass('fa-play')
+      .toggleClass('fa-pause');
+  }
+
+  //toggle play/pause button in footer
+  function togglePlayBottom() {
+    $('#playPause')
+      .toggleClass('fa-pause-circle-o')
+      .toggleClass('fa-play-circle-o');
+  }
+
+  //pause (previous) song after forward/back buttons are clicked
+  function pauseSong() {
+    arrSongs[currentSong].pause();
+    $(arrPlay[currentSong])
+      .removeClass('fa-pause')
+      .addClass('fa-play');
+  }
+
+  //play next song after forward/back buttons are clicked
+  function playNextSong() {
+    arrSongs[currentSong].play();
+    updateFooter(currentSong);
+    $('#playPause')
+      .removeClass('fa-play-circle-o')
+      .addClass('fa-pause-circle-o');
+    $(arrPlay[currentSong])
+      .removeClass('fa-play')
+      .addClass('fa-pause');
+  }
+
+
+let handlers = {
+
+  //click event for play/pause button next to song
+  clickSong: function() {
+    $(arrPlay).click(function(e) {
+      for (let i = 0; i < arrPlay.length; i++) {
+        if (e.target == arrPlay[i]) {
+          currentSong = i;
+
+          //on click of play button, play song & update footer
+          if ($(arrPlay[i]).hasClass('fa-play')) {
+            arrSongs[i].play();
+            togglePlayTop(i);
+            togglePlayBottom(i);
+            updateFooter(i);
+
+            return currentSong;
+
+            //on click of pause button, pause song
+          } else {
+            arrSongs[i].pause();
+            togglePlayTop(i);
+            togglePlayBottom();
+            return;
+          }
+        }
+      }
+    });
+  },
+
+  //click event for play/pause button on footer
+  clickPlayFooter: function() {
+    $('#playPause').on('click', function() {
+      if ($('#playPause').hasClass('fa-play-circle-o')) {
+        arrSongs[currentSong].play();
+        togglePlayTop(currentSong);
+        togglePlayBottom();
+      } else {
+        arrSongs[currentSong].pause();
+        togglePlayTop(currentSong);
+        togglePlayBottom();
+      }
+    });
+  },
+
+  //click event for forward/back buttons
+  clickForwardBack: function() {
+    $('.fa-step-backward').on('click', function() {
+      pauseSong();
+      if (currentSong == 0) {
+        currentSong = arrSongs.length - 1;
+      } else {
+        currentSong--;
+      }
+      playNextSong();
+      return currentSong;
+    });
+
+    $('.fa-step-forward').on('click', function() {
+      pauseSong();
+      if (currentSong == arrSongs.length - 1) {
+        currentSong = 0;
+      } else {
+        currentSong++;
+      }
+      playNextSong();
+      return currentSong;
+    });
+  }
+
+};
+
+
+  handlers.clickSong();
+  handlers.clickPlayFooter();
+  handlers.clickForwardBack();
+});
diff --git a/styles/.sass-cache/c5f2f6d364c6af5bb7be6097931c46301aaadcda/styles.scssc b/styles/.sass-cache/c5f2f6d364c6af5bb7be6097931c46301aaadcda/styles.scssc
diff --git a/styles/.sass-cache/e61908abbfba1586e7557b16f583ce49b2e3d10f/styles.scssc b/styles/.sass-cache/e61908abbfba1586e7557b16f583ce49b2e3d10f/styles.scssc
diff --git a/styles/styles.css b/styles/styles.css