From 0d843d6aa3866f75951982b04249fccaf7554854 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Wed, 10 Jan 2024 00:30:16 -0500 Subject: [PATCH] format: prettier --- dynamicProgrammingExamples/.eslintrc.js | 15 +-- dynamicProgrammingExamples/package-lock.json | 29 ++++++ dynamicProgrammingExamples/package.json | 2 + .../src/components/dropDown.js | 95 ++++++++++--------- .../src/components/mobileMenu.js | 53 +++++------ dynamicProgrammingExamples/src/index.js | 39 ++++---- dynamicProgrammingExamples/webpack.common.js | 20 ++-- dynamicProgrammingExamples/webpack.dev.js | 12 +-- dynamicProgrammingExamples/webpack.prod.js | 7 +- 9 files changed, 151 insertions(+), 121 deletions(-) diff --git a/dynamicProgrammingExamples/.eslintrc.js b/dynamicProgrammingExamples/.eslintrc.js index 6c8271f..4d49242 100644 --- a/dynamicProgrammingExamples/.eslintrc.js +++ b/dynamicProgrammingExamples/.eslintrc.js @@ -1,13 +1,16 @@ module.exports = { "env": { - "browser": true, - "es2021": true, - node: true + "browser": true, + "es2021": true, + node: true }, - "extends": "eslint:recommended", + "extends": [ + "eslint:recommended", + "prettierd" + ], "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" + "ecmaVersion": "latest", + "sourceType": "module" }, } diff --git a/dynamicProgrammingExamples/package-lock.json b/dynamicProgrammingExamples/package-lock.json index a84c92c..6865e4a 100644 --- a/dynamicProgrammingExamples/package-lock.json +++ b/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", diff --git a/dynamicProgrammingExamples/package.json b/dynamicProgrammingExamples/package.json index 48daa9c..aaa8df3 100644 --- a/dynamicProgrammingExamples/package.json +++ b/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", diff --git a/dynamicProgrammingExamples/src/components/dropDown.js b/dynamicProgrammingExamples/src/components/dropDown.js index 94203e4..206faaa 100644 --- a/dynamicProgrammingExamples/src/components/dropDown.js +++ b/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 + // render items this.createDropdownItems(); this.createMenuButton(); - this.div = document.createElement('div'); - this.div.classList.add('menu-bar'); - this.div.style = 'margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;'; + this.div = document.createElement("div"); + 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.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.classList.add('menu-items'); + this.dropdownItems = document.createElement("div"); + this.dropdownItems.classList.add("menu-items"); - this.dropdownItems.style.display = 'flex'; - this.dropdownItems.style.flexDirection = 'column'; - this.dropdownItems.style.visibility = 'hidden'; - this.dropdownItems.style.gap = '10px'; - this.dropdownItems.style.lineHeight = '1.7'; - this.dropdownItems.style.fontSize = '18px'; - this.dropdownItems.style.position = 'absolute'; - this.dropdownItems.style.top = '100px'; - this.dropdownItems.style.background = '#FFF'; - this.dropdownItems.style.width = '100%'; - this.dropdownItems.style.alignItems = 'center'; - this.dropdownItems.style.border = '1px solid black'; - this.dropdownItems.style.color = 'black'; - this.dropdownItems.style.boxSizing = 'border-box'; + this.dropdownItems.style.display = "flex"; + this.dropdownItems.style.flexDirection = "column"; + this.dropdownItems.style.visibility = "hidden"; + this.dropdownItems.style.gap = "10px"; + this.dropdownItems.style.lineHeight = "1.7"; + this.dropdownItems.style.fontSize = "18px"; + this.dropdownItems.style.position = "absolute"; + this.dropdownItems.style.top = "100px"; + this.dropdownItems.style.background = "#FFF"; + this.dropdownItems.style.width = "100%"; + this.dropdownItems.style.alignItems = "center"; + this.dropdownItems.style.border = "1px solid black"; + this.dropdownItems.style.color = "black"; + this.dropdownItems.style.boxSizing = "border-box"; - - this.menu.forEach(e => { - const a = document.createElement('a'); - a.href = '#'; + this.menu.forEach((e) => { + const a = document.createElement("a"); + a.href = "#"; a.textContent = e; - a.style.textDecoration = 'none'; - a.style.display = 'inline-block'; - a.style.width = 'calc(100% - 10px)'; - a.style.textAlign = 'center'; - a.style.padding = '5px'; - + a.style.textDecoration = "none"; + a.style.display = "inline-block"; + a.style.width = "calc(100% - 10px)"; + a.style.textAlign = "center"; + a.style.padding = "5px"; - a.addEventListener('mouseover', () => { - a.style.background = '#E8E8E8'; + a.addEventListener("mouseover", () => { + a.style.background = "#E8E8E8"; // a.style.background = 'black' }); - a.addEventListener('mouseleave', () => a.style.background = '#FFF'); - this.dropdownItems.appendChild(a) - }) + a.addEventListener( + "mouseleave", + () => (a.style.background = "#FFF"), + ); + this.dropdownItems.appendChild(a); + }); } createMenuButton() { - this.button = document.createElement('button'); - this.button.classList.add('menu-btn,btn'); + this.button = document.createElement("button"); + 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.clicked = !this.clicked - let visibilityToggle = this.clicked ? 'visible' : 'hidden'; + this.button.addEventListener("click", () => { + this.clicked = !this.clicked; + let visibilityToggle = this.clicked ? "visible" : "hidden"; this.dropdownItems.style.visibility = visibilityToggle; - }) + }); } - } -export { DropDown } +export { DropDown }; diff --git a/dynamicProgrammingExamples/src/components/mobileMenu.js b/dynamicProgrammingExamples/src/components/mobileMenu.js index 2855fc1..f11e45e 100644 --- a/dynamicProgrammingExamples/src/components/mobileMenu.js +++ b/dynamicProgrammingExamples/src/components/mobileMenu.js @@ -1,54 +1,52 @@ class Menu { constructor(menuItems) { this.menuItems = menuItems; - this.menu = document.createElement('nav'); - this.burgerIcon = document.createElement('i'); - this.container = document.createElement('div'); - + this.menu = document.createElement("nav"); + this.burgerIcon = document.createElement("i"); + this.container = document.createElement("div"); this.setupMenuStructure(); this.setupResizeListener(); } setupMenuStructure() { - this.container.classList.add('navbar'); - this.container.style.display = 'flex'; - this.container.style.padding = '20px'; + this.container.classList.add("navbar"); + this.container.style.display = "flex"; + this.container.style.padding = "20px"; // Determine if Burger Icon should show this.burgerIconStyles(); this.burgerIconSetter(); - this.menuItems.forEach(element => { - const li = document.createElement('li'); + this.menuItems.forEach((element) => { + 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.burgerIcon.style.display = 'inline-block'; - this.container.style.gap = '20px'; - this.container.style.alignItems = 'center'; - this.container.style.display = 'none'; + this.container.style.flexDirection = "column"; + this.burgerIcon.style.display = "inline-block"; + this.container.style.gap = "20px"; + this.container.style.alignItems = "center"; + this.container.style.display = "none"; } adjustStylesForLargeScreen() { - this.container.style.display = 'flex'; - this.container.style.flexDirection = 'row'; - this.container.style.justifyContent = 'space-around'; - this.burgerIcon.style.display = 'none'; + this.container.style.display = "flex"; + this.container.style.flexDirection = "row"; + this.container.style.justifyContent = "space-around"; + this.burgerIcon.style.display = "none"; } burgerIconStyles() { - this.burgerIcon.classList.add('fas', 'fa-bars', 'fa-2x'); - this.burgerIcon.style.margin = '10px'; + this.burgerIcon.classList.add("fas", "fa-bars", "fa-2x"); + this.burgerIcon.style.margin = "10px"; } burgerIconSetter() { @@ -59,17 +57,17 @@ class Menu { } else { this.adjustStylesForLargeScreen(); } - } - burgerIconClickListener () { - this.burgerIcon.addEventListener('click', () => { - this.container.style.display = this.container.style.display === 'none' ? 'flex' : 'none'; + burgerIconClickListener() { + this.burgerIcon.addEventListener("click", () => { + 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 }; diff --git a/dynamicProgrammingExamples/src/index.js b/dynamicProgrammingExamples/src/index.js index c7422bf..d07c73f 100644 --- a/dynamicProgrammingExamples/src/index.js +++ b/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'); - script.src = 'https://kit.fontawesome.com/24f16b96cf.js'; - script.crossOrigin = 'anonymous'; + let script = document.createElement("script"); + script.src = "https://kit.fontawesome.com/24f16b96cf.js"; + script.crossOrigin = "anonymous"; document.head.appendChild(script); } +function website() { + 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"); + h1.textContent = "DEEZ NUTS MAN"; + + const menuMobile = mobile.buildMenu(); + + document.body.append(menuMobile, div, h1); +} + fontAwesome(); - -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'); -h1.textContent = 'DEEZ NUTS MAN'; - - -const menuMobile = mobile.buildMenu(); -document.body.appendChild(menuMobile); -document.body.appendChild(div); -document.body.appendChild(h1); - +website(); diff --git a/dynamicProgrammingExamples/webpack.common.js b/dynamicProgrammingExamples/webpack.common.js index f6e3fdc..1b744ed 100644 --- a/dynamicProgrammingExamples/webpack.common.js +++ b/dynamicProgrammingExamples/webpack.common.js @@ -1,33 +1,33 @@ -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); +const path = require("path"); +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', - path: path.resolve(__dirname, 'dist'), + filename: "bundle.js", + 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', + test: /\.(png|svg|jpg|jpeg|gif)$/i, + type: "asset/resource", }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, - type: 'asset/resource', + type: "asset/resource", }, ], }, diff --git a/dynamicProgrammingExamples/webpack.dev.js b/dynamicProgrammingExamples/webpack.dev.js index ea20624..406102c 100644 --- a/dynamicProgrammingExamples/webpack.dev.js +++ b/dynamicProgrammingExamples/webpack.dev.js @@ -1,10 +1,10 @@ -const { merge } = require('webpack-merge'); -const common = require('./webpack.common.js'); +const { merge } = require("webpack-merge"); +const common = require("./webpack.common.js"); module.exports = merge(common, { - mode: 'development', - devtool: 'inline-source-map', + mode: "development", + devtool: "inline-source-map", devServer: { - static: './dist', + static: "./dist", }, -}) +}); diff --git a/dynamicProgrammingExamples/webpack.prod.js b/dynamicProgrammingExamples/webpack.prod.js index 97b7eca..95b8303 100644 --- a/dynamicProgrammingExamples/webpack.prod.js +++ b/dynamicProgrammingExamples/webpack.prod.js @@ -1,7 +1,6 @@ -const { merge } = require('webpack-merge'); -const common = require('./webpack.common.js'); - +const { merge } = require("webpack-merge"); +const common = require("./webpack.common.js"); module.exports = merge(common, { - mode: 'production', + mode: "production", });