diff --git a/index.html b/index.html deleted file mode 100644 index 8e0abfd..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..f166312 --- /dev/null +++ b/playlist.html @@ -0,0 +1,64 @@ + + + + + playlist + + + + + + + + + + + + + + + + +
+ +
+ +
+
+
+

Add tracks from:

+
+ +
+
+
+ available tracks: +
+
    +
+
+
+
+ playlist: +
+
    +
+
+ runtime: +
+
+
+ + +
+
+ Copyright 2018: Nancy Butler +
+ +
+ + diff --git a/playlistScript.js b/playlistScript.js new file mode 100644 index 0000000..e6a62a5 --- /dev/null +++ b/playlistScript.js @@ -0,0 +1,272 @@ +var albumShelfEl = document.querySelector("#albumShelf") +var allTracksEl = document.querySelector("#allTracks") +var allTracksListEl = document.querySelector("#allTracksList") +var chosenTracksListEl = document.querySelector("#chosenTrackList") + +var adeleTracks = [ + {name: "Rolling in the Deep", + length: "3:49",}, + {name: "Rumour Has It", + length: "3:44",}, + {name: "Turning Tables", + length: "4:11",}, + {name: "Dont You Remember", + length: "4:04",}, + {name: "Set Fire to the Rain", + length: "4:02",}, + {name: "He Wont Go", + length: "4:38",}, + {name: "Take it All", + length: "3:49",}, + {name: "I'll Be Waiting", + length: "4:02",}, + {name: "One and Only", + length: "5:39",}, + {name: "Lovesong", + length: "5:17",}, + {name: "Someone Like You", + length: "4:44",}, + {name: "I found a Boy", + length: "3:37",} +] +var policeTracks = [ + {name: "Spirits in the Material World", + length: "2:59",}, + {name: "Every Little Thing She Does is Magic", + length: "4:22",}, + {name: "Invisible Sun", + length: "3:44",}, + {name: "Hungry for You", + length: "2:53",}, + {name: "Demolition Man", + length: "5:57",}, + {name: "Too Much Information", + length: "3:43",}, + {name: "Rehumanize Yourself", + length: "3:10",}, + {name: "One World (Not Three)", + length: "4:47",}, + {name: "Omega Man", + length: "2:48",}, + {name: "Secret Journey", + length: "3:34",}, + {name: "Darkness", + length: "3:14",} +] +var pinkFloydTracks = [ + {name: "Cluster One", + length: "5:56"}, + {name: 'What Do You Want from Me', + length: "4:21"}, + {name: "Poles Apart", + length: "7:03"}, + {name: "Marooned", + length: "5:29"}, + {name: "A Great Day for Freedom", + length: "4:17"}, + {name: "Wearing the Inside Out", + length: "6:49"}, + {name: "Take it Back", + length: "6:12"}, + {name: "Coming Back to Life", + length: "6:19"}, + {name: "Keep Talking", + length: "6:10"}, + {name: "Lost for Words", + length: "5:13"}, + {name: "High Hopes", + length: "8:34"} +] +var blackUhuruTracks = [ + {name: "Youth of Eglington", + length: "5:00"}, + {name: "Sponji Reggae", + length: "4:56"}, + {name: "Sistren", + length: "4:34"}, + {name: "Journey", + length: "5:21"}, + {name: "Utterance", + length: "3:42"}, + {name: "Puff She Puff", + length: "5:08"}, + {name: "Rockstone", + length: "4:38"}, + {name: "Carbine", + length: "6:05"}, +] +var mjTracks = [ + {name: "Wanna Be Startin' Somethin'", + length: "6:03"}, + {name: "Baby Be Mine", + length: "4:20"}, + {name: "The Girl is Mine", + length: "3:42"}, + {name: "Thriller", + length: "5:57"}, + {name: "Beat It", + length: "4:18"}, + {name: "Billie Jean", + length: "4:54"}, + {name: "Human Nature", + length: "4:06"}, + {name: "P.Y.T.(Pretty Young Thing)", + length: "3:59"}, + {name: "The Lady in My Life", + length: "5:00"}, +] + +/* format of playlist willbe: +[ + {track: + length:}, + {track: + length: + } + ..etc +] +*/ +var playlist = [] +//playlist runtime in seconds +var runTime = 0; + +//get array of album objects +fetch("https://lit-fortress-6467.herokuapp.com/object") + .then((resource)=>resource.json()) + .then(function(data){ + var albumArr = data.results + for(var i = 0; i < albumArr.length; i++){ + //add appropriate tracks for each album + switch(albumArr[i].title){ + case "Ghost in the Machine": + albumArr[i].tracks = policeTracks; + break; + case "Red": + albumArr[i].tracks = blackUhuruTracks; + break; + case "The Division Bell": + albumArr[i].tracks = pinkFloydTracks + break; + case "Thriller": + albumArr[i].tracks = mjTracks + break; + case "21": + albumArr[i].tracks = adeleTracks + } + //make elements for each album cover + var albumEl = document.createElement("div") + albumEl.innerHTML = `album art for ${albumArr[i].title}` + // albumEl.setAttribute("src", `images/${albumArr[i].cover_art}`) + // albumEl.setAttribute("alt", `album art for ${albumArr[i].title}`) + albumEl.setAttribute("id", albumArr[i].title) + albumShelfEl.appendChild(albumEl) + + //add event listeners for each album cover + albumEl.addEventListener("click", function(){ + //if there's already something in the bin, remove it + while(allTracksListEl.childNodes[0]){ + allTracksListEl.removeChild(allTracksListEl.childNodes[0]) + } + //get associated object + var albumName = this.id + var albumObj = albumArr.find(function(obj){ + return obj.title == albumName + }) + + //change left-hand album info area and update runtime + document.querySelector("#selectedAlbumInfo").innerHTML = ` + ${albumObj.title}
+ ${albumObj.artist}
+ + ` + //make a list element to store tracks in album bin + allTrackListEl = document.createElement("ol") + for(var i = 0; i < albumObj.tracks.length; i++){ + //makeli's of tracks and runtime + var indivTrackEl = document.createElement("li") + //attach the length of song as class to use for total runtime later + indivTrackEl.classList.add(`${albumObj.tracks[i].length}`) + indivTrackEl.innerHTML = `${albumObj.tracks[i].name}: ${albumObj.tracks[i].length}` + + //add individual li's to ol of album tracks + allTracksListEl.appendChild(indivTrackEl) + + //add event listener for each track to add it to other bin when user selects it + indivTrackEl.addEventListener("click", function(){ + + //add event listener to line item in chosen bin to remove on click + var chosenIndivTrackEl = this .cloneNode(true) + chosenIndivTrackEl.addEventListener("click", function(){ + //get runtime of track from class, convert to seconds, remove from total runtime + var trackRunTime = this.classList[0] + //runtime is in format mm:ss convert to seconds and subtract from runTime + var mins = trackRunTime.slice(0, trackRunTime.indexOf(":")) + var secs = trackRunTime.slice(trackRunTime.indexOf(":")+1, trackRunTime.length) + runTime = runTime - (parseInt(mins*60)+parseInt(secs)) + //convert total to mm:ss and change runTime in html to match + var runTimeMin = `${Math.floor(runTime/60)} minutes ${(runTime%60)} seconds` + document.querySelector("#runtimeSpan").innerHTML = `runtime: ${runTimeMin}` + + //remove track li from ol + this.parentNode.removeChild(this) + }) + //add chosen track line item to ol in playlist bin + chosenTracksListEl.appendChild(chosenIndivTrackEl) + //get runtime of track from class, convert to seconds, add to total runtime + var trackRunTime = this.classList[0] + //runtime is in format mm:ss convert to seconds and add to runTime + var mins = trackRunTime.slice(0, trackRunTime.indexOf(":")) + var secs = trackRunTime.slice(trackRunTime.indexOf(":")+1, trackRunTime.length) + runTime += parseInt(mins*60)+parseInt(secs) + + //convert total to mm:ss and change runTime in html to match + var runTimeMin = `${Math.floor(runTime/60)} minutes ${(runTime%60)} seconds` + document.querySelector("#runtimeSpan").innerHTML = `runtime: ${runTimeMin}` + }) + } + }) + } + }) + + //event listener for clear tracks button removes all elements from chosen list and from playlist + var clearButtonEl = document.querySelector("#clearTracksBtn") + clearButtonEl.addEventListener("click", function(){ + while(chosenTracksListEl.childNodes[0]){ + chosenTracksListEl.removeChild(chosenTracksListEl.childNodes[0]) + } + runTime = 0; + document.querySelector("#runtimeSpan").innerHTML = `runtime: ` + + }) + + //stop default submit behavior and use post request to send playlist + document.querySelector("#submitBtn").addEventListener("click", function(event){ + event.preventDefault() + //clear old playlist values + playlist = []; + //iterate through each li of track names + for(var i = 1; i < chosenTracksListEl.childNodes.length; i++){ + var trackSubmit = chosenTracksListEl.childNodes[i].innerText + var title = trackSubmit.slice(0,trackSubmit.indexOf(":")) + var length = trackSubmit.slice(trackSubmit.indexOf(":")+2, trackSubmit.length) + //could send this object to send track length and title + var trackObj = { + "track": title, + "length": length + } + //add titles to playlist array + playlist.push(title) + } + //send playlist with POST request and console log the response + fetch('https://lit-fortress-6467.herokuapp.com/post', { + method: 'post', + body: JSON.stringify(playlist) + }) + .then((resource)=>resource.text()) + .then(function(data){ + console.log(data) + if(data[0] == "S"){ + alert("Playlist submitted!") + } + }) + }) diff --git a/splash.html b/splash.html new file mode 100644 index 0000000..48b96e3 --- /dev/null +++ b/splash.html @@ -0,0 +1,36 @@ + + + + + splash + + + + + + + + + + + + + + + + +
+
+
+

track bin

+ choose tracks +
+
+
+
+
+ Copyright 2018: Nancy Butler +
+
+ + diff --git a/splashScript.js b/splashScript.js new file mode 100644 index 0000000..14e2b63 --- /dev/null +++ b/splashScript.js @@ -0,0 +1,35 @@ +//generate 3 random numbers between 0 and 5 to decide which albums to display +var randomIndexArr = []; +var randomIndex = (Math.floor(Math.random() * 5)) +randomIndexArr.push(randomIndex) +while(randomIndex == randomIndexArr[0]){ + randomIndex = (Math.floor(Math.random() * 5)) +} +randomIndexArr.push(randomIndex) +while(randomIndex == randomIndexArr[0]||randomIndex == randomIndexArr[1]){ + randomIndex = (Math.floor(Math.random() * 5)) +} +randomIndexArr.push(randomIndex) + +//get array of album objects +fetch("https://lit-fortress-6467.herokuapp.com/object") + .then((resource)=>resource.json()) + .then(function(data){ + var albumArr = data.results + var albumPreviewsEl = document.querySelector("#albumPreviews") + //run for loop 3 times to get 3 image elements + for(var i = 0; i < 3; i++){ + var imgEl = document.createElement("img") + //pick album using indexes from randomIndexArr + imgEl.setAttribute("src", `images/${albumArr[randomIndexArr[i]].cover_art}`) + imgEl.setAttribute("id", albumArr[randomIndexArr[i]].artist) + albumPreviewsEl.appendChild(imgEl) + } + + + console.log(data.results) + + + + + }) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc new file mode 100644 index 0000000..f2c4467 Binary files /dev/null and b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc differ diff --git a/style/css/style.css b/style/css/style.css new file mode 100644 index 0000000..3c3f12f --- /dev/null +++ b/style/css/style.css @@ -0,0 +1,138 @@ +html { + height: 100%; } + +body { + min-height: 100%; + background-color: #060113; + color: #968daa; + font-family: 'Rajdhani', sans-serif; } + +#mainContent { + height: 100vh; } + +#albumPreviews { + justify-content: space-around; + height: 100%; + padding-top: 1.5%; } + #albumPreviews img { + padding: 0.5%; + max-height: 300px; + flex-grow: 1; } + +.row-center { + height: 100%; } + +.col-center { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } + +.navbar-fixed-bottom { + display: flex; + justify-content: center; } + +#header { + min-height: 10%; + display: flex; + justify-content: center; + background-color: #120239; } + +.navbar-fixed-bottom { + background-color: #120239; + align-items: center; } + +#albumPreviews img { + border: 1px solid #210761; } + +#albumShelf { + margin-left: 0; + margin-right: 0; + display: flex; + justify-content: center; + height: 25%; + overflow: auto; } + #albumShelf img { + height: 150px; + padding: 0; + border: 1px solid #210761; + transition: border 0.5s ease-in; } + #albumShelf img:hover { + border: 1px solid #e5ce4b; } + #albumShelf div { + flex-grow: 1; + padding: 5px; + display: flex; + justify-content: center; } + +.selectedAlbumCover { + max-height: 150px; + border: 1px solid #e5ce4b; } + +.col-sm-4 { + height: 100%; } + +#trackBins { + margin-top: 5%; + height: 35%; } + +#inputArea { + margin-top: 5%; + display: flex; + justify-content: flex-end; } + #inputArea button { + margin-right: 10%; } + +#allTracks, #chosenTracks { + border: 1px solid black; + min-height: 95%; + background-color: #030321; + border: 1px solid black; + box-shadow: inset 0 0 30px 2px black; } + +#allTracks li, #chosenTracks li { + color: #968daa; + transition: color 0.75s ease-in; } + +#allTracks li:hover { + color: #e5ce4b; + transition: color 0.1s; } + +#chosenTracks li:hover { + color: #353438; + transition: color 0.1s; } + +@-moz-keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +@-webkit-keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +@keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +#chosenTracks li { + -webkit-animation: fadeIn 1s; + -moz-animation: fadeIn 1s; + animation: fadeIn 1s; } + +.btn-primary, .btn-primary:focus { + background-image: none; + background-color: #210761; + border: none; + color: #e5ce4b; + transition: color 0.5s ease-in, background-color 0.5s ease-in; } + +.btn-primary:hover { + background-image: none; + background-color: #e5ce4b; + color: #210761; } + +/*# sourceMappingURL=style.css.map */ diff --git a/style/css/style.css.map b/style/css/style.css.map new file mode 100644 index 0000000..9555f12 --- /dev/null +++ b/style/css/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../scss/style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/style/scss/style.scss b/style/scss/style.scss new file mode 100644 index 0000000..5df96d4 --- /dev/null +++ b/style/scss/style.scss @@ -0,0 +1,179 @@ +$backgroundColor: #060113; +$textColor: #968daa; +$addTextColor: #e5ce4b; +$rmvTextColor: #353438; +$binColor: #030321; +$bannerBG: #120239; +$btnColor: #210761; + +html{ + height: 100%; +} +body{ + min-height: 100%; + background-color: $backgroundColor; + color: $textColor; + font-family: 'Rajdhani', sans-serif; +} +#mainContent{ + height: 100vh; +} + +#albumPreviews{ + justify-content: space-around; + height: 100%; + padding-top: 1.5%; + & img{ + padding: 0.5%; + max-height: 300px; + flex-grow: 1; + } +} +.row-center{ + height: 100%; +} +.col-center{ + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.navbar-fixed-bottom{ + display: flex; + justify-content: center; +} + +.container-fluid{ + //max-width: 1000px; +} + +#header{ + min-height: 10%; + display: flex; + justify-content: center; + background-color: $bannerBG; +} +.navbar-fixed-bottom{ + background-color: $bannerBG; + align-items: center; +} + +#albumPreviews img { + border: 1px solid $btnColor; +} + + + +//horizontal display of available albums +#albumShelf{ + margin-left: 0; + margin-right: 0; + display: flex; + justify-content: center; + height: 25%; + overflow: auto; + & img{ + height: 150px; + padding: 0; + //flex-grow: 1; + border: 1px solid $btnColor; + transition: border 0.5s ease-in; + &:hover{ + border: 1px solid $addTextColor; + } + } + & div{ + flex-grow: 1; + padding: 5px; + display: flex; + justify-content: center; + } +} + +.selectedAlbumCover{ + max-height: 150px; + border: 1px solid $addTextColor; +} + +//columns each containing bin and desc. +.col-sm-4{ + height: 100%; +} + +//row containing both bins and album preview info +#trackBins{ + margin-top: 5%; + height: 35%; +} + +//row containing submittal/clear buttons +#inputArea{ + margin-top: 5%; + display: flex; + justify-content: flex-end; + & button{ + margin-right: 10%; + } +} + +//bin elements +#allTracks, #chosenTracks{ + border: 1px solid black; + min-height: 95%; + background-color: $binColor; + border: 1px solid black; + box-shadow: inset 0 0 30px 2px black; +} + + +//hover effects for song titles +#allTracks li, #chosenTracks li{ + color: $textColor; + transition: color 0.75s ease-in; +} + +#allTracks li:hover{ + color: $addTextColor; + transition: color 0.1s; +} + +#chosenTracks li:hover{ + color: $rmvTextColor; + transition: color 0.1s; +} +@-moz-keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +@-webkit-keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +@keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +#chosenTracks li { + -webkit-animation: fadeIn 1s; + -moz-animation: fadeIn 1s; + animation: fadeIn 1s; +} + +.btn-primary, .btn-primary:focus{ + //get rid of bootstrap "shape" + background-image: none; + background-color: $btnColor; + border: none; + color: $addTextColor; + transition: color 0.5s ease-in, background-color 0.5s ease-in; +} + +.btn-primary:hover{ + background-image:none; + background-color: $addTextColor; + color: $btnColor; +}