https://github.com/jcampbell57/odin-restaurant-page

A restaurant page with tabbed content that uses JavaScript alone to generate all of the content on the page. The purpose of this project is to practice using JavaScript modules and webpack.
https://github.com/jcampbell57/odin-restaurant-page

css3 custom-fonts dom-manipulation html5 javascript javascript-modules navigation-tabs responsive-design webpack

Last synced: about 2 months ago
JSON representation

A restaurant page with tabbed content that uses JavaScript alone to generate all of the content on the page. The purpose of this project is to practice using JavaScript modules and webpack.

• Host: GitHub
• URL: https://github.com/jcampbell57/odin-restaurant-page
• Owner: jcampbell57
• Created: 2022-07-07T21:31:20.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-03T07:08:30.000Z (5 months ago)
• Last Synced: 2024-08-03T08:25:42.828Z (5 months ago)
• Topics: css3, custom-fonts, dom-manipulation, html5, javascript, javascript-modules, navigation-tabs, responsive-design, webpack
• Language: JavaScript
• Homepage: https://jcampbell57.github.io/odin-restaurant-page/
• Size: 1.26 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Middle Ring Restaurant

## Project info

A restaurant page with tabbed content that uses JavaScript alone to generate all of the content on the page. The purpose of this project is to practice using JavaScript modules and webpack.

Project description can be found [here](https://www.theodinproject.com/lessons/javascript-restaurant-page)

## Live demo

Live demo available [here](https://jcampbell57.github.io/odin-restaurant-page/)

## Table of Contents

* [Features](#features)

* [Technologies utilized](#technologies-utilized)

* [Learning outcomes](#learning-outcomes)

* [Project screenshots](#project-screenshots)

* [Behind the Scenes](#behind-the-scenes)

* [Installation](#installation)

## Features

- Custom CSS font

- Responsive design

- Navigation tabs

## Technologies utilized

- HTML5

- CSS3

- JavaScript ES6

- webpack

## Learning outcomes

This project helped to reinforce the following skills:

- webpack

- JavaScript modules

- DOM manipulation

## Project screenshots

### Welcome:

![welcome](src/assets/restaurant-welcome-600w.png)




### Menu:

![menu](src/assets/restaurant-menu-600w.png)




### Resources:

![resources](src/assets/restaurant-resources-600w.png)

## Behind the scenes

### Resources

- [Middle Ring Restaurant wiki](https://avatar.fandom.com/wiki/Middle_Ring_restaurant)

- [Cuisine in the World of Avatar wiki](https://avatar.fandom.com/wiki/Cuisine_in_the_World_of_Avatar#Earth_Kingdom)

- [Ba Sing Se wiki](https://avatar.fandom.com/wiki/Ba_Sing_Se#Middle_Ring_restaurant)

- [This resource](https://gist.github.com/cobyism/4730490) is helpful when deploying to gh-pages after webpack is run.

## Installation

- Clone this repository to your desktop.

- Navigate to the top level of the directory by running `cd odin-restaurant-page`.

- Run `npm install` to install the required dependencies.  

- Open `dist/index.html` in your browser.

- Run `npm run watch` to update the `dist` folder on save

- Refresh page after saving to see changes