From 4740f9c13111c3c95b4e70871e32d3cdb2c836d8 Mon Sep 17 00:00:00 2001 From: Yaroslav Grom Date: Wed, 18 Feb 2026 15:28:48 +0100 Subject: [PATCH 1/3] solution 2 --- .prettierrc | 23 ++- README.md | 2 +- package-lock.json | 232 +++++++++++++++++++++++- package.json | 3 +- src/App.css | 87 --------- src/App.jsx | 87 +-------- src/components/Article/Article.css | 30 +++ src/components/Article/Article.jsx | 63 +++++++ src/components/Article/Article.spec.jsx | 32 ++-- src/components/Header/Header.css | 46 +++++ src/components/Header/Header.jsx | 21 +++ src/components/Header/Header.spec.jsx | 36 ++-- src/components/Welcome/Welcome.css | 15 ++ src/components/Welcome/Welcome.jsx | 10 + src/components/Welcome/Welcome.spec.jsx | 24 +-- src/index.jsx | 6 +- 16 files changed, 488 insertions(+), 229 deletions(-) diff --git a/.prettierrc b/.prettierrc index 49b905d69..207434707 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1,16 @@ { - "arrowParens": "avoid", - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "all", - "jsxSingleQuote": false, - "printWidth": 80, - "semi": true, - "bracketSpacing": true, - "bracketSameLine": false + "files.autoSave": "afterDelay", + "files.autoSaveDelay": 500, + "editor.fontSize": 15, + "editor.tabSize": 2, + "editor.renderWhitespace": "boundary", + "editor.detectIndentation": false, + + "editor.codeActionsOnSave": { + "source.fixAll": "always", + "source.fixAll.eslint": "always" + }, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnType": true, + "editor.formatOnSave": true, } diff --git a/README.md b/README.md index acd4587e2..05573019a 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,4 @@ Split the `App.js` into components based on CSS blocks. CSS code should be split - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline) - Open one more terminal and run tests with `npm test` to ensure your solutions is correct -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_decompose/) and add it to the PR description +- Replace `OliverBars` with your Github username in the [DEMO LINK](https://OliverBars.github.io/react_decompose/) and add it to the PR description diff --git a/package-lock.json b/package-lock.json index 199392962..3ec86d23f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "GPL-3.0", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", + "@rollup/rollup-win32-x64-msvc": "^4.57.1", "bulma": "^1.0.1", "classnames": "^2.5.1", "react": "^18.3.1", @@ -18,7 +19,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "*", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.0", @@ -763,10 +764,11 @@ } }, "node_modules/@mate-academy/scripts": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz", - "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -1479,6 +1481,34 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz", + "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz", + "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.18.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz", @@ -1492,6 +1522,186 @@ "darwin" ] }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz", + "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz", + "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz", + "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz", + "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz", + "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz", + "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz", + "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz", + "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz", + "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz", + "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz", + "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz", + "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.57.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz", + "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "os": [ + "win32" + ] + }, "node_modules/@sinonjs/commons": { "version": "1.8.6", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", @@ -8298,6 +8508,20 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz", + "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index 4084d88ef..1b6f718ca 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "license": "GPL-3.0", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", + "@rollup/rollup-win32-x64-msvc": "^4.57.1", "bulma": "^1.0.1", "classnames": "^2.5.1", "react": "^18.3.1", @@ -14,7 +15,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "*", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.0", diff --git a/src/App.css b/src/App.css index cfaa88809..241ccafaf 100644 --- a/src/App.css +++ b/src/App.css @@ -17,90 +17,3 @@ body { margin: 0; background: #eee; } - -.welcome { - height: 100vh; - background: coral; -} - -.welcome__text { - margin: 0; - font-size: 400%; - text-align: center; - line-height: 1; - padding-top: calc(50vh - 20pt); - display: block; - font-weight: 700; -} - -.header { - width: 100%; - padding: 1em; - font-size: 140%; - position: sticky; - top: 0; - left: 0; - right: 0; - transition: opacity 0.2s ease-in-out; - text-align: center; -} - -.header__title { - font-weight: 600; - display: inline; - margin: 0; - padding: 0; - font-size: inherit; -} - -.navigation__link { - display: inline-block; - outline: none; - text-decoration: none; - opacity: 0.7; - padding: 0 0.5em; - color: black; - transition: opacity 0.2s ease-in-out; -} - -.navigation__link:hover, -.navigation__link:focus { - opacity: 1; -} - -.article { - margin: 5em auto 0; - padding: 1em; - font-size: 140%; - max-width: 800px; - background: white; - box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px; -} - -.article__paragraph { - margin: 0; - color: #333; -} - -.article__paragraph:not(:first-child) { - margin-top: 0.7em; -} - -@media (min-width: 500px) { - .header { - text-align: left; - display: flex; - justify-content: space-between; - } - - .article { - margin: 3.5em auto 0; - padding: 2em; - } -} - -@media (min-width: 800px) { - .article { - margin: 3.5em auto; - } -} diff --git a/src/App.jsx b/src/App.jsx index c97808216..12debb0ad 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,86 +1,17 @@ -import React from 'react'; -import './App.css'; +import React from "react"; +import "./App.css"; + // Move each BEM block to a separate component (file) and import them here +import Article from "./components/Article/Article"; +import Header from "./components/Header/Header"; +import Welkome from "./components/Welcome/Welcome"; function App() { return (
-
- Sticky Header! -
-
-

Site Name

- -
-
-

Headline

-

- In elementum lorem eget est euismod ornare. Phasellus sit amet - pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam - nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere - lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt - dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis - bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis - orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum. - Nunc efficitur massa non neque elementum semper. Vestibulum lorem - arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed - tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh, - bibendum gravida felis. Vivamus ut nunc id mauris posuere - pellentesque. Praesent tincidunt id odio id feugiat. -

-

- In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, - fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et - cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien - ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit - molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor - congue magna, sit amet bibendum libero nisi id massa. -

-

- Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. - Cras congue, massa nec sagittis mollis, dui felis ultrices magna, - tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit - amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec - maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem - hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum - semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat - velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend. - Aenean quis faucibus ex. -

-

- Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla - facilisi. In at elit id leo tristique condimentum. Donec at est nulla. - Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit - vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna - nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo. - Praesent in ullamcorper est. -

-

- Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam - convallis faucibus ante sed porta. Nullam ut convallis elit, quis - venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et - orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo - dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae - turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur - consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt - quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. - Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis - interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu - diam. -

-
+ +
+
); } diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css index 56e2e0542..14c5f7036 100644 --- a/src/components/Article/Article.css +++ b/src/components/Article/Article.css @@ -1 +1,31 @@ /* Put article styles here */ +.article { + margin: 5em auto 0; + padding: 1em; + font-size: 140%; + max-width: 800px; + background: white; + box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px; +} + +.article__paragraph { + margin: 0; + color: #333; +} + +.article__paragraph:not(:first-child) { + margin-top: 0.7em; +} + +@media (min-width: 500px) { + .article { + margin: 3.5em auto 0; + padding: 2em; + } +} + +@media (min-width: 800px) { + .article { + margin: 3.5em auto; + } +} diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index 073476529..6d1e1923c 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -3,3 +3,66 @@ // Create an Article function returning the HTML of article block // Add a default export statement for Article component to use it in the other files + +import "./Article.css"; + +export const Article = () => ( +
+

Headline

+

+ In elementum lorem eget est euismod ornare. Phasellus sit amet + pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh. + Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem, + vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce + efficitur, orci non vestibulum consequat, lectus turpis bibendum odio, in + efficitur leo felis sed justo. Fusce commodo iaculis orci, quis imperdiet + urna. Sed mollis facilisis lacus non condimentum. Nunc efficitur massa non + neque elementum semper. Vestibulum lorem arcu, tincidunt in quam et, + feugiat venenatis augue. Donec sed tincidunt tellus, a facilisis magna. + Proin sit amet viverra nibh, bibendum gravida felis. Vivamus ut nunc id + mauris posuere pellentesque. Praesent tincidunt id odio id feugiat. +

+

+ In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, fermentum + ac quam. Aliquam pretium tristique nibh quis iaculis. In et cursus ex, eu + aliquet ex. Proin facilisis lacus sit amet sapien ultrices, ut vehicula + arcu lobortis. Vivamus mollis ipsum ut hendrerit molestie. Morbi lacinia, + sapien eu dictum dignissim, tellus tortor congue magna, sit amet bibendum + libero nisi id massa. +

+

+ Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras + congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt + finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet vulputate + quis, ultricies eu libero. Donec ac maximus neque, nec maximus nibh. Morbi + rhoncus convallis urna, accumsan porta lorem hendrerit in. Cras eget nisl + dui. Morbi faucibus nisi eget ipsum semper vulputate. Mauris nec tincidunt + lectus. Aenean ac mi consequat velit dignissim consectetur. Fusce placerat + ac ipsum ac eleifend. Aenean quis faucibus ex. +

+

+ Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla + facilisi. In at elit id leo tristique condimentum. Donec at est nulla. + Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit vestibulum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien + eros. Vivamus viverra ultricies gravida. Nam urna nibh, blandit a + vulputate at, vehicula non nulla. Aenean ut nulla leo. Praesent in + ullamcorper est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames + ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam convallis + faucibus ante sed porta. Nullam ut convallis elit, quis venenatis nunc. + Curabitur sed sem eget velit condimentum rutrum in et orci. Nunc non + suscipit eros. Suspendisse porta sem vel justo commodo dictum. Aliquam + erat ligula, fringilla nec suscipit sed, porta vitae turpis. Vestibulum + rhoncus placerat nulla vitae suscipit. Curabitur consectetur ex ut odio + tristique vehicula. Ut ligula tortor, tincidunt quis sodales vitae, ornare + a turpis. Proin sit amet finibus enim. Fusce tempus a neque vitae tempor. + Aenean rutrum, libero iaculis interdum vulputate, dui eros vehicula nisi, + at interdum enim lacus eu diam. +

+
+); + +export default Article; diff --git a/src/components/Article/Article.spec.jsx b/src/components/Article/Article.spec.jsx index 64c3d3dec..7a6461285 100644 --- a/src/components/Article/Article.spec.jsx +++ b/src/components/Article/Article.spec.jsx @@ -1,31 +1,31 @@ -import React from 'react'; -import { mount } from '@cypress/react18'; -import TestdArticle from './Article'; +import React from "react"; +import { mount } from "@cypress/react18"; +import TestdArticle from "./Article"; -describe('Article component', () => { +describe("Article component", () => { beforeEach(() => { mount(); }); - it('should contain Headline', () => { - cy.get('h1').should('have.text', 'Headline'); + it("should contain Headline", () => { + cy.get("h1").should("have.text", "Headline"); }); - it('should contain 5 paragraphs', () => { - cy.get('p.article__paragraph').should('have.length', 5); + it("should contain 5 paragraphs", () => { + cy.get("p.article__paragraph").should("have.length", 5); }); - it('should have correct styles', () => { - cy.get('.article').should('have.css', 'max-width', '800px'); + it("should have correct styles", () => { + cy.get(".article").should("have.css", "max-width", "800px"); - cy.get('.article__paragraph') + cy.get(".article__paragraph") .eq(0) - .should('have.css', 'color', 'rgb(51, 51, 51)'); + .should("have.css", "color", "rgb(51, 51, 51)"); }); - it('should have styles added with media', () => { - cy.get('.article') - .should('have.css', 'padding-left', '44.8px') - .and('have.css', 'margin-bottom', '78.4px'); + it("should have styles added with media", () => { + cy.get(".article") + .should("have.css", "padding-left", "44.8px") + .and("have.css", "margin-bottom", "78.4px"); }); }); diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 0b160f66f..4bf75664f 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1 +1,47 @@ /* Put header styles here */ + +.header { + width: 100%; + padding: 1em; + font-size: 140%; + position: sticky; + top: 0; + left: 0; + right: 0; + transition: opacity 0.2s ease-in-out; + text-align: center; +} + +.header__title { + font-weight: 600; + display: inline; + margin: 0; + padding: 0; + font-size: inherit; +} + +.navigation__link { + display: inline-block; + outline: none; + text-decoration: none; + opacity: 0.7; + padding: 0 0.5em; + color: black; + transition: opacity 0.2s ease-in-out; +} + +.navigation__link:hover, +.navigation__link:focus { + opacity: 1; +} + + +@media (min-width: 500px) { + .header { + text-align: left; + display: flex; + justify-content: space-between; + } + + +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3f2fea103..35328fef4 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -3,3 +3,24 @@ // Create a Header function returning the HTML of header block // Add a default export statement for Header component to use it in the other files + +import "./Header.css"; + +const Header = () => ( +
+

Site Name

+ +
+); + +export default Header; diff --git a/src/components/Header/Header.spec.jsx b/src/components/Header/Header.spec.jsx index dc3dc766c..33959f41a 100644 --- a/src/components/Header/Header.spec.jsx +++ b/src/components/Header/Header.spec.jsx @@ -1,37 +1,37 @@ -import React from 'react'; -import { mount } from '@cypress/react18'; -import TestedHeader from './Header'; +import React from "react"; +import { mount } from "@cypress/react18"; +import TestedHeader from "./Header"; -describe('Header component', () => { +describe("Header component", () => { beforeEach(() => { mount(); }); - it('should containt Site Name', () => { - cy.get('h1').should('contain', 'Site Name'); + it("should containt Site Name", () => { + cy.get("h1").should("contain", "Site Name"); }); - it('should contain About link', () => { - cy.get('[href="#about"]').should('have.text', 'About'); + it("should contain About link", () => { + cy.get('[href="#about"]').should("have.text", "About"); }); - it('should contain Services link', () => { - cy.get('[href="#services"]').should('have.text', 'Services'); + it("should contain Services link", () => { + cy.get('[href="#services"]').should("have.text", "Services"); }); - it('should contain Contact link', () => { - cy.get('[href="#contact"]').should('have.text', 'Contact'); + it("should contain Contact link", () => { + cy.get('[href="#contact"]').should("have.text", "Contact"); }); - it('should have correct styles', () => { - cy.get('.header').should('have.css', 'position', 'sticky'); + it("should have correct styles", () => { + cy.get(".header").should("have.css", "position", "sticky"); - cy.get('.header__title').should('have.css', 'font-weight', '600'); + cy.get(".header__title").should("have.css", "font-weight", "600"); - cy.get('.navigation__link').eq(0).should('have.css', 'opacity', '0.7'); + cy.get(".navigation__link").eq(0).should("have.css", "opacity", "0.7"); }); - it('should have styles added with media', () => { - cy.get('.header').should('have.css', 'display', 'flex'); + it("should have styles added with media", () => { + cy.get(".header").should("have.css", "display", "flex"); }); }); diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css index 564ff918a..6eaf381e3 100644 --- a/src/components/Welcome/Welcome.css +++ b/src/components/Welcome/Welcome.css @@ -1 +1,16 @@ /* Put welcome styles here */ + +.welcome { + height: 100vh; + background: coral; +} + +.welcome__text { + margin: 0; + font-size: 400%; + text-align: center; + line-height: 1; + padding-top: calc(50vh - 20pt); + display: block; + font-weight: 700; +} diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index fbaaa3c4d..b3c42652f 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -3,3 +3,13 @@ // Create a Welcome function returning the HTML of welcome block // Add a default export statement for Welcome component to use it in the other files + +import "./Welcome.css"; + +const Welkome = () => ( +
+ Sticky Header! +
+); + +export default Welkome; diff --git a/src/components/Welcome/Welcome.spec.jsx b/src/components/Welcome/Welcome.spec.jsx index b6cbac85a..002909db4 100644 --- a/src/components/Welcome/Welcome.spec.jsx +++ b/src/components/Welcome/Welcome.spec.jsx @@ -1,23 +1,23 @@ -import React from 'react'; -import { mount } from '@cypress/react18'; -import TestedWelcome from './Welcome'; +import React from "react"; +import { mount } from "@cypress/react18"; +import TestedWelcome from "./Welcome"; -describe('Welcome component', () => { +describe("Welcome component", () => { beforeEach(() => { mount(); }); - it('should contain Sticky Header', () => { - cy.get('.welcome__text').should('have.text', 'Sticky Header!'); + it("should contain Sticky Header", () => { + cy.get(".welcome__text").should("have.text", "Sticky Header!"); }); - it('should have correct styles', () => { - cy.get('.welcome').should( - 'have.css', - 'background-color', - 'rgb(255, 127, 80)', + it("should have correct styles", () => { + cy.get(".welcome").should( + "have.css", + "background-color", + "rgb(255, 127, 80)", ); - cy.get('.welcome__text').should('have.css', 'text-align', 'center'); + cy.get(".welcome__text").should("have.css", "text-align", "center"); }); }); diff --git a/src/index.jsx b/src/index.jsx index 434b05d2f..248ed07ae 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,5 +1,5 @@ -import { createRoot } from 'react-dom/client'; +import { createRoot } from "react-dom/client"; -import App from './App'; +import App from "./App"; -createRoot(document.getElementById('root')).render(); +createRoot(document.getElementById("root")).render(); From c933a9ebccbc5207c46f6b900bdce99147084847 Mon Sep 17 00:00:00 2001 From: Yaroslav Grom Date: Wed, 18 Feb 2026 18:17:05 +0100 Subject: [PATCH 2/3] fix and fix :) --- src/App.jsx | 12 ++++++------ src/components/Article/Article.jsx | 2 +- src/components/Welcome/Welcome.jsx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 12debb0ad..535c2fa14 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,15 @@ -import React from "react"; -import "./App.css"; +import React from 'react'; +import './App.css'; // Move each BEM block to a separate component (file) and import them here -import Article from "./components/Article/Article"; -import Header from "./components/Header/Header"; -import Welkome from "./components/Welcome/Welcome"; +import Article from './components/Article/Article'; +import Header from './components/Header/Header'; +import Welcome from './components/Welcome/Welcome'; function App() { return (
- +
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index 6d1e1923c..abbdefa86 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -6,7 +6,7 @@ import "./Article.css"; -export const Article = () => ( +const Article = () => (

Headline

diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index b3c42652f..8e4411414 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -6,10 +6,10 @@ import "./Welcome.css"; -const Welkome = () => ( +const Welcome = () => (

Sticky Header!
); -export default Welkome; +export default Welcome; From 174be634c127978c593fb0cdd72ab6c558da2dcc Mon Sep 17 00:00:00 2001 From: Yaroslav Grom Date: Wed, 18 Feb 2026 18:46:10 +0100 Subject: [PATCH 3/3] solution --- src/App.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 535c2fa14..df4ee933e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,10 @@ -import React from 'react'; -import './App.css'; +import React from "react"; +import "./App.css"; // Move each BEM block to a separate component (file) and import them here -import Article from './components/Article/Article'; -import Header from './components/Header/Header'; -import Welcome from './components/Welcome/Welcome'; +import Article from "./components/Article/Article"; +import Header from "./components/Header/Header"; +import Welcome from "./components/Welcome/Welcome"; function App() { return (