smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 22:50:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

format: prettier

Browse source
This commit is contained in:
Mike 2024-01-10 00:30:16 -05:00
parent 17649c7fbd
commit 0d843d6aa3
9 changed files with 151 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
dynamicProgrammingExamples/.eslintrc.js
View file

@ -1,13 +1,16 @@
module.exports = { module.exports = {
"env": { "env": {
"browser": true, "browser": true,
"es2021": true, "es2021": true,
node: true node: true
}, },
"extends": "eslint:recommended", "extends": [
"eslint:recommended",
"prettierd"
],
"parserOptions": { "parserOptions": {
"ecmaVersion": "latest", "ecmaVersion": "latest",
"sourceType": "module" "sourceType": "module"
}, },
} }

29
dynamicProgrammingExamples/package-lock.json generated
View file

@ -11,7 +11,9 @@
"devDependencies": { "devDependencies": {
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"html-webpack-plugin": "^5.6.0", "html-webpack-plugin": "^5.6.0",
"prettier": "3.1.1",
"style-loader": "^3.3.3", "style-loader": "^3.3.3",
"webpack": "^5.89.0", "webpack": "^5.89.0",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4",
@ -1661,6 +1663,18 @@
"url": "https://opencollective.com/eslint" "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": { "node_modules/eslint-scope": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@ -3585,6 +3599,21 @@
"node": ">= 0.8.0" "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": { "node_modules/pretty-error": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",

2
dynamicProgrammingExamples/package.json
View file

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

93
dynamicProgrammingExamples/src/components/dropDown.js
View file

@ -3,82 +3,83 @@ class DropDown {
this.menu = menu; this.menu = menu;
} }
title = 'Menu'; title = "Menu";
clicked = false; clicked = false;
getMenu = () => { getMenu = () => {
this.div; this.div;
} };
dropdownComponent() { dropdownComponent() {
// render items // render items
this.createDropdownItems(); this.createDropdownItems();
this.createMenuButton(); 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); this.div.append(this.button, this.dropdownItems);
return this.div; return this.div;
} }
createDropdownItems() { 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.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.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() { 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.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; this.dropdownItems.style.visibility = visibilityToggle;
}) });
} }
} }
export { DropDown } export { DropDown };

53
dynamicProgrammingExamples/src/components/mobileMenu.js
View file

@ -1,54 +1,52 @@
class Menu { class Menu {
constructor(menuItems) { constructor(menuItems) {
this.menuItems = 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.setupMenuStructure();
this.setupResizeListener(); this.setupResizeListener();
} }
setupMenuStructure() { 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 // Determine if Burger Icon should show
this.burgerIconStyles(); this.burgerIconStyles();
this.burgerIconSetter(); this.burgerIconSetter();
this.menuItems.forEach(element => { this.menuItems.forEach((element) => {
const li = document.createElement('li'); const li = document.createElement("li");
li.textContent = element; li.textContent = element;
li.style.listStyleType = 'none'; li.style.listStyleType = "none";
this.container.appendChild(li); this.container.appendChild(li);
}); });
this.menu.append(this.burgerIcon, this.container); this.menu.append(this.burgerIcon, this.container);
} }
adjustStylesForSmallScreen() { 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() { 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() { 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() { burgerIconSetter() {
@ -59,17 +57,17 @@ class Menu {
} else { } else {
this.adjustStylesForLargeScreen(); this.adjustStylesForLargeScreen();
} }
} }
burgerIconClickListener () { 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() { setupResizeListener() {
window.addEventListener('resize', () => this.burgerIconSetter()); window.addEventListener("resize", () => this.burgerIconSetter());
} }
buildMenu() { buildMenu() {
@ -77,5 +75,4 @@ class Menu {
} }
} }
export { Menu }; export { Menu };

39
dynamicProgrammingExamples/src/index.js
View file

@ -1,29 +1,28 @@
import { DropDown } from "./components/dropDown"; import { DropDown } from "./components/dropDown";
import { Menu } from "./components/mobileMenu"; import { Menu } from "./components/mobileMenu";
import './style.css'; import "./style.css";
function fontAwesome() { 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); 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(); fontAwesome();
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.appendChild(menuMobile);
document.body.appendChild(div);
document.body.appendChild(h1);

20
dynamicProgrammingExamples/webpack.common.js
View file

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

12
dynamicProgrammingExamples/webpack.dev.js
View file

@ -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, { module.exports = merge(common, {
mode: 'development', mode: "development",
devtool: 'inline-source-map', devtool: "inline-source-map",
devServer: { devServer: {
static: './dist', static: "./dist",
}, },
}) });

7
dynamicProgrammingExamples/webpack.prod.js
View file

@ -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, { module.exports = merge(common, {
mode: 'production', mode: "production",
}); });