Visit The Site »
Download this repository
|
Report A Bug
|
Fork It
- The Project Brief
- The Nitty Gritty
- Tools & Technology Used
- Setup & Use
- Showcase
- Contributions, Issues and Forking
- Creator
- Show Your Support!
- Licensing
This is a project to be included by all students at Microverse as part of the Javascript module.
In this project, we are tasked with building a restaurant website with Javascript and Webpack. Having covered the basics of working with npm and webpack, this is an excellent opportunity to get to grips, firstly with using Javascript for DOM manipulation and secondly, Webpack, in order to manage our projects. The aim here, therefore, is to dynamically generate our restaurants website with Javscript alone (and a little styling, of course).
The core challenges here was in ensuring our projects were handled in a modular way. This meant ensuring that each 'tab' or 'page' of our restaurant had its own separate script in order maintain a clean and maintainable code base.
Additionally, we would be using Javascript to build the entire site dynamically. Generating countless HTML elements such as divs and the elements that sit inside them proved labourous, so I chose to create a generator script to provide essential functions:
- htmlGenerate: Creates an html tag with a class and an (optional) id attached
- textGen: Creates a hmtl text element
- spaceParse: Takes a symbol and a string with spaces replaced by the given symbol to present a beautified string
Without these tools, build time for basic HTML structure would have been far longer. An additional challenge of this project was in using Webpack effectively in order to package our code and assets. Correct configuration and use of the correct loaders and plugins was required.
Languages & Frameworks
- Javascript
- Webpack 4.44
- SASS/CSS3
Package Management
- NPM
Linters & Quality Control
For the live site, head here.
-
To inspect and tinker with the code on your system, download this repo either here or from the link at the top of the page
-
Now it's time to ensure you've got Node and NPM installed. If you do, skip this step. Otherwise, head on over to nodejs's website to download node with npm.
-
Time to go back to the project! Open your terminal (either in your text editor or otherwise) and 'cd' (i.e. navigate) to the root of this repo.
-
Time to install Webpack! Ensuring you're at this repo's root, enter the following command into your terminal. This will install webpack locally (to this project only):
npm install --save-dev webpack -
Finally, once webpack has installed successfully, run the following command to install all of the projects dependencies:
npm install
There are a few commands that you can use interact with the project:
$npm run build- This will build the project using webpack and bundle everything into the/distfolder.$npm run watch- This will build and update the project in the/distfolder actively, meaning changes will update/dist. You will, however, have to refresh the browser to see changes.$npm run start- This will build and update the project with changes. No browser refresh required.
A quick tour around the site, with a preview of the sites page transitions.
A preview of the menu page with its quick scroll links for easy navigation.
A quick look at the search bar. Entering an address to check for delivery will prompt the use with a call to action.
Contributions, issues and feature requests are more than welcome!
If you have any problems running or setting up this project, please submit it as a bug on the issues page right away!
If you want to make your own changes, modifications or improvements, go ahead and Fork it!
- Fork it
- Create your working branch (git checkout -b [choose-a-name])
- Commit your changes (git commit -am 'what this commit will fix/add/improve')
- Push to the branch (git push origin [chosen-name])
- Create a new Pull Request
Rory Hellier - Github
Give a ⭐️ if you like this project!
This project is MIT licensed.