Hey all. I just finished my Wikipedia viewer and would appreciate any feedback! Two specific questions to anyone well-versed in 1) SCSS and 2) the Fetch API as well:
-
Is there a way to make my variables/mixins responsive? I originally had all my typography set as variables but when I tried to change said variables in media queries, nothing happened so I just put their values in as normal and later changed them with media queries.
-
Is there a way I could have broken up my series of Promises into one more step? I have the displaySearchResults() and closeSearchModal() functions in the same .then() block, but I think ideally it would be better to have the results load and show some sort of loading icon in the search modal, then close the search modal whenever the results are ready. Not sure if I’m already doing that or if there’s a way to do so.
Thanks!
Wish I could come up with designs like that - looks fantastic!
On your questions - here’s what I got:
-
Not sure you can change variables in media queries, but you can do math in SCSS, so if your font-size variable is $font-size, you could set the font size to $font-size * 0.75 in your media query. That way, when you change the variable both the default and the adjusted font-size change without having to change your variable. Does that make sense?
-
If you want to close the modal before the results are back, just put the closeSearchModal function call just before the start of your fetch call. You could kick off a loading animation in the same place and then cancel it when results come back (e.g. in your displaySearchResults function). On a decent connections the results are back really quickly though, so not sure if it’s worth the trouble.
Hope that’s of some help.
Cheers