vikingeducation · Visiona · Sep 24, 2017 · Sep 24, 2017 · Sep 24, 2017 · Sep 28, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/.sass-cache/1697b72c9d9d2b0ba999587fc9dcf096011855ee/master.scssc b/.sass-cache/1697b72c9d9d2b0ba999587fc9dcf096011855ee/master.scssc
diff --git a/README.md b/README.md
@@ -1,2 +1,37 @@
-# assignment_royalty_free_music_player
-Ushering in the reign of Royalty Free Music w/ JavaScript.
+# Royalty Free Music Player - JavaScript/jQuery
+
+HTML, CSS, JavaScript, jQuery
+
+Here is my music player based on a images provided by VCS. The music player holds a playlist of some royalty free songs. You can play any of them and jump between songs. Here are some requirements that this projects meet, originally requested by Viking Code School:
+- A list of songs listed with their artists
+- Each song should either be clickable or have a play button
+- Each song should display differently when it’s being played
+- A status bar with a play/pause button and the information for the current track
+- The status bar should also have next and previous track buttons
+
+
+![Music Player](music_player.png)
+
+## Getting Started
+
+OPEN LINK: http://cdn.rawgit.com/Visiona/assignment_royalty_free_music_player/f5bde28c/index.html
+
+OR
+
+You can clone the repository to your laptop and got into the project folder, then run:
+
+```
+ruby -run -e httpd . -p 9090
+
+```
+
+and open broswer on http://localhost:9090/
+
+## Authors
+
+* **Dariusz Biskupski** - *Initial work* - https://dariuszbiskupski.com
+
+
+## Acknowledgments
+
+This assignment I created for [Viking Code School](https://www.vikingcodeschool.com/)
diff --git a/app/sass b/app/sass
@@ -0,0 +1,25 @@
+/*
+Errno::ENOENT: No such file or directory @ rb_sysopen - app/sass
+
+Backtrace:
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:454:in `read'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:454:in `update_stylesheet'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `each'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:294:in `watch'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin.rb:109:in `method_missing'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:360:in `watch_or_update'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:51:in `process_result'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/base.rb:52:in `parse'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/base.rb:19:in `parse!'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/bin/sass:13:in `<top (required)>'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/sass:23:in `load'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/sass:23:in `<main>'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/ruby_executable_hooks:15:in `eval'
+/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/ruby_executable_hooks:15:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Errno::ENOENT: No such file or directory @ rb_sysopen - app/sass"; }
diff --git a/assets/crown.png b/assets/crown.png
diff --git a/composer.json b/composer.json
@@ -0,0 +1 @@
+{}
diff --git a/home.html b/home.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+
+
+
+  <link rel="stylesheet" href="out_master.css">
+
+  <title>Royalty Music Player</title>
+</head>
+
+<body>
+  <div class="music-wrapper">
+
+    <div class="title-wrapper">
+      <img src="assets/crown.png" alt="">
+      <h3>Royalty Free Music Player</h3>
+    </div>
+
+    <div class="playlist">
+    </div>
+
+    <a href="javascript:void(0)" class="test-song">
+
+      <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
+      <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
+      <div class="song-title">
+        <h5></h5>
+        <h6></h6>
+      </div>
+
+    </a>
+
+    <div class="playing-song">
+
+      <a href="javascript:void(0)" class="controls">
+        <span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
+        <span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
+        <div class="song-playing-title">
+          <h4></h4>
+          <h5></h5>
+        </div>
+      </a>
+
+    </div>
+
+  </div>
+
+  <!-- jQuery library -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <!-- <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> -->
+  <!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="music.js"></script>
+
+
+  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
+
+
+</body>
+
+</html>
diff --git a/index.php b/index.php
@@ -0,0 +1 @@
+<?php include_once("home.html"); ?>
diff --git a/master.scss b/master.scss
@@ -0,0 +1,102 @@
+@import url('https://fonts.googleapis.com/css?family=Oswald');
+
+body {
+  font-family: 'Oswald', sans-serif;
+  color: #333;
+}
+
+div.title-wrapper {
+  background-color: #ccc;
+  padding: 3px;
+  border-bottom: 1px solid #333;
+  text-align: center;
+  h3 {
+    display: inline-block;
+    font-weight: 200;
+    margin-top: 15px;
+    margin-bottom: 0;
+  }
+  img {
+    width: 30px;
+    margin-bottom: 10px;
+    display: inline;
+  }
+
+}
+
+div.music-wrapper {
+  width: 500px;
+  margin: 80px auto;
+  border: 1px solid #333;
+}
+
+h6 {
+  color: #888;
+  margin: 5px 2px;
+}
+
+h5, h4 {
+  margin: 5px 2px;
+}
+
+
+div.playlist {
+  min-height: 150px;
+  max-height: 300px;
+  overflow-y: scroll;
+  overflow: auto;
+}
+
+div.playlist a.song-listed {
+  padding: 5px;
+  border-bottom: 1px solid #333;
+  font-size: 25px;
+  color: #ccc;
+  text-decoration: none;
+  display: block;
+  div.song-title {
+    max-width: 200px;
+    display: inline-block;
+    margin-left: 10px;
+  }
+  span.glyphicon {
+    top: -5px;
+  }
+}
+
+a.song-listed:hover > *{
+    color: #000;
+}
+
+
+div.playing-song {
+  background-color: #333;
+  padding: 5px 2px;
+
+  a.controls {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 15px;
+    margin-left: 20px;
+    text-decoration: none;
+    span.glyphicon {
+      font-size: 25px;
+      color: #fff;
+      top: -2px;
+    }
+    span.glyphicon:hover {
+      color: #666;
+    }
+  }
+
+  div.song-playing-title {
+    font-family: Helvetica;
+    color: #fff;
+    font-weight: 100;
+    display: inline-block;
+    margin-left: 10px;
+    h5 {
+      color: #999;
+    }
+  }
+}