diff --git a/main.js b/main.js index ee522d9..cf082c3 100644 --- a/main.js +++ b/main.js @@ -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) diff --git a/style.css b/style.css index fac468c..6761902 100644 --- a/style.css +++ b/style.css @@ -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);