gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add hints to three front-end-libraries certification projects (#18938)

Browse Source 
* Add hints to the front-end-libraries certification projects

- Add hints to the front-end-libraries - build a markdown-previewer project
- Add hints to the front-end-libraries - build a drum machine
- Add hints to the front-end-libraries - build a pomodoro clock

* Update index.md
This commit is contained in:
Michal Wagner
2018-10-15 03:56:26 +02:00
committed by Randell Dawson
parent 757b50c521
commit fcec866b99
3 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/guide/english/certifications/front-end-libraries/front-end-libraries-projects/build-a-drum-machine/index.md
View File

@ -3,8 +3,7 @@ title: Build a Drum Machine
---
## Build a Drum Machine
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/front-end-libraries-projects/build-a-drum-machine/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The project consists of three distinct parts:
1. Identifying the components needed to complete the task, what components are there? Can some components be used more than once? E.g. the buttons, are they the same only with different onClick events and ids?
2. What component should be responsible for keeping state, and how should changes in state be passed on to other components?
3. Knowing that the corresponding audio element should be in your clickable area/button which means that the audio element is a child of the corresponding button.

13
client/src/guide/english/certifications/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer/index.md
View File

@ -3,8 +3,11 @@ title: Build a Markdown Previewer
---
## Build a Markdown Previewer
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
1. Add an onChangeListener on the textarea
2. On every onChange event save the textarea's value into the state
3. Create the preview div, pass the textarea's value into the marked library and set the preview's html to the corresponding returned marked html output. With React you can do it using the dangerouslySetInnerHTML attribute:
```
dangerouslySetInnerHTML={{
__html: ...
}}
```

10
client/src/guide/english/certifications/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock/index.md
View File

@ -3,8 +3,8 @@ title: Build a Pomodoro Clock
---
## Build a Pomodoro Clock
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The project consists of three distinct parts:
1. Identifying the components needed to complete the task, what components are there? Can some components be used more than once? E.g. the buttons, are they the same only with different onClick events and ids?
2. What component should be responsible for keeping state, and how should changes in state be passed on to other components?
3. It's recommended to set all your time values in your state in seconds for better calculating and only converting them into minutes when displaying them on the screen.
For converting the seconds into minutes first you could use the Math.floor() function to get the minutes without the seconds e.g. 150s / 60 = 2 minutes and then use the modulo(%) operator to get the remaining seconds e.g. 150s % 60 = 30s. Now you can combine them together to get the time in minutes with seconds => 150s is 2:30 minutes