diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..44ac4e963 --- /dev/null +++ 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 index 0adab1feb..2327c318c 100644 --- 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 `` with your GitHub username in the link - - [DEMO LINK](https://.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 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..779a778a2 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.appendChild(li); + } + + element.appendChild(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'); }