Take #19 of building a vanilla JS app using mostly DOM for content creation
I'm off to a good start! but I need more knowledge. My current work is here -> https://github.com/callum-laing/restaurant
I'm sure it's simple, but here's my question. Right now I have a menu.js file importing into my index.js file, which has created a menu-card div, and a title h2, all appended into the container variable in index.js, which querySelects #content, the root html id.
My question is, I'm not entirely sure how nesting works.. so in html I'd have something like...
I'd then position and style header on it's own, and navbar on it's own, and the only interference they'd have is whatever styling is on main-container.
Could anyone offer a brief example of how I could replicate that (or how I should replicate that) with the DOM variation I'm trying to do? I don't need much, I just want to understand how I'm supposed to go about nesting/assigning new elements/functions...
GitHub
GitHub - callum-laing/restaurant
Contribute to callum-laing/restaurant development by creating an account on GitHub.
7 Replies
If you're asking about CSS styling, you have two main options (and if not can you rephrase and be a bit more specific?):
1. Style it with your normal CSS file. And if you want them "scoped" then put an ID on each section and use that to target the styles
2. Use web components to make the different sections and you can scope styles to that one specific component. And if you have multiple of the same components, you can use an
adoptedStyleSheets so the one style sheet is shared across all instancesOn a tangential note, HTML has
<main>, <header>, & <nav> tags to represent the structure you've laid out.Thanks both, I think that's basically what I'm after, just wasn't sure how to create a layout if everything is being created in the DOM and pushed into that single #content div in the HTML. Got me a little confused 😄
Apologies if I'm wording this wrong but 1. I read as the below
Have the main container, and section containers append to the #content ID in the html (Root), then have the classes/id's specific to those sections append to them, and not #content?
Even when creating elements you need to adhere to semantic HTML. If you're making a nav element, then create a
nav element. If you're creating a section then make a section element. That doesn't change. As for styling: same thing! Pick a system to use for your CSS and stick to it.
Creating elements and adding them to the DOM shouldn't mean you throw out all the rest of the "static" HTML/CSS practices you know. If anything, using semantic HTML elements and "proper" (for you) CSS styles/names/etc it should be easier, not harder, to style any site regardless of where the elements originate from.Makes sense, thanks Beck 😄
Even though you're dynamically adding content, you should have a pretty good idea of what that content is supposed to be/look like so you can set up your CSS file appropriately. As an example, Twitter has a lot of dynamic content: new tweets are added to your timeline. But we all know what a tweet looks like. Image, user name, potential blue check, time, content. Even though it's dynamic the structure and look of it was decided ahead of time and the CSS reflects that.
And no, I will not call it "X" or use that stupid branding name for Twitter. I tweet on Twitter. End of story.
Yep that registers. I was overthinking it all 🫠