Restaurant project (#9)

* feat: git ignore

* feat: skeleton

* feat: module added

* feat: added menubar

* adding components

* feat: carousel and components

* feat: content added

* feat: navbar logic added

* feat: added styling

* feat; add bg image

* feat: styling complete

* feat: first build complete

.gitignore

@@ -0,0 +1,131 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+

restaurant/app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "restaurant",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch",
+    "start": "webpack serve --open",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.4",
+    "inline-source-map": "^0.6.2",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

restaurant/app/src/components/carousel.js

@@ -0,0 +1,81 @@
+class Carousel {
+    constructor(items) {
+        this.items = items;
+    };
+    
+    carouselDiv = document.createElement('div');
+    createComponent() {
+        let count = 0;
+        this.carouselDiv.classList.add(['carousel']);
+    
+        this.items.forEach(element => {
+            let div = document.createElement('div');
+
+            let classList = count === 0 ? ['carousel-item', 'slide-visible'] : ['carousel-item', 'slide-hidden'];
+            div.classList.add(...classList);
+
+
+            let heading = document.createElement('h1');
+            let desc = document.createElement('p');
+            let link = document.createElement('a');
+            link.href = '#';
+            link.type = 'button';
+
+            heading.textContent = element.heading;
+            desc.textContent = element.desc;
+            link.textContent = element.link;
+
+            div.appendChild(heading);
+            div.appendChild(desc);
+            div.appendChild(link);
+
+            this.carouselDiv.appendChild(div);
+            count += 1;
+        });
+        return this.carouselDiv;
+    };
+};
+
+
+class Items {
+    constructor(heading, desc, link) {
+        this.heading = heading;
+        this.desc = desc;
+        this.link = link;
+
+        this._item = {
+            heading: this.heading,
+            desc: this.desc,
+            link: this.link
+        }
+    }
+
+    get item() {
+        return this._item;
+    }
+}
+
+let carouselItems = [
+    {
+        "heading": "Specialty Baked Goods and coffee",
+        "desc": "Exclusively delicious baked goods, homemade and all that",
+        "link": "Order Now!"
+    },
+    // {
+    //     "heading": "Subscribe and Save today!",
+    //     "desc": "We offer flexible subscription plans to meet your needs",
+    //     "link": "Get started"
+    // },
+    // {
+    //     "heading": "Explore our blog",
+    //     "desc": "This Wondrous Life teaches you how to dream, inspire, and embrace life",
+    //     "link": "Embrace this"
+    // }
+]
+
+let items = carouselItems.map(e => new Items(e.heading, e.desc, e.link));
+let carousel = new Carousel(items);
+
+export { carousel };
+
+

restaurant/app/src/components/contact.js

@@ -0,0 +1,17 @@
+function contactComponent(){
+    let div = document.createElement('contact');
+    div.classList.add(['contact']);
+    
+    let name = document.createElement('h2');
+    name.textContent = 'This Wondrous Life';
+
+    let link = document.createElement('p');
+    link.textContent = 'https://thiswondrouslife.com';
+
+    div.appendChild(name);
+    div.appendChild(link);
+
+    return div;
+}
+
+export { contactComponent };

restaurant/app/src/components/menu.js

@@ -0,0 +1,79 @@
+const menuItems = {
+    "drinks": [
+        {
+            "item": "latte",
+            "desc": "A nice homemade latte from the Breville."
+        },
+        {
+            "item": "nespresso",
+            "desc": "a nespresso pod coffee"
+        },
+        {
+            "item": "tea",
+            "desc": "a steeped tea for ninjas"
+        }
+    ],
+    "snacks": [
+        {
+            "item": "cookies",
+            "desc": "homemade chocolate chip cookies or another delicious treat"
+        },
+        {
+            "item": "pumpkin cake",
+            "desc": "homemade pumpkin cake, leaving you wanting more"
+        },
+        {
+            "item": "cinnamon rolls",
+            "desc": "delicious mouth watering cinnamon rolls"
+        }
+    ]
+}
+
+function menuComponent(){
+    const div = document.createElement('div');
+    const drinksDiv = document.createElement('div');
+    const snacksDiv = document.createElement('div');
+    div.classList.add(['cards']);
+    drinksDiv.classList.add('drinks-container');
+    snacksDiv.classList.add('snacks-container');
+    
+    const drinkHeader = document.createElement('h2');
+    const snackHeader = document.createElement('h2');
+    drinkHeader.classList.add(['header', 'drink-header']);
+    snackHeader.classList.add(['header', 'snack-header']);
+
+    drinkHeader.textContent = 'Drinks';
+    snackHeader.textContent = 'Snacks';
+
+    let drinks = card(menuItems['drinks']);
+    let snacks = card(menuItems['snacks']);
+
+    drinksDiv.appendChild(drinkHeader);
+    drinks.forEach(e => drinksDiv.appendChild(e));
+    snacksDiv.appendChild(snackHeader);
+    snacks.forEach(e => snacksDiv.appendChild(e));
+
+    div.appendChild(drinksDiv);
+    div.appendChild(snacksDiv);
+    
+    return div;
+
+}
+
+function card(item) {
+    return item.map(element => {
+        let div = document.createElement('div');
+        div.classList.add(['card']);
+
+        let item = document.createElement('h3');
+        let desc = document.createElement('p');
+        item.textContent = element.item;
+        desc.textContent = element.desc;
+
+        div.appendChild(item);
+        div.appendChild(desc);
+        return div;
+    });
+}
+
+export { menuComponent };

restaurant/app/src/components/navbar.js

@@ -0,0 +1,26 @@
+function menuBar() {
+    const items = [
+        'HOME',
+        'MENU',
+        'CONTACT'
+    ];
+
+    const navbar = document.createElement('div');
+    navbar.classList.add(['nav']);
+    
+    const ul = document.createElement('ul');
+    ul.classList.add('navbar');
+
+    items.forEach(e => {
+        let li = document.createElement('li');
+        li.textContent = e;
+
+        ul.appendChild(li);
+    });
+    
+    navbar.appendChild(ul);
+    return navbar;
+    
+}
+
+export { menuBar };

restaurant/app/src/index.js

@@ -0,0 +1,69 @@
+import { contactComponent } from "./components/contact";
+import { carousel } from "./components/carousel"
+import { menuBar as navbar } from "./components/navbar";
+import { menuComponent } from "./components/menu";
+import './style.css'
+
+let _carousel = carousel.createComponent();
+
+function website() {
+
+    // Navbar
+    document.body.appendChild(nav());
+
+    loadPage();
+
+}
+
+function nav(){
+    const element = document.createElement('header');
+    const brandName = document.createElement('h1');
+
+    let menu = new navbar();
+    menu.addEventListener('click', e => loadPage(e.target.outerText));
+    
+    brandName.style.textAlign = 'center';
+    brandName.textContent = 'This Wondrous Coffee';
+    
+    element.appendChild(brandName);
+    element.appendChild(menu);
+   
+    return element;
+};
+
+function loadPage(page='home') {
+    let home = _carousel;
+    let menu = menuComponent();
+    let contact = contactComponent();
+    let contentData;
+
+    switch(page.toLowerCase()){
+        case 'menu':
+            contentData = content(menu);
+            break;
+        case 'contact':
+            contentData = content(contact);
+            break;
+        default:
+            contentData = content(home);
+            break;
+        
+    }        
+    document.body.appendChild(contentData);
+}
+
+function content(data) {
+    const old = document.querySelector('.content');
+    if (old) {
+        old.textContent = '';
+        document.body.removeChild(old);
+    }
+    const _content = document.createElement('div');
+    _content.classList.add('content');
+    _content.appendChild(data);
+    
+    return _content;
+
+};
+
+website();

restaurant/app/src/style.css

@@ -0,0 +1,176 @@
+:root {
+    --font-size: 18px;
+    --light-color: #E8E8E8;
+    --dark-color: #495464;
+    --rgb-dark-color: 73, 84, 100;
+    --rgb-light-color: 232, 232, 232;
+}
+
+@font-face {
+    font-family: 'Merriweather Sans';
+    src: url('./assets/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype');
+    src: url('./assets/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
+}
+
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    font-size: var(--font-size);
+    background: url('./background.jpg');
+    background-size: cover;
+    font-family: 'Merriweather Sans';
+    color: rgb(var(--rgb-dark-color));
+}
+
+header {
+    min-height: 71px;
+    background-color: rgb(var(--rgb-light-color), 0.7);
+    color: var(--dark-color);
+    border-bottom: 1px solid var(--dark-color);
+}
+
+header>h1 {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 5px;
+    font-weight: 800;
+    font-size: 2.3rem;
+}
+
+a {
+    text-decoration: none;
+    color: var(--light-color);
+}
+
+a:hover {
+    text-decoration: none;
+    font-weight: 800;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-content: center;
+}
+
+.nav {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+.navbar {
+    display: grid;
+    grid-template-columns: repeat(3, 110px);
+    gap: 15px;
+}
+
+.navbar li {
+    list-style-type: none;
+    font-size: 1rem;
+    cursor: pointer;
+    font-weight: 400;
+}
+
+.content {
+    display: flex;
+    justify-content: center;
+    min-height: 90vh;
+    margin-top: 150px;
+}
+
+.carousel {
+    height: 80%;
+    gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+    color: var(--light-color);
+}
+
+.carousel-item>h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+}
+
+.carousel-item>p {
+    font-size: 0.9rem;
+    font-weight: 200;
+}
+
+.cards {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 80%;
+    gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+}
+
+.cards>.drinks-container>h2,
+.cards>.snacks-container>h2 {
+    color: var(--light-color);
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    width: 260px;
+    height: 260px;
+    padding: 20px;
+    background-color: var(--light-color);
+}
+
+.card>h3 {
+    padding: 0;
+    margin: 0;
+}
+
+.card>p {
+    font-weight: 300;
+}
+
+.drinks-container {
+    display: grid;
+    grid-template-columns: repeat(3, 300px);
+    align-items: center;
+    gap: 30px;
+}
+
+.drinks-container>h2 {
+    grid-column: 1 / span 3;
+    align-self: center;
+}
+
+
+.snacks-container {
+    display: grid;
+    grid-template-columns: repeat(3, 300px);
+    align-items: center;
+    gap: 30px;
+}
+
+.snacks-container>h2 {
+    grid-column: 1 / span 3;
+}
+
+.carousel .slide-hidden {
+    display: none;
+}
+
+.contact {
+    height: 80%;
+    gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+    color: var(--light-color);
+}

restaurant/app/webpack.config.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: {
+        index: './src/index.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Restaurant - Dev',
+        }),
+    ],
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+    },
+    devtool: 'inline-source-map',
+    devServer: {
+        static: './dist',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test:  /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: 'asset/resource',
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                type: 'asset/resource',
+            },
+        ],
+    },
+};
+ 

restaurant/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Restaurant - Dev</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script></head>
+  <body>
+  </body>
+</html>