Skip to content

Instantly share code, notes, and snippets.

@grayayer
Last active July 10, 2020 22:17
Show Gist options
  • Save grayayer/0e05199b166ae38305695cb1be4af04e to your computer and use it in GitHub Desktop.
Save grayayer/0e05199b166ae38305695cb1be4af04e to your computer and use it in GitHub Desktop.
This is a jquery/javascript that allows us to change the visible status of a "liked" status of an element, then store that preference in a user's browser so that the changed state remains upon returning to the page. This was built specifically for http://moda2.studiok40.com/index-moda.html but can be modified for anyone else's purposes
/** SCRIPTS FOR DESIGNATING WHEN ITEMS ARE LIKED, STORING THAT PREFERENCE,
AND LOADING THOSE PREFERENCES UPON PAGE REFRESH **/
/** when you click on a featured heart, make it liked **/
$(".solution_item .liked_status").click(function(){
// create a variable that references the containing parent of heart just clicked
const self = $(this).parent();
// create a variable that contains just the ID of the parent element
const likedToolID = self.attr("id");
/* changed liked status */
self.toggleClass("liked");
/* upon clicking a heart, check to see if user's action was either to like or unlike
the tool. Then set the localStorage keypair to reflect that preference **/
if (document.getElementById(likedToolID).classList.contains("liked")) {
localStorage.setItem(`${likedToolID}-liked`, 'true');
}
else if (!document.getElementById(likedToolID).classList.contains("liked")) {
localStorage.setItem(`${likedToolID}-liked`, 'false');
}
// in case our variable likedToolID no longer returns a valid value
else {
console.log(`not able to find object, or it's null`)
}
});
/** UPON PAGE LOAD, RETRIEVING THE VALUES IN STORAGE,
AND APPLYING LIKED STATUS TO ELEMENTS **/
// create an array of all elements that contain our target class
var elements = document.getElementsByClassName("solution_item");
// create an empty array that will store all our ID's of the elements that contain our target class
var toolsArray = [];
// loop through the elements array, pull out just the ID of the elements, then store that to a new array
for(var i=0; i<elements.length; i++) {
toolsArray.push(elements[i].id);
}
/* go through the toolsArray array and for every value within it,
check to see if there is a localStorage key for this ID (with -liked apended)
and has an associated value of true with it */
for (let i = 0; i < toolsArray.length; i++){
//console.log();
let savedPreference = toolsArray[i];
if (localStorage.getItem(`${savedPreference}-liked`) === 'true') {
console.log(`${savedPreference} is liked`);
/* when it finds a key-value of true indicating an item is liked,
add the class of "liked" to that element */
var _digitalTool = $(`#${savedPreference}`);
_digitalTool.addClass('liked');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment