final
This commit is contained in:
ak
commit
01b1edcaf9
33 changed files with 3465 additions and 0 deletions
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# js-restaurant
|
||||
|
||||
Responsive home page for a fictitious fish restaurant
|
||||
19
dist/index.html
vendored
Executable file
19
dist/index.html
vendored
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cedarville Cursive">
|
||||
<link rel="stylesheet" href="../src/css/cover.css">
|
||||
<link rel="stylesheet" href="../src/css/style.css">
|
||||
<title>Dee's Fish House</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
136
dist/main.js
vendored
Executable file
136
dist/main.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2294
package-lock.json
generated
Executable file
2294
package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load diff
22
package.json
Executable file
22
package.json
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "js-restaurant",
|
||||
"version": "1.0.0",
|
||||
"description": "ODIN Project Restaurant Page implemented in JS",
|
||||
"main": "js/index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack"
|
||||
},
|
||||
"keywords": [
|
||||
"js",
|
||||
"restaurant",
|
||||
"javascript",
|
||||
"odin"
|
||||
],
|
||||
"author": "ak",
|
||||
"license": "CC-BY-NC-SA-4.0",
|
||||
"devDependencies": {
|
||||
"webpack": "^5.77.0",
|
||||
"webpack-cli": "^5.0.1"
|
||||
}
|
||||
}
|
||||
3
sources.txt
Executable file
3
sources.txt
Executable file
|
|
@ -0,0 +1,3 @@
|
|||
unsplash - https://unsplash.com/photos/QpIayO5KIRE
|
||||
unsplash - fishe
|
||||
freepik - https://www.freepik.com/free-photo/side-view-mushroom-frying-with-stove-fire-human-hand-pan_7727023.htm
|
||||
50
src/cover.css
Executable file
50
src/cover.css
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
|
||||
/* Custom default button */
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
body {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
50
src/css/cover.css
Executable file
50
src/css/cover.css
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
|
||||
/* Custom default button */
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
body {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
239
src/css/style.css
Executable file
239
src/css/style.css
Executable file
|
|
@ -0,0 +1,239 @@
|
|||
#content {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
background-image: url('../img/waves.jpg');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: none;
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height:auto!important;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pageheader {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-link, #logobox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logobox {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-grow: .5;
|
||||
}
|
||||
|
||||
#logotext, #centerspantwo, #columnTwoHeader, #c21-contact > div {
|
||||
font-family: 'Cedarville Cursive';
|
||||
color: red;
|
||||
}
|
||||
|
||||
.card {
|
||||
color: black;
|
||||
flex-shrink: 1;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
border-radius: 15px!important;
|
||||
}
|
||||
|
||||
.headerdiv {
|
||||
display: flex;
|
||||
max-width: 42em!important;
|
||||
gap: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: grid!important;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#column-one-home, #column-two-home {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 2fr;
|
||||
}
|
||||
|
||||
|
||||
#squareone {
|
||||
background-image: url('../img/logo.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#squaretwo > div > span {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#squaretwo {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-three-home {
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#column-three-home > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#squarefour {
|
||||
overflow-y: hidden;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 16px;
|
||||
|
||||
}
|
||||
|
||||
#squarefour > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#squarefive {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-one-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 2fr 2fr 4fr;
|
||||
}
|
||||
|
||||
#column-one-menu > div {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
}
|
||||
|
||||
#column-two-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 8fr;
|
||||
}
|
||||
|
||||
#columnTwoContent {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#column-three-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 8fr;
|
||||
}
|
||||
|
||||
#column-one-menu > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#c14image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#columnTwoHeader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#columnTwoContent > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#c31image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#columnThreeContent {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#columnThreeContent > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#column-one-contact > img, #column-three-contact > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#column-two-contact {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 4fr;
|
||||
}
|
||||
|
||||
#c21-contact {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#c21-contact > div {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#c22-contact {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-one-contact, #column-three-contact {
|
||||
display: flex;
|
||||
min-height: 0; /* NEW */
|
||||
min-width: 0;
|
||||
}
|
||||
BIN
src/fishies.jpg
Executable file
BIN
src/fishies.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
src/img/fishies.jpg
Executable file
BIN
src/img/fishies.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
src/img/logo.png
Executable file
BIN
src/img/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/img/mappin.jpg
Executable file
BIN
src/img/mappin.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 738 KiB |
BIN
src/img/morefish.jpg
Executable file
BIN
src/img/morefish.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
BIN
src/img/morefishies.jpg
Executable file
BIN
src/img/morefishies.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
src/img/panfrying.jpg
Executable file
BIN
src/img/panfrying.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 MiB |
BIN
src/img/salmon.jpg
Executable file
BIN
src/img/salmon.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/img/waves.jpg
Executable file
BIN
src/img/waves.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
13
src/js/buttonhighlights.js
Executable file
13
src/js/buttonhighlights.js
Executable file
|
|
@ -0,0 +1,13 @@
|
|||
// highlights nav button based on mouse hover
|
||||
|
||||
const navButtons = document.querySelectorAll(".nav-link");
|
||||
|
||||
// turns on highlight
|
||||
export function activateButton() {
|
||||
this.setAttribute('class', this.getAttribute("class") + ' active');
|
||||
}
|
||||
|
||||
//turns off highlight
|
||||
export function deactivateButton() {
|
||||
this.setAttribute('class', "nav-link fw-bold");
|
||||
}
|
||||
42
src/js/contact.js
Executable file
42
src/js/contact.js
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
export function makeContactWindow() {
|
||||
// makes divs
|
||||
const columnOne = document.createElement('div');
|
||||
const c1img = document.createElement('img');
|
||||
const columnTwo = document.createElement('div');
|
||||
const c21 = document.createElement('div');
|
||||
const c21Text = document.createElement('div');
|
||||
const c22 = document.createElement('div');
|
||||
const c22Text = document.createElement('span');
|
||||
const c23 = document.createElement('a');
|
||||
const columnThree = document.createElement('div');
|
||||
const c3img = document.createElement('img');
|
||||
|
||||
// sets attributes
|
||||
columnOne.id = "column-one-contact";
|
||||
columnTwo.id = "column-two-contact";
|
||||
columnThree.id = "column-three-contact";
|
||||
c1img.title="Photo by Steve Richey on Unsplash"
|
||||
c1img.src = "../src/img/mappin.jpg"
|
||||
c3img.title="Photo by karl muscat on Unsplash"
|
||||
c3img.src = "../src/img/morefishies.jpg";
|
||||
c21Text.textContent = "contact dee's";
|
||||
c21.id = "c21-contact";
|
||||
c22.id = "c22-contact";
|
||||
c22Text.innerHTML = "You can find us at 123 Joseph Momas Pl., Springfield, IL<br />(two streets down from the nuclear power plant)" + "<br /><br />" + "We are also available over the phone at 1-800-867-5309 and by email at ";
|
||||
c23.textContent = "inquiries@deesfish.net"
|
||||
const email = "inquiries@deesfish.net";
|
||||
c23.setAttribute('href', "mailto:" + email);
|
||||
|
||||
// appends divs
|
||||
const cardBody = document.querySelector(".card-body");
|
||||
cardBody.appendChild(columnOne);
|
||||
columnOne.appendChild(c1img);
|
||||
cardBody.appendChild(columnTwo);
|
||||
columnTwo.appendChild(c21);
|
||||
c21.appendChild(c21Text);
|
||||
columnTwo.appendChild(c22);
|
||||
c22.appendChild(c22Text);
|
||||
c22.appendChild(c23);
|
||||
cardBody.appendChild(columnThree);
|
||||
columnThree.appendChild(c3img);
|
||||
}
|
||||
53
src/js/home.js
Executable file
53
src/js/home.js
Executable file
|
|
@ -0,0 +1,53 @@
|
|||
export function makeHomeWindow() {
|
||||
// makes divs
|
||||
const columnOne = document.createElement('div');
|
||||
const columnTwo = document.createElement('div');
|
||||
const columnThree = document.createElement('div');
|
||||
const columnThreeImage = document.createElement('img');
|
||||
const squareOne = document.createElement('div');
|
||||
const squareTwo = document.createElement('div');
|
||||
const squareTwoText = document.createElement('div');
|
||||
const sqTwoSpanOne = document.createElement('span');
|
||||
const sqTwoSpanTwo = document.createElement('span');
|
||||
const sqTwoSpanThree = document.createElement('span');
|
||||
const sqTwoSubtitle = document.createElement('p');
|
||||
const squareFour = document.createElement('div');
|
||||
const sqFourImage = document.createElement('img');
|
||||
const squareFive = document.createElement('div');
|
||||
|
||||
// sets attributes
|
||||
columnOne.id = "column-one-home";
|
||||
columnTwo.id = "column-two-home";
|
||||
columnThree.id = "column-three-home";
|
||||
columnThreeImage.title = "Photo by Jonas Allert on Unsplash"
|
||||
columnThreeImage.src = "../src/img/fishies.jpg"
|
||||
squareOne.id = "squareone";
|
||||
squareTwo.id = "squaretwo";
|
||||
sqTwoSpanTwo.id = "centerspantwo";
|
||||
sqTwoSpanOne.textContent = "Welcome to ";
|
||||
sqTwoSpanTwo.textContent = "dee's";
|
||||
sqTwoSpanThree.textContent = "!";
|
||||
sqTwoSubtitle.textContent = "Home of the Local Fresh Catch Special"
|
||||
squareFour.id = "squarefour";
|
||||
sqFourImage.title="Image by 8photo on Freepik"
|
||||
sqFourImage.src = "../src/img/panfrying.jpg"
|
||||
squareFive.id = 'squarefive';
|
||||
squareFive.textContent = "Here at Dee's, we pride ourselves on our freshness. From our daily local catch to our award-winning nuts, all ingredients are sourced right on site, and cooked to perfection by our Michelin-certified chefs. This isn't just any fish restaurant! We strive to provide you a gourmet experience like no other. Come down to Dee's today to see what all the hype is about!"
|
||||
|
||||
// appends divs to DOM
|
||||
const cardBody = document.querySelector(".card-body");
|
||||
cardBody.appendChild(columnOne);
|
||||
columnOne.appendChild(squareOne);
|
||||
cardBody.appendChild(columnTwo);
|
||||
columnTwo.appendChild(squareTwo);
|
||||
squareTwo.appendChild(squareTwoText)
|
||||
squareTwoText.appendChild(sqTwoSpanOne);
|
||||
squareTwoText.appendChild(sqTwoSpanTwo);
|
||||
squareTwoText.appendChild(sqTwoSpanThree);
|
||||
squareTwoText.appendChild(sqTwoSubtitle);
|
||||
cardBody.appendChild(columnThree);
|
||||
columnThree.appendChild(columnThreeImage);
|
||||
columnOne.appendChild(squareFour);
|
||||
squareFour.appendChild(sqFourImage);
|
||||
columnTwo.appendChild(squareFive);
|
||||
}
|
||||
162
src/js/index.js
Executable file
162
src/js/index.js
Executable file
|
|
@ -0,0 +1,162 @@
|
|||
// imports modules
|
||||
import { makeHomeWindow } from './home';
|
||||
import { makeMenuWindow } from './menu';
|
||||
import { makeContactWindow } from './contact';
|
||||
import { activateButton, deactivateButton } from './buttonhighlights';
|
||||
import { resizeBody } from './resizebody';
|
||||
|
||||
const style = (() => {
|
||||
|
||||
// initiates divs
|
||||
function init () {
|
||||
// creates overlay
|
||||
const coverContainer = document.createElement('div');
|
||||
coverContainer.className = "cover-container d-flex w-100 h-100 p-3 mx-auto flex-column";
|
||||
|
||||
// appends overlay to "content" div
|
||||
document.getElementById("content").appendChild(coverContainer);
|
||||
document.getElementById("content").className = "d-flex text-center text-bg-dark";
|
||||
|
||||
// header encapsulation div
|
||||
const headerDiv = document.createElement('div');
|
||||
headerDiv.className = "headerdiv w-100 mx-auto";
|
||||
coverContainer.appendChild(headerDiv);
|
||||
|
||||
// creates header div
|
||||
const pageHeader = document.createElement('header');
|
||||
pageHeader.className = "mb-3 pageheader";
|
||||
headerDiv.appendChild(pageHeader);
|
||||
|
||||
// creates flexbox for the logo
|
||||
const logoFlex = document.createElement('div');
|
||||
logoFlex.id = 'logobox';
|
||||
pageHeader.appendChild(logoFlex);
|
||||
|
||||
// creates logo image to go inside logo flexbox
|
||||
const logo = document.createElement('img');
|
||||
logo.id = "logo";
|
||||
logo.src = "../src/img/logo.png";
|
||||
logoFlex.appendChild(logo);
|
||||
|
||||
// creates text to go inside logo flexbox
|
||||
const logoText = document.createElement('h3');
|
||||
logoText.id = "logotext"
|
||||
logoText.className = "float-md-start mb-0";
|
||||
logoText.textContent = "dee's fish house";
|
||||
logoFlex.appendChild(logoText);
|
||||
|
||||
// refreshes the page if logo flexbox clicked
|
||||
logoFlex.onclick = window.location.reload;
|
||||
|
||||
// creates navigation bar to contain navigation buttons
|
||||
const pageHeaderNav = document.createElement('nav');
|
||||
pageHeaderNav.className = "nav nav-masthead justify-content-center float-md-end";
|
||||
pageHeader.appendChild(pageHeaderNav);
|
||||
|
||||
// creates Home button on navigation bar
|
||||
const button1 = document.createElement('a');
|
||||
button1.className = "nav-link fw-bold";
|
||||
button1.textContent = "Home";
|
||||
pageHeaderNav.appendChild(button1);
|
||||
// assigns listener to change out the button highlights and to "fetch" a new window
|
||||
button1.onclick = () => {
|
||||
if (prevButton != button1) {
|
||||
deactivateButton.call(prevButton);
|
||||
activateButton.call(button1);
|
||||
prevButton = button1;
|
||||
popupWindow('home');
|
||||
}
|
||||
}
|
||||
|
||||
// creates Menu button on navigation bar
|
||||
const button2 = document.createElement('a');
|
||||
button2.className = "nav-link fw-bold";
|
||||
button2.textContent = "Menu";
|
||||
pageHeaderNav.appendChild(button2);
|
||||
// assigns listener to change out the button highlights and to "fetch" a new window
|
||||
button2.onclick = () => {
|
||||
if (prevButton != button2) {
|
||||
deactivateButton.call(prevButton);
|
||||
activateButton.call(button2);
|
||||
prevButton = button2;
|
||||
popupWindow('menu');
|
||||
}
|
||||
}
|
||||
|
||||
// creates Contact button on navigation bar
|
||||
const button3 = document.createElement('a');
|
||||
button3.className = "nav-link fw-bold";
|
||||
button3.textContent = "Contact";
|
||||
pageHeaderNav.appendChild(button3);
|
||||
// assigns listener to change out the button highlights and to "fetch" a new window
|
||||
button3.onclick = () => {
|
||||
if (prevButton != button3) {
|
||||
deactivateButton.call(prevButton);
|
||||
activateButton.call(button3);
|
||||
prevButton = button3;
|
||||
popupWindow('contact');
|
||||
}
|
||||
}
|
||||
|
||||
// modal window popup
|
||||
function popupWindow(location) {
|
||||
|
||||
// if there's a window open already
|
||||
if (coverContainer.children[1]) {
|
||||
const cardBody = document.querySelector(".card-body");
|
||||
// dump the content
|
||||
while (cardBody.firstChild) {
|
||||
cardBody.removeChild(cardBody.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
// sets up the popup
|
||||
// makes divs
|
||||
const popupCard = document.createElement('div');
|
||||
const cardBody = document.createElement('div');
|
||||
|
||||
// sets attributes
|
||||
popupCard.className = "card h-100";
|
||||
cardBody.setAttribute('class', "card-body");
|
||||
|
||||
// appends divs to DOM
|
||||
coverContainer.appendChild(popupCard);
|
||||
popupCard.appendChild(cardBody);
|
||||
}
|
||||
|
||||
// if home button clicked
|
||||
if (location === 'home') {
|
||||
makeHomeWindow();
|
||||
}
|
||||
|
||||
// if menu button clicked
|
||||
if (location === 'menu') {
|
||||
makeMenuWindow();
|
||||
}
|
||||
|
||||
if (location === 'contact') {
|
||||
makeContactWindow();
|
||||
}
|
||||
}
|
||||
|
||||
// on initializing, defaults to Home
|
||||
activateButton.call(button1);
|
||||
let prevButton = button1;
|
||||
popupWindow('home');
|
||||
|
||||
// resizes the webpage to be the size of the screen pre-emptively
|
||||
resizeBody();
|
||||
|
||||
// then makes listener if the user resizes window later to do the same
|
||||
window.onresize = resizeBody;
|
||||
}
|
||||
|
||||
// returns init to be available globally
|
||||
return {
|
||||
init
|
||||
}
|
||||
})();
|
||||
|
||||
// calls on page load
|
||||
style.init();
|
||||
118
src/js/menu.js
Executable file
118
src/js/menu.js
Executable file
|
|
@ -0,0 +1,118 @@
|
|||
export function makeMenuWindow() {
|
||||
// makes divs
|
||||
const columnOne = document.createElement('div');
|
||||
const colOneOne = document.createElement('div');
|
||||
const colOneTwo = document.createElement('div');
|
||||
const c12Item = document.createElement('div');
|
||||
const c12Price = document.createElement('div');
|
||||
const colOneThree = document.createElement('div');
|
||||
const c13Item = document.createElement('div');
|
||||
const c13Price = document.createElement('div');
|
||||
const colOneFour = document.createElement('div');
|
||||
const c14Image = document.createElement('img');
|
||||
const columnTwo = document.createElement('div');
|
||||
const columnTwoHeader = document.createElement('div');
|
||||
const columnTwoContent = document.createElement('div');
|
||||
const c22 = document.createElement('div');
|
||||
const c22Item = document.createElement('div');
|
||||
const c22Price = document.createElement('div');
|
||||
const c23 = document.createElement('div');
|
||||
const c23Item = document.createElement('div');
|
||||
const c23Price = document.createElement('div');
|
||||
const c24 = document.createElement('div');
|
||||
const c24Item = document.createElement('div');
|
||||
const c24Price = document.createElement('div');
|
||||
const c25 = document.createElement('div');
|
||||
const c25Item = document.createElement('div');
|
||||
const c25Price = document.createElement('div');
|
||||
const columnThree = document.createElement('div');
|
||||
const c31 = document.createElement('div');
|
||||
const columnThreeContent = document.createElement('div');
|
||||
const c32 = document.createElement('div');
|
||||
const c32Item = document.createElement('div');
|
||||
const c32Price = document.createElement('div');
|
||||
const c33 = document.createElement('div');
|
||||
const c33Item = document.createElement('div');
|
||||
const c33Price = document.createElement('div');
|
||||
const c34 = document.createElement('div');
|
||||
const c34Item = document.createElement('div');
|
||||
const c34Price = document.createElement('div');
|
||||
const c35 = document.createElement('div');
|
||||
const c35Item = document.createElement('div');
|
||||
const c35Price = document.createElement('div');
|
||||
|
||||
// sets attributes
|
||||
columnOne.id = "column-one-menu";
|
||||
columnTwo.id = "column-two-menu";
|
||||
columnThree.id = "column-three-menu";
|
||||
c12Item.textContent = "Fresh oysters (12x)";
|
||||
c12Price.textContent = "$19.99";
|
||||
c13Item.textContent = "Cedar plank smoked Terriyaki Salmon with Asian stir fry over white rice";
|
||||
c13Price.textContent = "$29.99";
|
||||
c14Image.title = "Photo by Alice Pasqual on Unsplash";
|
||||
c14Image.src = "../src/img/salmon.jpg";
|
||||
c14Image.id = "c14image";
|
||||
columnTwoHeader.textContent = "menu";
|
||||
columnTwoHeader.id = "columnTwoHeader";
|
||||
columnTwoContent.id = "columnTwoContent";
|
||||
c22Item.textContent = "Beer-battered Fish and Chips";
|
||||
c22Price.textContent = "$19.99";
|
||||
c23Item.textContent = "Baja-style fish tacos (3x)";
|
||||
c23Price.textContent = "$14.99";
|
||||
c24Item.textContent = "Local Sandabs with House Fries and Tartar Sauce";
|
||||
c24Price.textContent = "$24.99";
|
||||
c25Item.textContent = "Seared Ahi Tuna with Asian fusion salad over Japanese-style rice";
|
||||
c25Price.textContent = "$29.99";
|
||||
columnThreeContent.id = "columnThreeContent";
|
||||
c32Item.textContent = "Baked Tilapia with zesty lemon over cauliflower rice and greens";
|
||||
c32Price.textContent = "$24.99";
|
||||
c33Item.textContent = "Halibut with scalloped potatoes and green beans";
|
||||
c33Price.textContent = "$24.99";
|
||||
c34Item.textContent = "Chef's Special";
|
||||
c34Price.textContent = "$29.99";
|
||||
c35Item.textContent = "Catch of the Day";
|
||||
c35Price.textContent = "varies";
|
||||
|
||||
// appends divs to DOM
|
||||
const cardBody = document.querySelector(".card-body");
|
||||
cardBody.appendChild(columnOne);
|
||||
columnOne.appendChild(colOneOne);
|
||||
columnOne.appendChild(colOneTwo);
|
||||
colOneTwo.appendChild(c12Item);
|
||||
colOneTwo.appendChild(c12Price);
|
||||
columnOne.appendChild(colOneThree);
|
||||
colOneThree.appendChild(c13Item);
|
||||
colOneThree.appendChild(c13Price);
|
||||
columnOne.appendChild(colOneFour);
|
||||
colOneFour.appendChild(c14Image);
|
||||
cardBody.appendChild(columnTwo);
|
||||
columnTwo.appendChild(columnTwoHeader);
|
||||
columnTwo.appendChild(columnTwoContent);
|
||||
columnTwoContent.appendChild(c22);
|
||||
c22.appendChild(c22Item);
|
||||
c22.appendChild(c22Price);
|
||||
columnTwoContent.appendChild(c23);
|
||||
c23.appendChild(c23Item);
|
||||
c23.appendChild(c23Price);
|
||||
columnTwoContent.appendChild(c24);
|
||||
c24.appendChild(c24Item);
|
||||
c24.appendChild(c24Price);
|
||||
columnTwoContent.appendChild(c25);
|
||||
c25.appendChild(c25Item);
|
||||
c25.appendChild(c25Price);
|
||||
cardBody.appendChild(columnThree);
|
||||
columnThree.appendChild(c31);
|
||||
columnThree.appendChild(columnThreeContent);
|
||||
columnThreeContent.appendChild(c32);
|
||||
c32.appendChild(c32Item);
|
||||
c32.appendChild(c32Price);
|
||||
columnThreeContent.appendChild(c33);
|
||||
c33.appendChild(c33Item);
|
||||
c33.appendChild(c33Price);
|
||||
columnThreeContent.appendChild(c34);
|
||||
c34.appendChild(c34Item);
|
||||
c34.appendChild(c34Price);
|
||||
columnThreeContent.appendChild(c35);
|
||||
c35.appendChild(c35Item);
|
||||
c35.appendChild(c35Price);
|
||||
}
|
||||
12
src/js/resizebody.js
Executable file
12
src/js/resizebody.js
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
// resizes the body of the webpage to match screen height when user adjusts it - with offsets for padding and margins
|
||||
export function resizeBody() {
|
||||
const headerHeight = document.querySelector(".headerdiv").offsetHeight + 16;
|
||||
const newCardHeight = window.innerHeight - headerHeight - 16;
|
||||
document.querySelector(".card").setAttribute("style", "height: " + newCardHeight + "px!important");
|
||||
|
||||
const newCoverContainerHeight = window.innerHeight;
|
||||
document.querySelector(".cover-container").setAttribute("style", "height: " + newCoverContainerHeight + "px!important");
|
||||
|
||||
document.getElementById("content").setAttribute("style", "height: " + window.innerHeight +"px;!important");
|
||||
|
||||
}
|
||||
BIN
src/logo.png
Executable file
BIN
src/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/mappin.jpg
Executable file
BIN
src/mappin.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 738 KiB |
BIN
src/morefish.jpg
Executable file
BIN
src/morefish.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
BIN
src/morefishies.jpg
Executable file
BIN
src/morefishies.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
src/panfrying.jpg
Executable file
BIN
src/panfrying.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 MiB |
BIN
src/salmon.jpg
Executable file
BIN
src/salmon.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
240
src/style.css
Executable file
240
src/style.css
Executable file
|
|
@ -0,0 +1,240 @@
|
|||
#content {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
background-image: url(waves.jpg);
|
||||
/* Background image by Matteo Bernardis from Unsplash */
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: none;
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height:auto!important;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pageheader {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-link, #logobox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logobox {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-grow: .5;
|
||||
}
|
||||
|
||||
#logotext, #centerspantwo, #columnTwoHeader, #c21-contact > div {
|
||||
font-family: 'Cedarville Cursive';
|
||||
color: red;
|
||||
}
|
||||
|
||||
.card {
|
||||
color: black;
|
||||
flex-shrink: 1;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
border-radius: 15px!important;
|
||||
}
|
||||
|
||||
.headerdiv {
|
||||
display: flex;
|
||||
max-width: 42em!important;
|
||||
gap: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: grid!important;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#column-one-home, #column-two-home {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 2fr;
|
||||
}
|
||||
|
||||
|
||||
#squareone {
|
||||
background-image: url(logo.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#squaretwo > div > span {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#squaretwo {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-three-home {
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#column-three-home > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#squarefour {
|
||||
overflow-y: hidden;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 16px;
|
||||
|
||||
}
|
||||
|
||||
#squarefour > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#squarefive {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-one-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 2fr 2fr 4fr;
|
||||
}
|
||||
|
||||
#column-one-menu > div {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
}
|
||||
|
||||
#column-two-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 8fr;
|
||||
}
|
||||
|
||||
#columnTwoContent {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#column-three-menu {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 8fr;
|
||||
}
|
||||
|
||||
#column-one-menu > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#c14image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#columnTwoHeader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#columnTwoContent > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#c31image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#columnThreeContent {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#columnThreeContent > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.75vh;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
#column-one-contact > img, #column-three-contact > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
object-fit: cover;
|
||||
min-height: 0; /* NEW */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#column-two-contact {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 4fr;
|
||||
}
|
||||
|
||||
#c21-contact {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#c21-contact > div {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#c22-contact {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#column-one-contact, #column-three-contact {
|
||||
display: flex;
|
||||
}
|
||||
BIN
src/waves.jpg
Executable file
BIN
src/waves.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
9
webpack.config.js
Executable file
9
webpack.config.js
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
module.exports = {
|
||||
mode: 'development',
|
||||
entry: {
|
||||
index: './src/js/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: 'main.js',
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue