Skip to content

Commit

Permalink
end result
Browse files Browse the repository at this point in the history
  • Loading branch information
IPlavutskyi committed Feb 10, 2025
1 parent bfc531d commit 821e246
Show file tree
Hide file tree
Showing 8 changed files with 113 additions and 12 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://IPlavutskyi.github.io/layout_stars/)
- [TEST REPORT LINK](https://IPlavutskyi.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
Binary file added src/images/Star.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 50 additions & 2 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!--#region head-->
<!doctype html>
<html lang="en">
<head>
Expand All @@ -9,10 +10,57 @@
<title>Stars</title>
<link
rel="stylesheet"
href="./style.css"
href="./stars.css"
/>
</head>
<!--#endregion-->
<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>
25 changes: 25 additions & 0 deletions src/stars.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
body {
margin: 0;
}

.stars {
display: flex;
}

.stars__star {
background-image: url(/src/images/star.svg);
width: 16px;
height: 16px;
border-radius: 0 5px;
background-position: center;
background-repeat: no-repeat;
margin-right: 4px;
}

.stars--1 .stars__star:nth-child(-n + 1),
.stars--2 .stars__star:nth-child(-n + 2),
.stars--3 .stars__star:nth-child(-n + 3),
.stars--4 .stars__star:nth-child(-n + 4),
.stars--5 .stars__star:nth-child(-n + 5) {
background-image: url(/src/images/star-active.svg);
}
1 change: 0 additions & 1 deletion src/style.css

This file was deleted.

0 comments on commit 821e246

Please sign in to comment.