mate-academy · yana-longstocking · May 4, 2026
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm start & sleep 5 && npm test
+      - name: Upload tests report(cypress mochaawesome merged HTML report)
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: report
+          path: reports
diff --git a/README.md b/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://yana-longstocking.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.
diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,7 @@
     />
   </head>
   <body>
+    <div id="tree"></div>
     <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git 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.appendChild(li);
+  }
+
+  element.appendChild(ul);
 }
 
 createTree(tree, food);
diff --git 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');
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ @@
         />
       </head>
       <body>
+        <div id="tree"></div>
         <script src="scripts/main.js"></script>
       </body>
     </html>