-
Notifications
You must be signed in to change notification settings - Fork 4k
add task solution #4331
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.
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
Open
vpovierienov
wants to merge
3
commits into
mate-academy:master
Choose a base branch
from
vpovierienov:develop
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
add task solution #4331
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1 @@ | ||
| # React Decompose | ||
|
|
||
| Split the `App.js` into components based on CSS blocks. CSS code should be split too. | ||
| - You already have `Article`, `Header` and `Welcome` folders inside `./src/components/` with required files. | ||
| - You may also create a folder for the `Navigation` component and move navigation there. | ||
| - Tests expect you to use `export default` for all the components. | ||
|
|
||
| ## Instructions | ||
| - 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 `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_decompose/) and add it to the PR description | ||
| [DEMO LINK](https://<vpovierienov>.github.io/react_decompose/) |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,30 @@ | ||
| /* 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; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,64 @@ | ||
| // import a css file containig article styles | ||
|
|
||
| import './Article.css'; | ||
| // Create an Article function returning the HTML of article block | ||
| const Article = () => ( | ||
| <article className="article"> | ||
| <h1 className="article__title">Headline</h1> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| </article> | ||
| ); | ||
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| export default Article; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,27 @@ | ||
| /* 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; | ||
| } | ||
|
|
||
| @media (min-width: 500px) { | ||
| .header { | ||
| text-align: left; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,15 @@ | ||
| // import a css file containig header styles | ||
| import React from 'react'; | ||
|
|
||
| // Create a Header function returning the HTML of header block | ||
| import './Header.css'; | ||
| import Navigation from '../Navigation/Navigation'; | ||
|
|
||
| // Add a default export statement for Header component to use it in the other files | ||
| function Header() { | ||
| return ( | ||
| <header className="header"> | ||
| <h1 className="header__title">Site Name</h1> | ||
| <Navigation /> | ||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| export default Header; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .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; | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This violates checklist item #2: '[PROJECT STRUCTURE] - create separate folder per component...'.
The
Navigationcomponent is a distinct component and should have its own folder. Please create asrc/components/Navigation/directory and moveNavigation.jsxandNavigation.cssinto it. You'll also need to update the import path inHeader.jsxaccordingly.