format: prettier

dynamicProgrammingExamples/.eslintrc.js

@@ -4,7 +4,10 @@ module.exports = {
     "es2021": true,
     node: true
   },
-  "extends": "eslint:recommended",
+  "extends": [
+    "eslint:recommended",
+    "prettierd"
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"

dynamicProgrammingExamples/package-lock.json

@@ -11,7 +11,9 @@
       "devDependencies": {
         "css-loader": "^6.8.1",
         "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
         "html-webpack-plugin": "^5.6.0",
+        "prettier": "3.1.1",
         "style-loader": "^3.3.3",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
@@ -1661,6 +1663,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -3585,6 +3599,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",

dynamicProgrammingExamples/package.json

@@ -14,7 +14,9 @@
   "devDependencies": {
     "css-loader": "^6.8.1",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "html-webpack-plugin": "^5.6.0",
+    "prettier": "3.1.1",
     "style-loader": "^3.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",

dynamicProgrammingExamples/src/components/dropDown.js

@@ -3,82 +3,83 @@ class DropDown {
         this.menu = menu;
     }
 
-    title = 'Menu';
+    title = "Menu";
     clicked = false;
 
     getMenu = () => {
         this.div;
-    }
+    };
 
     dropdownComponent() {
         // render items
         this.createDropdownItems();
         this.createMenuButton();
 
-        this.div = document.createElement('div');
+        this.div = document.createElement("div");
-        this.div.classList.add('menu-bar');
+        this.div.classList.add("menu-bar");
-        this.div.style = 'margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;';
+        this.div.style =
+            "margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;";
 
-        this.div.style.position = 'relative';
+        this.div.style.position = "relative";
 
         this.div.append(this.button, this.dropdownItems);
         return this.div;
     }
 
     createDropdownItems() {
-        this.dropdownItems = document.createElement('div');
+        this.dropdownItems = document.createElement("div");
-        this.dropdownItems.classList.add('menu-items');
+        this.dropdownItems.classList.add("menu-items");
 
-        this.dropdownItems.style.display = 'flex';
+        this.dropdownItems.style.display = "flex";
-        this.dropdownItems.style.flexDirection = 'column';
+        this.dropdownItems.style.flexDirection = "column";
-        this.dropdownItems.style.visibility = 'hidden';
+        this.dropdownItems.style.visibility = "hidden";
-        this.dropdownItems.style.gap = '10px';
+        this.dropdownItems.style.gap = "10px";
-        this.dropdownItems.style.lineHeight = '1.7';
+        this.dropdownItems.style.lineHeight = "1.7";
-        this.dropdownItems.style.fontSize = '18px';
+        this.dropdownItems.style.fontSize = "18px";
-        this.dropdownItems.style.position = 'absolute';
+        this.dropdownItems.style.position = "absolute";
-        this.dropdownItems.style.top = '100px';
+        this.dropdownItems.style.top = "100px";
-        this.dropdownItems.style.background = '#FFF';
+        this.dropdownItems.style.background = "#FFF";
-        this.dropdownItems.style.width = '100%';
+        this.dropdownItems.style.width = "100%";
-        this.dropdownItems.style.alignItems = 'center';
+        this.dropdownItems.style.alignItems = "center";
-        this.dropdownItems.style.border = '1px solid black';
+        this.dropdownItems.style.border = "1px solid black";
-        this.dropdownItems.style.color = 'black';
+        this.dropdownItems.style.color = "black";
-        this.dropdownItems.style.boxSizing = 'border-box';
+        this.dropdownItems.style.boxSizing = "border-box";
 
-
+        this.menu.forEach((e) => {
-        this.menu.forEach(e => {
+            const a = document.createElement("a");
-            const a = document.createElement('a');
+            a.href = "#";
-            a.href = '#';
             a.textContent = e;
-            a.style.textDecoration = 'none';
+            a.style.textDecoration = "none";
-            a.style.display = 'inline-block';
+            a.style.display = "inline-block";
-            a.style.width = 'calc(100% - 10px)';
+            a.style.width = "calc(100% - 10px)";
-            a.style.textAlign = 'center';
+            a.style.textAlign = "center";
-            a.style.padding = '5px';
+            a.style.padding = "5px";
 
-
+            a.addEventListener("mouseover", () => {
-            a.addEventListener('mouseover', () => {
+                a.style.background = "#E8E8E8";
-                a.style.background = '#E8E8E8';
                 // a.style.background = 'black'
             });
-            a.addEventListener('mouseleave', () => a.style.background = '#FFF');
+            a.addEventListener(
-            this.dropdownItems.appendChild(a)
+                "mouseleave",
-        })
+                () => (a.style.background = "#FFF"),
+            );
+            this.dropdownItems.appendChild(a);
+        });
     }
 
     createMenuButton() {
-        this.button = document.createElement('button');
+        this.button = document.createElement("button");
-        this.button.classList.add('menu-btn,btn');
+        this.button.classList.add("menu-btn,btn");
         this.button.textContent = this.title;
 
-        this.button.style = "padding: 20px; margin: 20px;"
+        this.button.style = "padding: 20px; margin: 20px;";
 
-        this.button.addEventListener('click', () => {
+        this.button.addEventListener("click", () => {
-            this.clicked = !this.clicked
+            this.clicked = !this.clicked;
-            let visibilityToggle = this.clicked ? 'visible' : 'hidden';
+            let visibilityToggle = this.clicked ? "visible" : "hidden";
             this.dropdownItems.style.visibility = visibilityToggle;
-        })
+        });
+    }
 }
 
-}
+export { DropDown };
-
-export { DropDown }

dynamicProgrammingExamples/src/components/mobileMenu.js

@@ -1,54 +1,52 @@
 class Menu {
     constructor(menuItems) {
         this.menuItems = menuItems;
-        this.menu = document.createElement('nav');
+        this.menu = document.createElement("nav");
-        this.burgerIcon = document.createElement('i');
+        this.burgerIcon = document.createElement("i");
-        this.container = document.createElement('div');
+        this.container = document.createElement("div");
-
 
         this.setupMenuStructure();
         this.setupResizeListener();
     }
 
     setupMenuStructure() {
-        this.container.classList.add('navbar');
+        this.container.classList.add("navbar");
-        this.container.style.display = 'flex';
+        this.container.style.display = "flex";
-        this.container.style.padding = '20px';
+        this.container.style.padding = "20px";
 
         // Determine if Burger Icon should show
         this.burgerIconStyles();
         this.burgerIconSetter();
 
-        this.menuItems.forEach(element => {
+        this.menuItems.forEach((element) => {
-            const li = document.createElement('li');
+            const li = document.createElement("li");
             li.textContent = element;
-            li.style.listStyleType = 'none';
+            li.style.listStyleType = "none";
 
             this.container.appendChild(li);
-
         });
 
         this.menu.append(this.burgerIcon, this.container);
     }
 
     adjustStylesForSmallScreen() {
-        this.container.style.flexDirection = 'column';
+        this.container.style.flexDirection = "column";
-        this.burgerIcon.style.display = 'inline-block';
+        this.burgerIcon.style.display = "inline-block";
-        this.container.style.gap = '20px';
+        this.container.style.gap = "20px";
-        this.container.style.alignItems = 'center';
+        this.container.style.alignItems = "center";
-        this.container.style.display = 'none';
+        this.container.style.display = "none";
     }
 
     adjustStylesForLargeScreen() {
-        this.container.style.display = 'flex';
+        this.container.style.display = "flex";
-        this.container.style.flexDirection = 'row';
+        this.container.style.flexDirection = "row";
-        this.container.style.justifyContent = 'space-around';
+        this.container.style.justifyContent = "space-around";
-        this.burgerIcon.style.display = 'none';
+        this.burgerIcon.style.display = "none";
     }
 
     burgerIconStyles() {
-        this.burgerIcon.classList.add('fas', 'fa-bars', 'fa-2x');
+        this.burgerIcon.classList.add("fas", "fa-bars", "fa-2x");
-        this.burgerIcon.style.margin = '10px';
+        this.burgerIcon.style.margin = "10px";
     }
 
     burgerIconSetter() {
@@ -59,17 +57,17 @@ class Menu {
         } else {
             this.adjustStylesForLargeScreen();
         }
-
     }
 
     burgerIconClickListener() {
-        this.burgerIcon.addEventListener('click', () => {
+        this.burgerIcon.addEventListener("click", () => {
-            this.container.style.display = this.container.style.display === 'none' ? 'flex' : 'none';
+            this.container.style.display =
+                this.container.style.display === "none" ? "flex" : "none";
         });
     }
 
     setupResizeListener() {
-        window.addEventListener('resize', () => this.burgerIconSetter());
+        window.addEventListener("resize", () => this.burgerIconSetter());
     }
 
     buildMenu() {
@@ -77,5 +75,4 @@ class Menu {
     }
 }
 
-
 export { Menu };

dynamicProgrammingExamples/src/index.js

@@ -1,29 +1,28 @@
 import { DropDown } from "./components/dropDown";
 import { Menu } from "./components/mobileMenu";
-import './style.css';
+import "./style.css";
-
 
 function fontAwesome() {
-    let script = document.createElement('script');
+    let script = document.createElement("script");
-    script.src = 'https://kit.fontawesome.com/24f16b96cf.js';
+    script.src = "https://kit.fontawesome.com/24f16b96cf.js";
-    script.crossOrigin = 'anonymous';
+    script.crossOrigin = "anonymous";
 
     document.head.appendChild(script);
 }
 
-fontAwesome();
+function website() {
-
+    const _menu = ["main", "about", "store", "blog", "contact"];
-const _menu = ['main', 'about', 'store', 'blog', 'contact'];
     const dropdown = new DropDown(_menu);
     const mobile = new Menu(_menu);
 
     const div = dropdown.dropdownComponent();
-const h1 = document.createElement('h1');
+    const h1 = document.createElement("h1");
-h1.textContent = 'DEEZ NUTS MAN';
+    h1.textContent = "DEEZ NUTS MAN";
-
 
     const menuMobile = mobile.buildMenu();
-document.body.appendChild(menuMobile);
-document.body.appendChild(div);
-document.body.appendChild(h1);
 
+    document.body.append(menuMobile, div, h1);
+}
+
+fontAwesome();
+website();

dynamicProgrammingExamples/webpack.common.js

@@ -1,33 +1,33 @@
-const path = require('path');
+const path = require("path");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
     entry: {
-        index: './src/index.js',
+        index: "./src/index.js",
     },
     plugins: [
         new HtmlWebpackPlugin({
-            title: 'template',
+            title: "Javascript Examples",
         }),
     ],
     output: {
-        filename: 'bundle.js',
+        filename: "bundle.js",
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, "dist"),
         clean: true,
     },
     module: {
         rules: [
             {
                 test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
+                use: ["style-loader", "css-loader"],
             },
             {
                 test: /\.(png|svg|jpg|jpeg|gif)$/i,
-                type: 'asset/resource',
+                type: "asset/resource",
             },
             {
                 test: /\.(woff|woff2|eot|ttf|otf)$/i,
-                type: 'asset/resource',
+                type: "asset/resource",
             },
         ],
     },

dynamicProgrammingExamples/webpack.dev.js

@@ -1,10 +1,10 @@
-const { merge } = require('webpack-merge');
+const { merge } = require("webpack-merge");
-const common = require('./webpack.common.js');
+const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
-    mode: 'development',
+    mode: "development",
-    devtool: 'inline-source-map',
+    devtool: "inline-source-map",
     devServer: {
-        static: './dist',
+        static: "./dist",
     },
-})
+});

dynamicProgrammingExamples/webpack.prod.js

@@ -1,7 +1,6 @@
-const { merge } = require('webpack-merge');
+const { merge } = require("webpack-merge");
-const common = require('./webpack.common.js');
+const common = require("./webpack.common.js");
-
 
 module.exports = merge(common, {
-    mode: 'production',
+    mode: "production",
 });