smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 06:40: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

5
dynamicProgrammingExamples/.eslintrc.js
View file

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

29
dynamicProgrammingExamples/package-lock.json generated
View file

@ -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",

2
dynamicProgrammingExamples/package.json
View file

@ -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",

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

@ -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.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 };

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

@ -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 };

39
dynamicProgrammingExamples/src/index.js
View file

@ -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();

18
dynamicProgrammingExamples/webpack.common.js
View file

@ -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',
type: "asset/resource",
},
{
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 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",
},
})
});

7
dynamicProgrammingExamples/webpack.prod.js
View file

@ -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",
});