Solution

README.md

@@ -1,6 +1,7 @@
 # Tree from object
-Write a function `createTree(element, data)` that creates a nested list of `ul/li` from an object. 
-Use keys as list items. 
+
+Write a function `createTree(element, data)` that creates a nested list of `ul/li` from an object.
+Use keys as list items.
 
 `element` - is a DOM element
 
@@ -11,13 +12,14 @@ Use keys as list items.
 ![screenshot of the tree](example/object-tree.png)
 
 1. Replace `<your_account>` with your GitHub username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_tree-from-object-DOM/)
+   - [DEMO LINK](https://TIgor22.github.io/js_tree-from-object-DOM/)
 2. Follow [this instructions](https://github.com/mate-academy/js_task-DOM-guideline)
-    - Run `npm run test` command to test your code;
-    - Run `npm run test:only -- -n` to run fast test ignoring linter;
-    - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
+   - Run `npm run test` command to test your code;
+   - Run `npm run test:only -- -n` to run fast test ignoring linter;
+   - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
 
 ### Styling with SCSS 🎨
+
 This project uses Parcel, which automatically handles the compilation of SCSS to CSS out of the box.
 
 You do not need to manually compile your .scss files. Simply link your main SCSS file directly in your HTML, and Parcel will take care of the rest.

src/scripts/main.js

@@ -18,10 +18,46 @@ const food = {
   },
 };
 
-const tree = document.querySelector('#tree');
+let tree = document.querySelector('#tree');
+
+if (!tree) {
+  const container = document.createElement('div');
+
+  container.id = 'tree';
+  document.body.appendChild(container);
+  tree = container;
+}
+
+function buildList(obj) {
+  const ul = document.createElement('ul');
+
+  for (const key of Object.keys(obj)) {
+    const li = document.createElement('li');
+
+    li.textContent = key;
+
+    const value = obj[key];
+
+    if (
+      typeof value === 'object' &&
+      value !== null &&
+      Object.keys(value).length > 0
+    ) {
+      li.appendChild(buildList(value));
+    }
+
+    ul.appendChild(li);
+  }
+
+  return ul;
+}
 
 function createTree(element, data) {
-  // WRITE YOUR CODE HERE
+  element.innerHTML = '';
+
+  const rootUI = buildList(data);
+
+  element.appendChild(rootUI);
 }
 
 createTree(tree, food);