Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add tast solution #5192

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add tast solution #5192

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58b65f8
add tast solution
serhii-lesik Jan 17, 2025
dc312db
add second task solution
serhii-lesik Jan 17, 2025
ca64c2b
add third task solution
serhii-lesik Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs

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

- [DEMO LINK](https://<your_account>.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_product-cards/report/html_report/)
- [DEMO LINK](https://serhii-lesik.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://serhii-lesik.github.io/layout_product-cards/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
32 changes: 31 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!-- #region head -->
<!doctype html>
<html lang="en">
<head>
Expand All @@ -7,12 +8,41 @@
content="width=device-width, initial-scale=1.0"
/>
<title>Product cards</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="./styles/index.scss"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linking to the SCSS file directly in HTML is unnecessary if you are already linking to the compiled CSS file. The Parcel bundler should handle the SCSS compilation, so you can remove this line to avoid redundancy.

/>
<link
rel="stylesheet"
href="./styles/index.css"
/>
</head>
<!-- #endregion -->
<body>
<h1>Product cards</h1>
<div class="card" data-qa="card">
<div class="card__image"></div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use semantic tag image to display card picture

<div class="card__info">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this redundant container

<div class="card__name">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use h3 tag for card title

<div class="card__code">Product code: 195434</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use paragraph tag for other text

<div class="card__rating">
<div class="card__stars">
<div class="card__star"></div>
<div class="card__star"></div>
<div class="card__star"></div>
<div class="card__star"></div>
<div class="card__star"></div>
</div>
Comment on lines +27 to +33
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reuse stars block from previous task

<div class="card__reviews">Reviews: 5</div>
</div>
<div class="card__price">
<div class="card__priceText">Price:</div>
<div class="card__priceValue">$2,199</div>
</div>
<div class="card__button" data-qa="hover">Buy</div>
</div>
</div>
</body>
</html>
130 changes: 130 additions & 0 deletions src/styles/index.css
View file
Open in desktop

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

1 change: 1 addition & 0 deletions src/styles/index.css.map
View file
Open in desktop

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

2 changes: 2 additions & 0 deletions src/styles/index.min.css
View file
Open in desktop

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

1 change: 1 addition & 0 deletions src/styles/index.min.css.map
View file
Open in desktop

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

126 changes: 126 additions & 0 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,129 @@
body {
margin: 0;
font-family: Roboto, sans-serif;
}

.card {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add border for card element.

box-sizing: border-box;
width: 200px;
height: 408px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove hardcoded height. It should be setted by elements inside card

display: flex;
flex-direction: column;
align-items: center;
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding: 32px 16px 16px;

.card__image {
margin-top: 32px;
box-sizing: border-box;
background-image: url(/src/images/imac.jpeg);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background-image URL should be relative to the SCSS file location. Change it to ../images/imac.jpeg to ensure it works correctly when deployed.

background-size: cover;
width: 160px;
height: 134px;
}

.card__info {
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-left: 17px;
margin-right: 17px;
}

.card__name {
margin-top: 40px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
text-align: left;
color: #000000;
}

.card__code {
font-size: 10px;
font-weight: 400;
line-height: 14px;
text-align: left;
color: #616070;
margin-top: 4px;
}

.card__rating {
margin-top: 16px;
display: flex;
justify-content: space-between;
}

.card__stars {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.card__star {
box-sizing: border-box;
width: 16px;
height: 16px;
background-image: url(/src/images/star.svg);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background-image URL for the star should also be relative. Change it to ../images/star.svg to ensure proper loading.

background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
margin-right: 4px;
}

.card__reviews {
font-size: 10px;
font-weight: 400;
line-height: 14px;
text-align: right;
}

.card__price {
margin-top: 24px;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.card__priceText {
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #616070;
}

.card__priceValue {
font-size: 16px;
font-weight: 700;
line-height: 18px;
color: #060B35;
}

.card__button {
box-sizing: border-box;
margin-top: 16px;
background-color: #00ACDC;
font-size: 14px;
line-height: 16px;
width: 166px;
height: 40px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
text-transform: uppercase;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using SCSS variables for repeated values like colors, font sizes, and dimensions. This will make your code more maintainable and easier to update.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implement SCSS nesting to better organize your styles. For example, nest the styles for .card__image, .card__info, etc., inside the .card block.


.card .card__star:nth-child(-n+4) {
background-image: url(/src/images/star-active.svg);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly, update the background-image URL for the active star to ../images/star-active.svg to maintain consistency and ensure the image loads correctly.

transition: transform 0.3s ease;
}

.card__button:hover {
box-sizing: border-box;
background-color: #FFFFFF;
color: #00ACDC;
border-radius: 5px;
border: 1px solid #00ACDC
}
Loading