From 4fca1eaab41844d90437f2777d929a7e098f3de3 Mon Sep 17 00:00:00 2001 From: Maksym Date: Tue, 28 Apr 2026 12:52:34 +0300 Subject: [PATCH] add task solution --- README.md | 6 +++--- src/index.html | 1 + src/scripts/main.js | 16 +++++++++++++++- src/styles/_fonts.scss | 2 +- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0adab1feb..748deb66d 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 `` with your GitHub username in the link - - [DEMO LINK](https://.github.io/js_tree-from-object-DOM/) + - [DEMO LINK](https://zubchenko-maksym.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/index.html b/src/index.html index 3496ee135..17cc89176 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,7 @@ /> +
diff --git a/src/scripts/main.js b/src/scripts/main.js index 2cdcd10cf..5148b8d49 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -21,7 +21,21 @@ const food = { 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'); }