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! 🙂
