HTML and CSS Reference
In-Depth Information
// Get the user's favorites from localStorage
var _favorites = JSON.parse(localStorage.favorites);
// Loop through the favorites
for(var i = 0; i < _favorites.length; i++){
// If there's a match
if(_favorites[i].id == _id){
// Remove the item from the favorites using splice
_favorites.splice(i, 1);
}
}
// Save the changed favorites object back to localStorage
localStorage.favorites = JSON.stringify(_favorites);
/**
* Change the add/remove favorites button
* so that it will either add/remote the item
* from the favorites
*/
if(this.nodeName == 'A'){
this.setAttribute('data-action', 'add');
this.classList.remove('remove');
this.classList.add('add');
this.textContent = 'favorite';
}
}
...
}
Styling the Content
Even with all the hard work you've put into the JavaScript framework, MoMemo
looks pretty ugly. In Chapter 6, we touched upon using SASS to create a basic
framework to work from. We're now going to put that into practice to style the
various elements of the application a bit further.
We'll start by styling the movie list, as it's the first thing that a user will interact
with.
Styling the Movie List
The movie list will be used in two places within the MoMemo application. One of
these places will be in the search results, and the second will be in the favorites
list on the main screen. As there are two lists, you might want to style these
