Skip to content

Commit

Permalink
commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
Humenyuk1991 committed Dec 17, 2024
1 parent bfc531d commit f90addb
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 10 deletions.
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
Original file line number Diff line number Diff line change
@@ -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
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "^1.9.12",
"@mate-academy/stylelint-config": "latest",
"backstopjs": "6.3.23",
"jest": "^29.7.0",
Expand Down
6 changes: 3 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -22,8 +22,8 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_stars/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_stars/report/html_report/)
- [DEMO LINK](https://Humenyuk1991.github.io/layout_stars/)
- [TEST REPORT LINK](https://Humenyuk1991.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.

Expand Down
43 changes: 42 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,47 @@
/>
</head>
<body>
<h1>Stars</h1>
<div class="stars stars--0">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--1">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--2">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--3">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--5">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
</body>
</html>
43 changes: 43 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -1 +1,44 @@
/* add styles here */
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}

.stars {
display: flex;
width: 16px;
height: 16px;
align-items: center;
}

.stars__star {
background-image: url(images/star.svg);
background-size: cover;
margin-right: 4px;
}

.stars--0 .stars__star:nth-child(-n + 0) {
background-image: url(images/star-active.svg);
}

.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);
}

0 comments on commit f90addb

Please sign in to comment.