Egg/brown-wall
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

JS Cleanup and some CSS fuckery

Browse source
This commit is contained in:
Nox Sluijtman 2023-07-15 21:45:04 +02:00
parent e7cd2712b1
commit 66b3b8bdff
2 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
main.js
View file

@ -1,30 +1,19 @@
"using strict";
const fruits = [ "Apple"
, "Banana"
, "Grapefruit"
, "Orange"
]
const genres = [ "FPP"
, "Action Adventure"
, "Lobotomy aka Idlegame"
, "Specticle Fighter"
]
//const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ];
const menus = [{ "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Genre", "items": ["FFP", "Action Adventrue", "Lobotomy aka Idlegame"] }];
const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ], "description":"What it says on the tin." }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ], "description":"Overal genre of the thinky thing" } ];
const menuContainer = document.getElementById('menu-container');
menus.forEach( menu =>{
const dropdownMenu = document.createElement('menu');
const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name});
const description = Object.assign(document.createElement('p'), {innerHTML:menu.description});
const dropdownSelect = document.createElement('select');
dropdownMenu.id = menu.name.toLowerCase();
dropdownMenu.className = "dropdown-menu";
dropdownMenu.appendChild(menuTitle)
dropdownMenu.appendChild(description)
menuContainer.appendChild(dropdownMenu)
dropdownMenu.appendChild(dropdownSelect)

19
style.css
View file

@ -13,12 +13,29 @@ main{
.menu-container{
grid-template-columns: 33% 33% 33%;
}
.dropdown-menu{
margin:1em;
padding: 3em;
}
}
@media (max-width: 999px) {
.menu-container{
grid-template-columns: 50% 50%;
}
.dropdown-menu{
margin:1em;
padding: 2em;
}
}
@media (max-width: 600px) {
.menu-container{
grid-template-columns: 100%;
}
.dropdown-menu{
padding: 1em;
}
}
.menu-container{
@ -30,8 +47,6 @@ main{
.dropdown-menu{
border: black 2pt solid;
border-radius: 1em;
padding:3em;
margin:1em;
transition: all 200ms;
background-color: #ddd;
filter:drop-shadow(7px 5px 4px black);