From e356527e883b074e389569b72ee8b6ca43d47edc Mon Sep 17 00:00:00 2001 From: Mykyta Landar Date: Wed, 26 Feb 2025 20:02:20 +0100 Subject: [PATCH 1/2] create stars block --- .github/workflows/test.yml-template | 29 +++++++++++++++++ package-lock.json | 9 +++--- package.json | 3 +- readme.md | 6 ++-- src/index.html | 50 +++++++++++++++++++++++++++-- src/style.css | 46 +++++++++++++++++++++++++- 6 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 .github/workflows/test.yml-template diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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 test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/package-lock.json b/package-lock.json index 679d844cb7..8d91f84c55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.0", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.3.23", "jest": "^29.7.0", @@ -1211,10 +1211,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.0.tgz", + "integrity": "sha512-o2vuqsP6B3j8ncaDIdRPGLltg2l8MZRRyBkQRDnTRt5XpgE+oSPgW6k0UiDMBbAI3IHNfHNf3ydJPQhPs2aVIw==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 28b7ea9ca7..af4857c010 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,12 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.0", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.3.23", "jest": "^29.7.0", diff --git a/readme.md b/readme.md index b8c3a1d3f2..be8538c2f0 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ Implement the [Stars Block](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=11325%3A2960) used in a card and catalog. -Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. +Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) @@ -22,8 +22,8 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stars/) -- [TEST REPORT LINK](https://.github.io/layout_stars/report/html_report/) +- [DEMO LINK](https://mykytalandar.github.io/layout_stars/) +- [TEST REPORT LINK](https://mykytalandar.github.io/layout_stars/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 3e4d7e8ab0..028679daa3 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,53 @@ href="./style.css" /> - -

Stars

+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..707c741385 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,45 @@ -/* add styles here */ +html { + margin: 0; +} + +.body { + margin: 0; +} + +.stars { + display: flex; + flex-direction: row; +} + +.stars__star { + background-image: url(images/star.svg); + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin-right: 4px; +} + +.stars__star:last-child { + margin-right: 0; +} + +.stars--1 .stars__star:nth-child(-n + 1) { + background-image: url(images/star-active.svg); +} + +.stars--2 .stars__star:nth-child(-n + 2) { + background-image: url(images/star-active.svg); +} + +.stars--3 .stars__star:nth-child(-n + 3) { + background-image: url(images/star-active.svg); +} + +.stars--4 .stars__star:nth-child(-n + 4) { + background-image: url(images/star-active.svg); +} + +.stars--5 .stars__star:nth-child(-n + 5) { + background-image: url(images/star-active.svg); +} From 5b9c5bae86c4071f71893702445f43c9f14014e2 Mon Sep 17 00:00:00 2001 From: Mykyta Landar Date: Fri, 28 Feb 2025 22:50:43 +0100 Subject: [PATCH 2/2] fixed code --- src/index.html | 2 +- src/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 028679daa3..428d3b303b 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,7 @@ href="./style.css" /> - +
diff --git a/src/style.css b/src/style.css index 707c741385..b4c5a9f88d 100644 --- a/src/style.css +++ b/src/style.css @@ -2,7 +2,7 @@ html { margin: 0; } -.body { +body { margin: 0; }