diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 2464d38..bcaf304 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -# assignment_royalty_free_music_player -Ushering in the reign of Royalty Free Music w/ JavaScript. +Royalty Free Music Player built with JavaScript and jQuery. +Preview: https://sarahschoonmaker.github.io/assignment_royalty_free_music_player/ diff --git a/audio/Dead_Moon7.mp3 b/audio/Dead_Moon7.mp3 new file mode 100644 index 0000000..198b55a Binary files /dev/null and b/audio/Dead_Moon7.mp3 differ diff --git a/audio/Fred_and_Toody8.mp3 b/audio/Fred_and_Toody8.mp3 new file mode 100644 index 0000000..c1abc03 Binary files /dev/null and b/audio/Fred_and_Toody8.mp3 differ diff --git a/audio/Pierced_Arrows9.mp3 b/audio/Pierced_Arrows9.mp3 new file mode 100644 index 0000000..9d10c09 Binary files /dev/null and b/audio/Pierced_Arrows9.mp3 differ diff --git a/audio/Scott_Holmes13.mp3 b/audio/Scott_Holmes13.mp3 new file mode 100644 index 0000000..4f6b389 Binary files /dev/null and b/audio/Scott_Holmes13.mp3 differ diff --git a/audio/Scott_Holmes3.mp3 b/audio/Scott_Holmes3.mp3 new file mode 100644 index 0000000..b37c658 Binary files /dev/null and b/audio/Scott_Holmes3.mp3 differ diff --git a/images/crown.jpg b/images/crown.jpg new file mode 100644 index 0000000..137e634 Binary files /dev/null and b/images/crown.jpg differ diff --git a/images/forward.jpg b/images/forward.jpg new file mode 100755 index 0000000..078ef74 Binary files /dev/null and b/images/forward.jpg differ diff --git a/images/pause.jpg b/images/pause.jpg new file mode 100644 index 0000000..d809efe Binary files /dev/null and b/images/pause.jpg differ diff --git a/images/play_button.png b/images/play_button.png new file mode 100644 index 0000000..ac96d0e Binary files /dev/null and b/images/play_button.png differ diff --git a/images/reverse.jpg b/images/reverse.jpg new file mode 100755 index 0000000..b25bf99 Binary files /dev/null and b/images/reverse.jpg differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..31b298e --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + Sarah's Royalty Free Music Player + + + + + + + + + + + +
+
+
+ +
+
+

Entrepreneurs

+

Scott Holmes

+
+ +
+
+
+ +
+
+

40 Miles of Bad Road

+

Dead Moon

+
+ +
+
+
+ +
+
+

Last Train

+

Fred and Toody

+
+ +
+
+
+ +
+
+

Let It Rain

+

Pierced Arrows

+
+ +
+
+
+ +
+
+

Inspiring Corporate

+

Scott Holmes

+
+ +
+
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100755 index 0000000..74c9805 --- /dev/null +++ b/js/script.js @@ -0,0 +1,98 @@ +$(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); + } 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 new file mode 100755 index 0000000..fc88ab8 --- /dev/null +++ b/style.css @@ -0,0 +1,144 @@ +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; +} + +section:nth-child(odd) { + background-color: #E2DED7; +} + +.play { + height: 75px; + width: auto; + padding: 2px; +} + +#header { + border: 5px solid black; + background: #BEB9B8; + display: flex; + 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: #201F1F; + height: auto; + display: flex; + align-items: flex-start; + +} + +#footer img { + height: 80px; + +} + +#footer h2, #footer p { + font-family: "Roboto", sans-serif; + color: white; + margin-top: 0; +} +#footer h2 { + font-size: 28px; +} +#footer p { + font-size: 20px; +} + +#controls { + display: flex; + align-items: flex-start; + margin-left:5%; + margin-top:.5em; + +} + +.trackInfo-footer { + display: inline; + text-align: left; + margin-left: 40px; + font-size: 18px; + +} + +.current { + color: blue; +} + + // * Responsive Design + // */ + + +@media screen and (max-width: 1024px) { + + +} + +@media screen and (max-width: 950px) { + + +} + + +@media screen and (max-width: 547px) { + #header h1 { + margin-top: 1.5em; + margin-right: 1em; + font-size: 22px; + } + + +h2 { + font-size:18px; +} + +.trackInfo-footer { + padding-top:5.5em; + +} + +#footer { + height: 200px; + + +} + +.trackInfo-footer { + position: absolute; + width: 100%; + padding-left:1em; + +} + + + +} + +@media screen and (max-width: 480px) { + your font style goes here + +}