From 65d9d9f6230ab6454f4854cbd7e70ff8189268cc Mon Sep 17 00:00:00 2001
From: Mykhailo Oliinyk <mykhailo.oliinyk9@gmail.com>
Date: Mon, 1 Jun 2026 17:24:21 +0300
Subject: [PATCH] Solution

---
 README.md              |  6 +++---
 src/scripts/main.js    | 21 ++++++++++++++++++++-
 src/styles/_fonts.scss |  2 +-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0adab1feb..94de5957f 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 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,7 +11,7 @@ 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://azesmmisha.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;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 2cdcd10cf..7b0883755 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -18,10 +18,29 @@ const food = {
   },
 };
 
+const treeNode = document.createElement('div');
+
+treeNode.id = 'tree';
+document.body.prepend(treeNode);
+
 const tree = document.querySelector('#tree');
 
 function createTree(element, data) {
-  // WRITE YOUR CODE HERE
+  const ul = document.createElement('ul');
+
+  for (const key in data) {
+    const li = document.createElement('li');
+
+    li.textContent = key;
+
+    if (Object.keys(data[key]).length > 0) {
+      createTree(li, data[key]);
+    }
+
+    ul.append(li);
+  }
+
+  element.append(ul);
 }
 
 createTree(tree, food);
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 45cdd5400..5cfc5b4d0 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
+  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
 }