From e3a39077de509e7b602b224d951948db347b77e7 Mon Sep 17 00:00:00 2001 From: Seniru Pasan Indira Date: Sat, 5 Oct 2019 05:02:10 +0000 Subject: [PATCH] Added back to top button --- app.js | 185 +++++++++++++++++++++++++++++------------------------ index.html | 3 + main.css | 34 ++++++++++ 3 files changed, 138 insertions(+), 84 deletions(-) diff --git a/app.js b/app.js index f17f57b..0260cde 100644 --- a/app.js +++ b/app.js @@ -1,84 +1,101 @@ -$(document).ready(function () { - // Create a variable for the container to hold the emoji cards. - var emojiCardContainer = $("#songs"); - - // Create a variable for the emoji cards. - var emojiCard = ""; - - // Run the random order function below on the data inside data.js. This will display the cards in a random order on the page every time the page is refreshed. - console.log(shuffle(emojiItems)); - - // Loop through the data from the data.js file and insert parts of the data into HTML. On each loop, we are appending a new card with the HTML below. - for (var i in emojiItems) { - var featuredArtist = $.makeArray(emojiItems[i].featuredArtist).join(', '); - var artist = $.makeArray(emojiItems[i].artist).join(', '); - - emojiCard += - "

" + emojiItems[i].year + - "

" + emojiItems[i].emojiImgs + - "
"; - - if (emojiItems[i].musicVideo) { - emojiCard += "
"; - } - - emojiCard += "

" + emojiItems[i].title + " (" + emojiItems[i].year + ")" + "

"; - - if (featuredArtist) { - emojiCard += "

" + artist + " ft. " + featuredArtist + "

"; - } else { - emojiCard += "

" + artist + "

"; - } - - emojiCard += "
"; - } - - // Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards. - emojiCardContainer.html(emojiCard); - - // Run Twemoji to change all emojis to Twitter emojis. - twemoji.parse(document.body); - - // Add the count of number of songs to the footer. - $("footer span").append(emojiItems.length); - - - // Display songs and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page. - function shuffle(array) { - var currentIndex = array.length, - temporaryValue, - randomIndex; - - while (currentIndex !== 0) { - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex -= 1; - temporaryValue = array[currentIndex]; - array[currentIndex] = array[randomIndex]; - array[randomIndex] = temporaryValue; - } - - return array; - } - - // Expand the emoji card when clicked to reveal the song name, artist and music video link. - $("#songs").on("click", ".emoji-images", function () { - $(this) - .siblings(".emoji-card-title") - .toggleClass("hide-card"); - }); - - // Display a hint when hovering over the question mark. - $("#songs").on("mouseover", ".hint-container", function () { - $(this) - .find(".hint") - .addClass("hint-reveal"); - }); - - // Hide hint when the user stops hovering over the question mark. - $("#songs").on("mouseleave", ".hint-container", function () { - $(this) - .find(".hint") - .removeClass("hint-reveal"); - }); - -}); \ No newline at end of file +$(document).ready(function () { + // Create a variable for the container to hold the emoji cards. + var emojiCardContainer = $("#songs"); + + // Create a variable for the emoji cards. + var emojiCard = ""; + + // Run the random order function below on the data inside data.js. This will display the cards in a random order on the page every time the page is refreshed. + console.log(shuffle(emojiItems)); + + // Loop through the data from the data.js file and insert parts of the data into HTML. On each loop, we are appending a new card with the HTML below. + for (var i in emojiItems) { + var featuredArtist = $.makeArray(emojiItems[i].featuredArtist).join(', '); + var artist = $.makeArray(emojiItems[i].artist).join(', '); + + emojiCard += + "

" + emojiItems[i].year + + "

" + emojiItems[i].emojiImgs + + "
"; + + if (emojiItems[i].musicVideo) { + emojiCard += "
"; + } + + emojiCard += "

" + emojiItems[i].title + " (" + emojiItems[i].year + ")" + "

"; + + if (featuredArtist) { + emojiCard += "

" + artist + " ft. " + featuredArtist + "

"; + } else { + emojiCard += "

" + artist + "

"; + } + + emojiCard += "
"; + } + + // Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards. + emojiCardContainer.html(emojiCard); + + // Run Twemoji to change all emojis to Twitter emojis. + twemoji.parse(document.body); + + // Add the count of number of songs to the footer. + $("footer span").append(emojiItems.length); + + + // Display songs and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page. + function shuffle(array) { + var currentIndex = array.length, + temporaryValue, + randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; + } + + // Expand the emoji card when clicked to reveal the song name, artist and music video link. + $("#songs").on("click", ".emoji-images", function () { + $(this) + .siblings(".emoji-card-title") + .toggleClass("hide-card"); + }); + + // Display a hint when hovering over the question mark. + $("#songs").on("mouseover", ".hint-container", function () { + $(this) + .find(".hint") + .addClass("hint-reveal"); + }); + + // Hide hint when the user stops hovering over the question mark. + $("#songs").on("mouseleave", ".hint-container", function () { + $(this) + .find(".hint") + .removeClass("hint-reveal"); + }); + + // Move back to top upon clicking the up arrow + $("#back-to-top").on("click", function() { + $('html, body').animate({scrollTop: 0}); + $("#back-to-top").css("right", "-100px"); + + }); + + // Displays the back to top icon when scrolling down + $(window).on("scroll", function() { + if ($(window).scrollTop() > 10) { + $("#back-to-top").css("right", "10px"); + } else { + $("#back-to-top").css("right", "-100px"); + } + }); + + +}); diff --git a/index.html b/index.html index 5b1e12b..5847114 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,9 @@

A listing of songs depicted through emojis. 💖

+
+ +