Hi guys,
After finishing this project, I am now looking through the example code at https://codepen.io/freeCodeCamp/pen/VPaoNP to see where I went wrong and how I can improve the aesthetics of my own page. I’m a little more confused looking through the code, though. What is the purpose of creating all the ID’s and classes that aren’t being used? Some items have multiple divs around them, but there is no CSS to alter some of the divs. What’s the reason for that?
Thank you!
Link to the challenge:
There generally isn’t unless you plan on adding styles for it later. Though in situations where you are a front end developer working with a designer, you are just hooking everything up which then they can go and actually style without touching your JS code (or html in this case)
I find that I use classes a lot more than id’s, but they have their place too.
When I first started building the pomodoro timer, I wasn’t even aware of FCC (someone had posted a question on stackOverflow, and I was helping from there), and I built the thing the way I would: I created an increment/decrement component, a timer component, and some actions components. Each component was given an ID (so, for example, #breakIncrementDecrement, or #myTimerWidget), but within the component, everything was classes. It allows me to style the component without potential crashes, it allows the component itself to easily access its own internal bits, and it avoids having multiple instances of the same component have clashing ids.
I’m not a fan of names like #break-increment or #session-length – I’d rather have the component have the only id (#breakIncrementDecrement, for example), and within that use classes (.increment, .decrement, .length).
Much the same with the survey form – if there are field groupings, an ID at that level might make sense. For example, a multi-page survey form might be a single form containing multiple divs, each containing related survey questions. Each div might represent a ‘page’ of questions, and should have an ID, but the parts within that ‘page’ may not need, and probably shouldn’t have, id’s.
Makes sense, thank you.
That makes sense, thank you for the great response.
Of course, the reason for very specific ids is, at a guess, to allow the automated unit testing something to hook into…