Just a note for you all to try a different perspective
Know the number of movies
Is it always the same total number of movies? Let’s say it will be 8 movies (for the sake of simplicity :P)
00000000
Think of that value as a binary representation
So adding a star to movie 1, 3 and 8, would look like this:
10100001
which is a binary representation of a number 161
, or A1
in HEX.
You can do that with a simple function
// decimal to binary
parseInt("10100001", 2) // → 161
// decimal to hex (preferrable)
parseInt("10100001", 2).toString(16).toUpperCase() // → A1
Store either the value in localStorage
Use a simple JavaScript function to store a value that represents a list of favorite movies in a local storage of a browser.
localStorage.setItem('favmovies', 'A1')
Retrieve a value from localStorage if needed
If a user clicks to show all starred movies retrieve the value from localStorage
let favMovies = localStorage.getItem('favmovies') // → "A1" or "161"
convert decimal to binary
favMovies.toString(2) // → "10100001"
Loop through the list and show fav movies
Add a for loop that goes through the list and shows fav items
for(let i = 0; i < favMovies.length; i++) {
if(favMovies[i] === 1) {
$('#favMoviesList:nth-child(' + i + ')').css('display', 'block')
}
}
Have a dedicated panel with a list of all movies in a specific order
… that are invisible by default, unless the localStorage is set, then go through the loop.
<div id="favMoviesList">
<div>Movie #1</div>
<div>Movie #2</div>
<!-- ... -->
<div>Movie #8</div>
</div>
That way every time the show fav movies
button is clicked, you can go through the loop to show necessary movies, then slide the Panel from side or something.
Sharing is caring
The reason why I insisted on using the HEX value at the top, is that you can then use it as a share link. Give user the ability to copy a link and share it with someone. A person going to that link that would look like
domain.com/page?fav=A1
will allow you to have a code that takes the parameter from URL and runs a for loop function to show the list the same way as in panel
const url_string = window.location.href // domain.com/page?fav=A1
var url = new URL(url_string);
var getParam = url.searchParams.get("fav");
console.log(getParam) // → A1
This is to guide you through, not to give a solution.
This was fun Good old times #javascriptninja
Cheers,
Bart