Majority done, hot "tab" switching, DOM manipulation

README.md

@@ -11,3 +11,7 @@ to install all required dependencies - first run: `npm i`
 to build for production: `npm run build`
 
 to launch dev server: `npm run dev`
+
+## license
+
+pictures from pexels - public domain

package.json

@@ -15,6 +15,13 @@
     "css-loader": "^6.10.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
+    "image-minimizer-webpack-plugin": "^4.0.0",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^10.0.1",
     "style-loader": "^3.3.4",
     "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",

src/css/style.css

@@ -2,11 +2,12 @@
 
 html, body {
     min-height: 100dvh;
-    background-image: url('background.jpg');
+    background-image: url('../img/background.jpg');
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
+    color: #fff;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
@@ -39,6 +40,7 @@ header nav {
                 outline: none;
                 border: none;
                 transition: 0.1s ease-in-out transform, 0.1s ease-in-out text-shadow;
+                color: #fff;
                 &:hover, &:focus {
                     transform: scale(1.03);
                     text-shadow: 0 0 0.1rem #f00;
@@ -92,13 +94,13 @@ header nav {
                 margin: auto;
             }
         }
-        &:nth-child(odd) {
+        &:nth-child(even) {
             background-color: #0000002f;
             &:not(#start) span {
                 text-align: left;
             }
         }
-        &:nth-child(even) {
+        &:nth-child(odd) {
             background-color: #0000003f;
             &:not(#start) span {
                 text-align: right;

src/main.js

@@ -1,2 +1,22 @@
-import "./style.css"
-const app = document.querySelector("#app");
+import "./css/style.css"
+import home from "./pages/home.js"
+import menu from "./pages/menu.js"
+import about from "./pages/about.js"
+const app = document.querySelector("#app");
+let content = app.querySelector("#content");
+
+content.replaceWith(home());
+
+document.querySelectorAll("ul > li > button").forEach(button => {
+    button.addEventListener("click", function() {
+        
+        content = app.querySelector("#content");
+        if (button.id == "home") {
+            content.replaceWith(home());
+        } else if (button.id == "menu") {
+            content.replaceWith(menu());
+        } else if (button.id == "about") {
+            content.replaceWith(about());
+        }
+    });
+});

src/modules/generateElement.js

@@ -0,0 +1,10 @@
+export default function(obj) {
+    if (!obj.element) {
+        throw new Error("No element provided (h1, div, section, etc.)");
+    }
+    const theElement = document.createElement(`${obj.element}`);
+    for (let name in obj) {
+        theElement[name] = obj[name];
+    }
+    return theElement;
+}

src/pages/about.js

@@ -0,0 +1,32 @@
+import generateElement from "../modules/generateElement"
+import aboutImg from '../img/about.jpg';
+
+export default function() {
+    const contentDiv = document.createElement("div");
+    contentDiv.id = "content";    
+
+    const start = generateElement({element:"section", id: "start"});
+    let aboutImgTag = new Image();
+    aboutImgTag.src = aboutImg;
+    const titleH1 = generateElement({element:"h1", textContent: "About"});
+    let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+
+    start.append(aboutImgTag, titleH1, span);
+
+    contentDiv.append(start);
+
+
+    for (let i = 0; i < 4; i++) {
+        let s = generateElement({element:"section", className: "showcase"});
+        let aboutImgTag = new Image();
+        aboutImgTag.src = aboutImg;
+        let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+        if (i % 2 == 0) {
+            s.append(aboutImgTag, span);
+        } else {
+            s.append(span, aboutImgTag);
+        }
+        contentDiv.append(s);
+    }
+    return contentDiv;
+}

src/pages/home.js

@@ -0,0 +1,32 @@
+import generateElement from "../modules/generateElement"
+import bgImg from '../img/background.jpg';
+
+export default function() {
+    const contentDiv = document.createElement("div");
+    contentDiv.id = "content";    
+
+    const start = generateElement({element:"section", id: "start"});
+    let bgImgTag = new Image();
+    bgImgTag.src = bgImg;
+    const titleH1 = generateElement({element:"h1", textContent: "Restaurant"});
+    let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+
+    start.append(bgImgTag, titleH1, span);
+
+    contentDiv.append(start);
+
+
+    for (let i = 0; i < 4; i++) {
+        let s = generateElement({element:"section", className: "showcase"});
+        let bgImgTag = new Image();
+        bgImgTag.src = bgImg;
+        let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+        if (i % 2 == 0) {
+            s.append(bgImgTag, span);
+        } else {
+            s.append(span, bgImgTag);
+        }
+        contentDiv.append(s);
+    }
+    return contentDiv;
+}

src/pages/menu.js

@@ -0,0 +1,32 @@
+import generateElement from "../modules/generateElement"
+import menuImg from '../img/menu.jpg';
+
+export default function() {
+    const contentDiv = document.createElement("div");
+    contentDiv.id = "content";    
+
+    const start = generateElement({element:"section", id: "start"});
+    let menuImgTag = new Image();
+    menuImgTag.src = menuImg;
+    const titleH1 = generateElement({element:"h1", textContent: "Menu"});
+    let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+
+    start.append(menuImgTag, titleH1, span);
+
+    contentDiv.append(start);
+
+
+    for (let i = 0; i < 4; i++) {
+        let s = generateElement({element:"section", className: "showcase"});
+        let menuImgTag = new Image();
+        menuImgTag.src = menuImg;
+        let span = generateElement({element:"span", textContent: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?"});
+        if (i % 2 == 0) {
+            s.append(menuImgTag, span);
+        } else {
+            s.append(span, menuImgTag);
+        }
+        contentDiv.append(s);
+    }
+    return contentDiv;
+}

src/template.html

@@ -11,42 +11,18 @@
             <nav>
                 <ul>
                     <li>
-                        <button type="button">Home</button>
+                        <button type="button" id="home">Home</button>
                     </li>
                     <li>
-                        <button type="button">Menu</button>
+                        <button type="button" id="menu">Menu</button>
                     </li>
                     <li>
-                        <button type="button">About</button>
+                        <button type="button" id="about">About</button>
                     </li>
                 </ul>
             </nav>
         </header>
-        <div id="content">
-            
-            <section id="start">
-                <img src="background.jpg" alt="">
-                <h1>Restaurant</h1>
-                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?</span>
-            </section>
-            <section class="showcase">
-                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
-                <img src="background.jpg" alt="">
-            </section>
-            <section class="showcase">
-                <img src="background.jpg" alt="">
-                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
-            </section>
-            <section class="showcase">
-                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
-                <img src="background.jpg" alt="">
-            </section>
-            <section class="showcase">
-                <img src="background.jpg" alt="">
-                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
-            </section>
-            <section id="end"></section>
-        </div>
+        <div id="content"></div>
         <footer>2024, Restaurant</footer>
     </div>
 </body>

webpack.common.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
 
 module.exports = {
     entry: './src/main.js',
@@ -15,8 +16,8 @@ module.exports = {
                 use: ['style-loader', 'css-loader'],
             },
             {
-                test: /\.(jpg|png|gif|jpeg|webp)$/i,
-                type: "asset/resource",
+                test: /\.(png|gif|jpe?g|webp|svg)$/i,
+                type: "asset",
                 // use: ['file-loader'],
             },
             {
@@ -29,5 +30,21 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: "./src/template.html",
         })
-    ]
+    ],
+    optimization: {
+        minimizer: [
+            new ImageMinimizerPlugin({
+            minimizer: {
+                implementation: ImageMinimizerPlugin.imageminMinify,
+                options: {
+                plugins: [
+                    // ["gifsicle", { interlaced: true }],
+                    ["jpegtran", { progressive: true }],
+                    // ["optipng", { optimizationLevel: 5 }],
+                ],
+                },
+            },
+            }),
+        ],
+    },
 }