Restaurant Page Project, view live
This was a project made for The Odin Project curriculum, our goal for this one was to make use of webpack and to generate all the pages dynamically with Javascript using modules.
-
Set up an HTML skeleton inside of dist/index.html with single
<div id="content">. -
Create a bare-bones homepage for a restaurant. Include an image, headline, and some copy about how wonderful the restaurant is. It’s okay to hard-code these into the HTML for now just to see how they look on the page.
-
Now remove those elements from the HTML (so leave only the
<html>, <body>,and<div id="content">tags) and instead create them by using JavaScript only, e.g. by appending each new element todiv#contentonce the page is first loaded. Since we’re all set up to write our code in multiple files, let’s write this initial page-load function inside of its own module and then import and call it inside of index.js. -
Next, set up your restaurant site to use tabbed browsing to access the Contact and Menu pages.
- Put the contents of each ‘tab’ inside of its own module. Each module will export a function that creates a div element, adds the appropriate content and styles to that element and then appends it to the DOM.
- Write the tab-switching logic inside of index.js. You should have event listeners for each tab that wipes out the current contents and then runs the correct ‘tab module’ to populate it again.
Check the original page of the assignment here.
- Differences between innerHTML and textContent.
- How to use modules in Javascript.
- Useful methods to append, remove, clone nodes.
- How to dynamically generate the entire contents of a page.
- This was my first time using webpack, learned a lot of things with this!
- How to use and why a document fragment is a good idea.
- Coffee shop hero image: Photo by Sebastian Schuppik on Unsplash.
- Coffee Cup image: PikWizard.
- Ornament image: Curls vector created by macrovector - www.freepik.com