diff --git a/brown-wall.html b/brown-wall.html index f398f02..15806f0 100644 --- a/brown-wall.html +++ b/brown-wall.html @@ -16,7 +16,6 @@ - diff --git a/main.js b/main.js index 2287c21..3f9d9dd 100644 --- a/main.js +++ b/main.js @@ -1,41 +1,42 @@ "using strict"; -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 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'); +function initLists (lists){ + 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'); + 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) + dropdownMenu.id = menu.name.toLowerCase(); + dropdownMenu.className = "dropdown-menu"; + dropdownMenu.appendChild(menuTitle); + dropdownMenu.appendChild(description); + menuContainer.appendChild(dropdownMenu); + dropdownMenu.appendChild(dropdownSelect); - menu.items.forEach(item =>{ - dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item})) - }) -}) + menu.items.forEach(item =>{ + dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item})); + }); + }); +}; document.getElementById('import').onclick = function() { const files = document.getElementById('selectFiles').files; if (files.length <= 0) { return false; } - - var fr = new FileReader(); - + + const fr = new FileReader(); + fr.onload = function(e) { - console.log(e); - var result = JSON.parse(e.target.result); - var formatted = JSON.stringify(result, null, 2); - document.getElementById('result').value = formatted; + console.log(e); + const result = JSON.parse(e.target.result); + initLists(JSON.stringify(result, null, 2)); } - + fr.readAsText(files.item(0)); };