Landing page with dropdown nav using plain JS
Solution retrospective
I built another version of this challenge with React and wanted to try building one with plain JS, as the React version was more for practicing React again and I felt quite rusty, so the code wasn't as DRY as it could be. I also wanted to practice writing cleaner CSS since I have a bad habit of testing out a bunch of declarations and then seeing which one works. Plus there were other features I wanted to add but didn't get to (such as accessibility features and link simulation), and so I wanted to see if I can do that in just JS without React.
I started by building out a small version on CodePen to practice skills I used in the last project, and then I reworked the existing HTML and some of the Sass from the React project. It took me quite a while mainly due to trying to put in new code while cleaning up my old code at the same time; this ended up being quite a good exercise in seeing what to do when you need to work with existing code and how to add new things without breaking it. I also tried to use less of CUBE CSS and BEM (or rather, a modified simplified version of my limited understanding of both).
The biggest takeaway I had was, it's a good idea to use CodePen as a draft area to test things out first, and also to think seriously whether the CSS I wanted to write is really needed before writing it!
Please feel free to let me know if anything is not working as it should be. Thank you all! 🙂
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hebrerillo
Hello Elaine! You did a great work, so congratulations!
Now, there is a bug that happens with fixed positioned popups. I happened to have the same problem with this challenge.
Try to display your site in a smartphone in landscape, or just by using the responsive mode of Firefox or Chrome with a display of 830px X 330px. You will see that the 'Register' button is cut from the viewport, and you cannot scroll down to see the button. In real smartphones, the address bar takes some space of the view port.
That is because fixed popups do not push down the body when the content exceeds the height of the view port size. But absolute positioned popups do.
I tell about this bug because you are pretty advanced ;) The rest of your implementation is awesome!
Marked as helpful - P@ghintema
Hi Elaine,
did you notice, that when you reduce screen size below the 960px-Brakepoint you get to see the slide-menu for a sec?? You might think it's irrelevant as no real user plays along with dev-tools. But the thing is: You also see the effect when changing from landscape to portrait-mode. This can be annoying... No idea how to fix this, as I don't know nothing about JS so far. But I thought it's worth mentioning... Never mind if you already knew it!! :)
Marked as helpful - @yacineKahlerras
Hi Elaine very impressive work, i tried to make it as pixel perfect as yours but couldn't you are really amazing ! i do have one small suggestion though, you can hide the active dropdown when you click anywhere else on the page by doing
document.body.addEventListener("click", disableAllDropdownsFunction, true);i read your code so you function might look like this i think :function disableAllDropdownsFunction() { dropDownBtns.forEach((btn) => toggleElement(btn, true, handleDropDown)); }Marked as helpful - @joanFaseDev
Works like a charm on my screen. Impressive and inspiring work, especially the transition between mobile and desktop design. It's well documented too which is great for aspiring developpers like me. Keep up the good work and happy coding!
- @Rajeshsingh127
Hi Elaine! Excellent work. I'm a beginner and I'll take your code as a reference for wherever I get stuck. Thanks again..!
Join 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