Design comparison
Solution retrospective
1-Doing this project I learned how to change hover state to svg icon by defining an external svg file with desired behaviors and then applying it to the svg icon's hover state.
element { &.hover{ filter : url("loaction of the external svg file") } }
2- Revealing module pattern is really neat way to structure code. This pattern gives you the ability to create seperate namespaces for each different components and thus the benefit of not polluting the global namespace. Another advantage with this pattern is that it gives the ability to create a public api in witch you expose the peaces of the fucntionality you want and keep the rest private.It's also fexiable and can be modified to not be an IFEE which makes possible to create new instances of the module.
YourModule = (function(){})()
or
YourModule = function(){}
3- Intersection API is a way to asynchronously observe changes in the intersection of a target element with a ancestor element or if not specified the top-level document's viewport.This API allows to implenent features such as infinite scroll, srcoll on view and lazy loading of images to name a few. In this porject I scratched the surface of what this API can do by implementing partial scroll on view.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord