diff --git a/src/index.html b/src/index.html index 3496ee13..87592b22 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,12 @@ rel="stylesheet" href="./styles/main.scss" /> + - +
diff --git a/src/scripts/main.js b/src/scripts/main.js index 2cdcd10c..44b7741a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -18,10 +18,46 @@ const food = { }, }; +// debugger; + const tree = document.querySelector('#tree'); +// function createTree(element, data) { +// const ul = document.createElement('ul'); + +// for (const branch in data) { +// if (Object.keys(data[branch]).length === 0) { +// ul.insertAdjacentHTML('beforeend', `
  • ${branch}
    • `); +// } else { +// ul.insertAdjacentElement('beforeend', createTree(ul, data[branch])); +// } +// } + +// return ul; +// } + function createTree(element, data) { - // WRITE YOUR CODE HERE + const ul = document.createElement('ul'); + // create new branch + + for (const branch in data) { + const li = document.createElement('li'); + // create new list item + + li.insertAdjacentText('beforeend', `${branch}`); + // add name to the list item + + if (Object.keys(data[branch]).length > 0) { + createTree(li, data[branch]); + // if branch has childs, do the same cycle for them + } + + ul.insertAdjacentElement('beforeend', li); + // add current list item to branch + } + + element.insertAdjacentElement('beforeend', ul); + // add completed barnch to parent branch } createTree(tree, food);