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

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/announce-new-users.md
View File

@@ -5,13 +5,11 @@ challengeType: 2
forumTopicId: 301546
---
## Description
<section id='description'>
# --description--
Many chat rooms are able to announce when a user connects or disconnects and then display that to all of the connected users in the chat. Seeing as though you already are emitting an event on connect and disconnect, you will just have to modify this event to support such a feature. The most logical way of doing so is sending 3 pieces of data with the event: the name of the user who connected/disconnected, the current user count, and if that name connected or disconnected.
Change the event name to <code>'user'</code>, and pass an object along containing the fields 'name', 'currentUsers', and 'connected' (to be <code>true</code> in case of connection, or <code>false</code> for disconnection of the user sent). Be sure to change both 'user count' events and set the disconnect one to send <code>false</code> for the field 'connected' instead of <code>true</code> like the event emitted on connect.
Change the event name to `'user'`, and pass an object along containing the fields 'name', 'currentUsers', and 'connected' (to be `true` in case of connection, or `false` for disconnection of the user sent). Be sure to change both 'user count' events and set the disconnect one to send `false` for the field 'connected' instead of `true` like the event emitted on connect.
```js
io.emit('user', {
@@ -21,7 +19,7 @@ io.emit('user', {
});
```
Now your client will have all the necessary information to correctly display the current user count and announce when a user connects or disconnects! To handle this event on the client side we should listen for <code>'user'</code>, then update the current user count by using jQuery to change the text of <code>#num-users</code> to <code>'{NUMBER} users online'</code>, as well as append a <code>&#60;li&#62;</code> to the unordered list with id <code>messages</code> with <code>'{NAME} has {joined/left} the chat.'</code>.
Now your client will have all the necessary information to correctly display the current user count and announce when a user connects or disconnects! To handle this event on the client side we should listen for `'user'`, then update the current user count by using jQuery to change the text of `#num-users` to `'{NUMBER} users online'`, as well as append a `<li>` to the unordered list with id `messages` with `'{NAME} has {joined/left} the chat.'`.
An implementation of this could look like the following:
@@ -35,39 +33,54 @@ socket.on('user', data => {
});
```
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point <a href='https://gist.github.com/camperbot/bf95a0f74b756cf0771cd62c087b8286' target='_blank'>here</a>.
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/bf95a0f74b756cf0771cd62c087b8286).
</section>
# --hints--
## Instructions
Event `'user'` should be emitted with name, currentUsers, and connected.
<section id='instructions'>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: Event <code>'user'</code> should be emitted with name, currentUsers, and connected.
testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js').then(data => { assert.match(data, /io.emit.*('|")user\1.*name.*currentUsers.*connected/gis, 'You should have an event emitted named user sending name, currentUsers, and connected'); }, xhr => { throw new Error(xhr.statusText); })
- text: Client should properly handle and display the new data from event <code>'user'</code>.
testString: getUserInput => $.get(getUserInput('url')+ '/public/client.js') .then(data => { assert.match(data, /socket.on.*('|")user\1[^]*num-users/gi, 'You should change the text of "#num-users" within on your client within the "user" event listener to show the current users connected'); assert.match(data, /socket.on.*('|")user\1[^]*messages.*li/gi, 'You should append a list item to "#messages" on your client within the "user" event listener to announce a user came or went'); }, xhr => { throw new Error(xhr.statusText); })
```js
(getUserInput) =>
$.get(getUserInput('url') + '/_api/server.js').then(
(data) => {
assert.match(
data,
/io.emit.*('|")user\1.*name.*currentUsers.*connected/gis,
'You should have an event emitted named user sending name, currentUsers, and connected'
);
},
(xhr) => {
throw new Error(xhr.statusText);
}
);
```
</section>
Client should properly handle and display the new data from event `'user'`.
## Challenge Seed
```js
(getUserInput) =>
$.get(getUserInput('url') + '/public/client.js').then(
(data) => {
assert.match(
data,
/socket.on.*('|")user\1[^]*num-users/gi,
'You should change the text of "#num-users" within on your client within the "user" event listener to show the current users connected'
);
assert.match(
data,
/socket.on.*('|")user\1[^]*messages.*li/gi,
'You should append a list item to "#messages" on your client within the "user" event listener to announce a user came or went'
);
},
(xhr) => {
throw new Error(xhr.statusText);
}
);
```
<section id='challengeSeed'>
# --seed--
</section>
## Solution
<section id='solution'>
# --solutions--
```js
/**
@@ -76,5 +89,3 @@ tests:
Please check our contributing guidelines to learn more.
*/
```
</section>