Question:
"Nest one div element with the class well within each of your col-xs-6 div elements." ], "tests": [  "assert($("div").length > 4, 'Add two div elements inside your div class="well"> element both with the class col-xs-6')",   "assert($("div").length > 4, 'Add a div element with the class well inside each of your div class="col-xs-6"> elements')",  "assert($("div.col-xs-6").children("div.well").length > 1, 'Nest both of your div class="col-xs-6" elements within your div class="row" element.')", "assert(editor.match(/
/g) && editor.match(/<div/g) && editor.match(/
/g).length === editor.match(/<div/g).length, 'Make sure all your div elements have closing tags.')" ],

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. There seems to be a conflict between the last paragraph above the "Go to Next Challenge" button, and the first test-item below the "Reset/Help/Bug" buttons (see screenshot, below). It is not clear if the <div class="well"'s should go inside the <div class="col-xs-6"'s, or vice versa. If I were to follow ALL the directions to the letter, I'd have two <div class="col-xs-6"'s nested inside each of two <div class="well"'s, each of which is inside an outer <div class="col-xs-6". I think this is just a text-editing problem, because my code passes when I did what I expected the waypoint to be looking for: an empty <div class="well"inside each of the previously-placed <div class="col-xs-6"'s; this is included in the screenshot, as well. Also, I am fairly the text is missing a "<", where I've sloppily drawn it in on my screenshot. !
I ran into this also. The challenge validates when you follow the instructions in the explanatory text. It does not validate when you only follow the instructions in the checkpoints.


Question: # --description-- <del> Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. </del> <ins> Turn the words `cat photos` located inside `p` element into a link using the same value for the `href` attribute as the link below the `p` element. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. Make sure to remove the `a` element with the text `cat photos` on the line below the `p` element. </ins> # --hints--

In step 12 of the Learn HTML by Building a Cat Photo App, the following two line numbers 7 & 8 exist at the start of the step: The instructions tell the user to make the text that appears inside the sentence of the element a link. The instructions do not explicitly state to remove the existing anchor element that is below the element. Instead, it just has a last sentence that says . Step 13 starts off only showing the following for line 7: The original link that appeared in step 12 is gone. In my opinion, an easy solution is to just change the last sentence in step 12 to: OR n/a n/a No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I think this instruction above is enough to tell what the end result should be
But it doesn't appear to be as this particular step comes up a lot in the forums. I agree with we need to make this a little clearer. If the intent is for the user to remove the existing link below the then I think we should tell them exactly that. Here's my attempt at making the instructions clearer: the words in the element into a link using the same value for the attribute as the link below the element. the link below the element. I thought turning this into two steps might make it a little clearer, but it can easily be two sentences instead. I'm not sure what the purpose of this step is, so my instructions may be unwittingly stepping on the goal here.
I think a better word is than in but that's nitpicking. I do fully agree changing the hint. Edit:
We're also teaching vocabulary here. I would use slightly more consistent language with the previous steps:


Question: } function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> while (numbers.length < 10) { numbers.push(Math.floor(Math.random() * 11)); }

No need to use here since the array is not re-assigned in later steps. We used for other arrays in this project that aren't reassigned. No response All No response
Hello, I fixed this by doing the following: 1) went to 2) found the ID of step-162 () 3) went to the repositories code and searched for the markdown file through ID. 4) the markdown file 5) Updated the markdown file to use 'const' instead of 'let' ! After this commit is approved, this should be able to be closed.
All of the seed code for subsequent challenges would also be changed.
I am not sure what you mean by this. Is there anything I can do to learn this? Are you referring to all references of 'let' initialization to be changed to 'const' in future steps?
Not quite - the answer to this step becomes part of the starting code for all future steps. If we change the instructions to use here, then then starting code on all future steps needs to be swapped to reflect that.
Hi, I raised a PR to fix this


Question: .find('.map-title') .find('h4') .text() <del> ).toBe('Super Block One Certification (300 hours)'); </del> <ins> ).toBe('Super Block One Certification (300xa0hours)'); </ins> expect(enzymeWrapper.find('ul').length).toBe(0); enzymeWrapper.find('.map-title').simulate('click');

Currently the map looks like this: ! I think it would look a lot better if we made more use of the available space. Something like this: !
I can fix the css in a separate PR, if you like. Unless you're already handling it, of course.
I think it is handled now in the PR already. I moved things into the Grid system
That PR still has the heavy indentation: !
You are correct, if you have something going please go ahead and push to the PR. I am done with the basic consolidation of the views that I was going for.


Question: 'cert-map-estimates': { certs: 'Certification (300u00A0hours)', 'coding-prep': '(Thousands of hours of challenges)' <ins> }, 'editor-tabs': { info: 'Info', code: 'Code', tests: 'Tests', preview: 'Preview' </ins> } }, donate: {

Describe the bug When you enter a challenge using a mobile device, the tabs below the main header are displayed with untranslated text To Reproduce Steps to reproduce the behavior (mobile device): to untranslated tabs below the main header Expected behavior Tabs text should be translated. Screenshots Spanish site ! Chinese site ! Desktop (please complete the following information): OS: [Windows 10] Browser: [chrome] Version: [88] Additional context Those strings are not available yet on the Crowdin platform.


Question: Use the addition operator to concatenate a blank space `" "` to the beginning and end of your repeated `character` string. <ins> Remember that you can use the `+` operator to concatenate strings like this: ```js " " + "string" ``` </ins> # --hints-- You should concatenate an empty space to the beginning of your returned value.

It looks like a lot of people on the forums and discords are confused on the syntax for this step. we could add an updated description with code example to guide campers. js " " + "string" ` see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the Happy coding
Step 63 You should now see the same bunch of characters in your console. Your padRow function is doing the exact same thing you were doing earlier, but now it's in a reusable section of its own. Use the addition operator to concatenate a blank space " " to the beginning and end of your repeated character string. Remember that you can use the + operator to concatenate strings like this: " " + "string" This is what i got and it was accepted function padRow(rowNumber, rowCount) { return " " + (rowNumber) + " " }


Question: # --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/bgpXyK.   **Objective:** Build an app that is functionally similar to this: https://scatterplot-graph.freecodecamp.rocks.  Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.

All the data viz projects were created on our .rocks domain. We just need to replace the codepen URL's with the new addresses in the curriculum files of those five projects. Here's the URL's: https://bar- https://scatterplot- https://heat- https://choropleth- https://treemap- And the
Hey Just to make sure you want this replaced with https://bar- ?
I want to contribute to this project. Please assign me this task.
thank you for your interested in contributing, but this issue is not open for contributions, please look at issues with labels or


Question:
); renderIsHonestAgreed = () => (  <Panel bsStyle='info' className='agreed btn'>   <Button block={true} bsStyle='primary' className='disabled-agreed' disabled={true} >
You have accepted our Academic Honesty Policy.
  </Panel>   </Button>  ); render() {

Describe the bug When we accept the academic honesty policy and hover over the text, it feels like a button. The cursor should be auto. To Reproduce Steps to reproduce the behavior: to the settings page sure you have accepted academic honesty policy over "you have accepted academic honesty" button Desktop (please complete the following information): OS: Windows 10 Pro 32 Bit Pro Browser: Chrome Version: 77.0.3865.90
, we can make this button disabled, no? I tried it and it seems good, as it is a button but doesn't have to be clicked again..
Please feel free to make a PR.. Here are the lines that you probably need to touch: [ ] The panel can be a button and disabled. [ ] We would need some tests for these as well. Thanks.
Please follow our
Sure, I'll do it as soon as I can, after work.
I went ahead and created a PR for this, along with unit test. Hope it's fine.


Question: <ins> /** * Adapted from: * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/chriskempson/tomorrow-theme * @author Rose Pritchard */ .night code[class*='language-'], .night pre[class*='language-'] { color: #ccc; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; text-shadow: none; } .night pre[class*='language-'] code[class*='language-'] { color: #d4d4d4; } /* Code blocks */ .night pre[class*='language-'] { padding: 1em; margin: 0.5em 0; overflow: auto; } .night :not(pre) > code[class*='language-'], .night pre[class*='language-'] { background: #242424; } /* Inline code */ .night :not(pre) > code[class*='language-'] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } .night .token.comment, .night .token.block-comment, .night .token.prolog, .night .token.doctype, .night .token.cdata { color: #608b4e; } .night .token.punctuation { color: #ffff00; } .night .token.tag, .night .token.attr-name, .night .token.namespace, .night .token.deleted { color: #e2777a; } .night .token.function-name { color: #d4d4d4; } .night .token.boolean, .night .token.number, .night .token.function { color: #569cd6; } .night .token.property, .night .token.class-name, .night .token.constant, .night .token.symbol { color: #f8c555; } .night .token.selector, .night .token.important, .night .token.atrule, .night .token.keyword, .night .token.builtin { color: #569cd6; } .night .token.string, .night .token.char, .night .token.attr-value, .night .token.regex, .night .token.variable { color: #7ec699; } .night .token.operator, .night .token.entity, .night .token.url { color: #67cdcc; background: none; } .night .token.important, .night .token.bold { font-weight: bold; } .night .token.italic { font-style: italic; } .night .token.entity { cursor: help; } .night .token.inserted { color: green; } </ins>

Related to . Once that's done, the code blocks will be written in blocks of  into ! while the same code on the guide looks like ! I think this change would make the code blocks easier to read, make the guide and challenges feel more like parts of a unified whole and fit better with the code editor aesthetic discussed in the . I'd be happy to work on this, if this is useful feature What do you think?
You should look into for this sort of thing. Goodluck. this is something we would probably be needing and using across Guide and Learn. So, I'll let you chime in and guide on this.


Question: }; const mapStateToProps = createSelector( <ins> isDonationModalOpenSelector, </ins> userSelector, <del> ({ theme = 'night' }) => ({ theme }) </del> <ins> (open, { theme = 'night' }) => ({ canFocus: !open, theme }) </ins> ); const mapDispatchToProps = dispatch =>

Describe the bug When you go to a challenge and the donation modal appears a stack overflow error occurs To Reproduce Steps to reproduce the behavior: Chrome go to on the dev console error Screenshots ! Desktop (please complete the following information): OS: Ubuntu Browser Chrome Version 76.0.3809.100 (Official Build) (64-bit) Additional context Removing removes it, so presumably it's a clash between that and the modal.
You are correct, I think there could be a race condition between the two.


Question: .find('.map-title') .find('h4') .text() <del> ).toBe('Super Block One Certification (300 hours)'); </del> <ins> ).toBe('Super Block One Certification (300xa0hours)'); </ins> expect(enzymeWrapper.find('ul').length).toBe(1); });


Question: editorDidMount = (editor, monaco) => { this._editor = editor; <del> this._editor.focus(); </del> <ins> if (this.props.canFocus) this._editor.focus(); </ins> this._editor.addAction({ id: 'execute-challenge', label: 'Run tests',


Question: Your `<title>` element should be nested in your `<head>` element. ```js <del> assert(code.match(/<head>s*<title>.*</title>s*</head>/i)); </del> <ins> assert(code.match(/<head>s*<title>.*</title>s*</head>/si)); </ins> ``` Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling. ```js <del> assert(code.match(/<title>camperscafesmenu</title>/i)); </del> <ins> assert.match(document.querySelector('title')?.innerText, /camper cafe menu/i); </ins> ``` # --seed--

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --<!-- Add a link to the coding challenge with the problem. -- <!-- Copy and paste the code from the editor that you used in between the back-ticks below: --<!-- Add a clear and concise description of what you expected to happen. --Tests should fail because the text is incorrect (it should not be surrounded by spaces or newlines). You see the hint: Also, it's quite easy to fail this challenge by having spaces or newlines around the "Camper Cafe Menu" string. It might be nice to have an additional test specifically to catch that.
The title element isn't stripped away, so I think we could query the DOM and look at the .


Question: When a method returns a value, you can think of it as giving the value back to you, making it available for use in other parts of your code. <del> Declare a `popped` variable, and assign it the result of `rows.pop()`. Then, log your `popped` variable. </del> <ins> Create a new variable called `popped` and assign it the result of `rows.pop()`. Then, log `popped` to the console. </ins> # --hints-- <del> You should declare a `popped` variable. </del> <ins> You should declare a variable called `popped`. </ins> ```js assert.match(code, /popped/); ``` <del> You should use `let` to declare your `popped` variable. </del> <ins> You should use `let` to declare your variable called `popped`. </ins> ```js assert.match(code, /lets+popped/);

We have had a few campers create the wrong variable name for step 22 of pyramid project. Here is an example A few campers are wanting to call it instead of . I think a change in directions will fix this. Here is the updated description here are the updates to the first two hints js (code, /popped/); js (code, /lets+popped/); see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the Happy coding


Question: ```js const splitter = code.split("if (this.position.x < this.width) {") <ins> assert.match(splitter[1], /this.heights*=s*proportionalSize(s*d+s*)s*;?/); ``` You should assign `proportionalSize(40)` to the `height` property. ```js const splitter = code.split("if (this.position.x < this.width) {") </ins> assert.match(splitter[1], /this.heights*=s*proportionalSize(s*40s*)s*;?/); ```

step 68 of the platformer project doesn't provide a useful hint when the solution contains this line: Note the value given to the function is 400 not 40 as requested. The hint when you write this code says: We can probably give a more useful hint if the height property has been defined but with an incorrect value? for eg we could say: You should assign the height property . step should detect that has been defined and give a better hint when the value is incorrect. No response N/A No response


Question: if (element.type === FourOhFourPage) { return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>; } <del> if (/^/certification(/.*)*/.test(pathname)) { </del> <ins> if (//certification//.test(pathname)) { </ins> return ( <CertificationLayout pathname={pathname}>{element}</CertificationLayout> ); } <del> if (/^/guide(/.*)*/.test(pathname)) { </del> <ins> if (//guide//.test(pathname)) { </ins> console.log('Hitting guide for some reason. Need a redirect.'); } const splitPath = pathname.split('/'); <del> const splitPathThree = splitPath.length > 2 ? splitPath[3] : ''; </del> <ins> const isSuperBlock = (splitPath.length === 3 && splitPath[1]) || (splitPath.length === 4 && splitPath[2]); </ins> <del> const isNotSuperBlockIntro = splitPath.length > 3 && splitPathThree.length > 1; if (/^/learn(/.*)*/.test(pathname) && isNotSuperBlockIntro) { </del> <ins> if (//learn//.test(pathname) && !isSuperBlock) { </ins> return ( <DefaultLayout pathname={pathname} showFooter={false}> {element}

Reference URL: on espanol ! Night mode active: !
To expand: Donation component also breaks on night mode: !
<img width="1440" alt="Screen Shot 2021-02-08 at 11 02 37 PM" src="https://user-"


Question: export function transformEditorLink(url) { return url .replace( <del> /(?<=//)(?<projectname>[^.]+).(?<username>[^.]+).repl.co/?/, 'replit.com/@$<username>/$<projectname>' </del> <ins> /(//)(?<projectname>[^.]+).(?<username>[^.]+).repl.co/?/, '//replit.com/@$<username>/$<projectname>' </ins> ) .replace( <del> /(?<=//)(?<projectname>[^.]+).glitch.me/?/, 'glitch.com/edit/#!/$<projectname>' </del> <ins> /(//)(?<projectname>[^.]+).glitch.me/?/, '//glitch.com/edit/#!/$<projectname>' </ins> ); }

Describe the bug A clear and concise description of what the bug is. When navigating to the home page, the Menu and Sign In buttons in the top right corner are missing. Can not sign in to profile. To Reproduce Steps to reproduce the behavior: to '' to locate Menu & Sign In error: Missing Menu and Sign In buttons on top navbar. Expected behavior A clear and concise description of what you expected to happen. Expected to be able to sign in and continue coursework or see profile. Screenshots If applicable, add screenshots to help explain your problem. ! Desktop (please complete the following information): OS: macOS Big Sur v =11.2.3 Browser:Safari v14.0.3 Additional context I haven't actually helped on any open source project yet. I'm pretty new, but in my senior year of CS degree. I would love to work on this issue.
could you check this out on Safari? First off, thanks for letting us know about the problem! And, yes, you're very welcome to work on this issue. If you haven't already taken a look, it's worth reading our to contributing to freeCodeCamp.
I get a loader on /learn's navigation and the page itself. it seems like near 8% of users are affected. How long have you been experiencing this issue? should we have a script that detect the browser and shows a flash accordingly? "For a better experience ... <img width="1438" alt="Screen Shot 2021-04-22 at 11 03 40 AM" src="https://user-"
Sure, what did you have in mind?
Adding in a small detail, the same issue(menu button missing and learn infinite loading) is on iOS devices also and in any browser on the phone.
Hey all, this is likely my fault with: I used a lookbehind in the regex, which I believe Safari does not support: !
You can open a PR and see if it fixes it.


Question: assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'eye is a palindrome'); ``` <del> When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. </del> <ins> When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. </ins> ```js const inputEl = document.getElementById('text-input');

Point 7. of instruction says: There is missing underscore near eye in the result text. The correct solution for this test is text: eye is a palindrome (with underscore) Instruction text at Point 7. changed to: ! Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
The result looks correct to me because the instructions have this note in the beginning If we remove all special characters from then we would be left with
Look at the instructions for tests 16 and 17. The string includes all of the non-alphanumeric characters. But for test 7 the underscore is left out of the string.
I see it now. I misread that as returning the string without non-alphanumeric characters. In addition to updating the test description the hint text will also need to be updated This is has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the User story 7 will need to be updated and the hint text here will need to be updated


Question: # --description-- <del> Use `const` and arrow syntax to define a function called `setPlayButtonAccessibleText`. </del> <ins> To make the application more accessible, it is important that the play button describes the current song or the first song in the playlist. </ins> <del> This function will set the `aria-label` attribute to the current song, or to the first song in the playlist. And if the playlist is empty, it sets the `aria-label` to `"Play"`. </del> <ins> Start by creating an empty arrow function called `setPlayButtonAccessibleText`. </ins> # --hints--

I would suggest removing the second paragraph for step 66 (as a quite novice coder I guess the wording caught me up and I thought the challenge would lean on the side of more difficult rather than easy). I re-read it quite a few times but didn't realize that it was just explaining a later step. It took me a bit of time until I realized that only the first paragraph was needed to solve the solution. I just have an issue with the wording. Nothing else. Sorry if I did something wrong. This is my first time submitting an issue request No response Device: Desktop OS: Windows Browser: Chrome Version: 10 Just had issues with the wording and was recommending it being changed. Sorry if I did something wrong. This is my first github issue request
It looks like the original intent was to describe what the function was going to be about. I think removing it all together would leave the step in a place where campers are just asked to create a new function with no clue as to why or what it does. It would be better to provide some explanation on what they will be doing in the next few steps. A rewording would be better. Something like could work I'll open it up for discussion by the other maintainers to hear thoughts on wording. You didn't do anything wrong. It is a good issue
I am going to go ahead and open this up for contribution


Question: // all auth routes. fastify.addHook('onRequest', fastify.redirectIfSignedIn); <del> fastify.get('/mobile-login', async req => { </del> <ins> fastify.get('/mobile-login', async (req, reply) => { </ins> const email = await getEmailFromAuth0(req); <del> await findOrCreateUser(fastify, email); </del> <ins> if (!email) { return reply.status(401).send({ message: 'We could not log you in, please try again in a moment.', type: 'danger' }); } if (!isEmail(email)) { return reply.status(400).send({ message: 'The email is incorrectly formatted', type: 'danger' }); } const { id } = await findOrCreateUser(fastify, email); reply.setAccessTokenCookie(createAccessToken(id)); </ins> }); done();

This endpoint needs to use jwtaccesstoken in the same way that web login does.


Question: .table > tfoot > tr > td { border: none; } <ins> .modal { overflow-y: auto; } </ins>

Hello. I noticed that the modals containing the user solution of the resolved corresponding certification challenge are not vertically scrollable when they should be so. A .modal{overflow:auto} css rule should be in the main stylesheet file of freecodecamp or the user-settings-section's one (if there is any), so modals become scrollable when they are full of text that they stretch beyond the viewport. here is a screenshot of the issue: !


Question: // eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks in parallel and use 3 workers', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 3 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 3 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');

Describe the bug Sass pages with invalid syntax occasionally timeout To Reproduce Steps to reproduce the behavior: to in in the console (sometimes) Expected behavior The following should appear in the console: Since this is intermittent, here's a gif to demonstrate: ! Additional Context When the error appears it does so very quickly, so it is unlikely that this is due to a genuine timeout.
Hey Oliver, When I clicked on the link, I reset the code, and completed the challenge as it should be completed. I came across a error, and was unable to run the tests. However, after resetting the code, refreshing the page, and pasting in the code you provided (missing ), the error you mention appeared, but does not disappear. So, I suspect it has to do with the page first load, because I can get the error only if I: 1) reset the code 2) Duplicate the tab 3) Input the incorrect code (missing ) !
I tried method but that didn't produce the bug. I am able to reliably reproduce the bug on Chromium & Firefox with the following steps: the page (new tab & refresh can both produce bug). delete & re-add the character from line 9, fast enough that the new state does not display in the console. step 2 on deleting the . If done correctly the message will display instead of an error, even though the console input is incorrect. approximately 3-5 seconds for the timeout message to appear. Note: it can also be reproduced where by in step 2 you end on re-adding the but it's harder to tell if the bug has happened. It must have something to do with the console state change and the output error check conflicting.
I worked on this issue on my old computer that is very slow and on my main PC (with a dual boot). On my old computer I have the same result as regurlaly timeouts. On the new one to have this issue I have to paste 3 times the piece of code to reproduce it. But everytimes, this is a real timeout (5ms, I put 'new Date()' on the code).


Question: // eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks in parallel and use 3 workers', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 3 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 3 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');

We can upgrade the source code one "execute-challenge-" with this kind of stuff to have a best message, but still the problem : <prelet errMsg = 'error'; if (err === 'timeout') { // eslint-disable-next-line no-ex-assign errMsg = ; } else if (Array.isArray(err) && err.length0 && err[0] === 'timeout') { // timeout: 5ms errMsg = ; } else { errMsg = err; } (errMsg); yield put(updateConsole(escape(errMsg))); </preso the result will be "Server response timeout"
While this is old, it's still reproducible, unfortunately. A PR to improve the warning would be welcome.
I’m currently taking a look into a possible solution on this!


Question: Here you'll build a cash register app that will return change to the customer based on the price of the item, the amount of cash provided by the customer, and the amount of cash in the cash drawer. You'll also need to show different messages to the user in different scenarios, such as when the customer provides too little cash or when the cash drawer doesn't have enough to issue the correct change. <del> There are a few variables you'll need to use in your code: </del> <ins> In the `script.js` file, you have been provided with the `price` and `cid` variables. The `price` variable is the price of the item, and the `cid` variable is the cash-in-drawer, which is a 2D array listing the available currency in the cash drawer. </ins> <del> - `price`: the price of the item as a floating point number. - `cash`: the amount of cash provided by the customer for the item, which is provided via an `input` element on the page. - `cid`: cash-in-drawer, a 2D array listing available currency in the cash drawer. </del> <ins> The other variable you will need add is the `cash` variable, which is the amount of cash provided by the customer for the item, which is provided via an `input` element on the page. </ins> If you'd like to test your application with different values for `price` and `cid`, make sure to declare them with the `let` keyword so they can be reassigned by our tests.

Stray code is populated in the boilerplate for the Cash Register project User should have blank project to start No response All No response
I believe this was actually intentional as to show campers the correct data structure for the cid array. thoughts?
Hmm, its in there without an explanatory comment and has confused at least one user.
It looks like the boilerplate code is possibly referenced here but being more explicit would be better. we could rework this section here price: the price of the item as a floating point number. cash: the amount of cash provided by the customer for the item, which is provided via an input element on the page. cid: cash-in-drawer, a 2D array listing available currency in the cash drawer.
I think the proposed version looks good.


Question:
<Fragment> <FullWidthRow>
  {username} has not made their profile public.   {username} has not made their portfolio public.
 </FullWidthRow> <FullWidthRow>
 {username} needs to change their privacy setting in order for you to  view their profile.   view their portfolio.
 </FullWidthRow> <Spacer />

<img width="1074" alt="Profile_freeCodeCamp_org" src="https://user-"
can I take this issue?
Thank you and for your interest. This issue might need a little more investigation before arriving at the final solution. I encourage you to find similar issues to tackle in the meantime. should I only audit the copy to replace profile with portfolio or you would rather changing the profile instances in the client and the api-server entirely?
I would like to get it assigned..
this should come as a cosmetic change to the copy only, do not change any endpoints or code (functions, objects, files) etc. It can be done to both API and the client where copy edit is needed.


Question:
<Fragment> <FullWidthRow>
  {username} has not made their profile public.   {username} has not made their portfolio public.
 </FullWidthRow> <FullWidthRow>
 {username} needs to change their privacy setting in order for you to  view their profile.   view their portfolio.
 </FullWidthRow> <Spacer />

<img width="927" alt="Settings_freeCodeCamp_org" src="https://user-"


Question: #challenge-page-tabs .nav-tabs > li > a { padding: 5px 10px; <ins> text-decoration: none; font-size: 0.8em; </ins> } #challenge-page-tabs .tab-content {

This wasn't always the case, but right now the formatting for smaller screens isn't great: ! Smaller screens used to have tabs letting you switch between the instructions, editor and so on. You can see them briefly (in the gif) at medium screen sizes, but not for mobile. If we still want to support this, I can look into restoring it.
Looks like they're just hidden behind the search bar.
Thanks for reporting this, we are still figuring out the final state for the nav. Once that is settled, this issue will be resolved automatically.
This wasn't entirely resolved by , as the challenge tabs are still displaying incorrectly: !


Question: var test = new LinkedList(); test.add('cat'); test.add('dog'); <del> return test.head().next.element === 'dog'; </del> <ins> test.add('fish'); return test.head().next.element === 'dog' && test.head().next.next.element === 'fish'; </ins> })() ); ```

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. -- <!-- Add a link to the coding challenge with the problem. --<!-- Copy and paste the code from the editor that you used in between the back-ticks below: --Code from the : <!-- Add a clear and concise description of what you expected to happen. --If the while loop is removed from the , the following should fail (if 3 or more items ), but it does not: <!-- Please complete the following information. --- Device: Laptop OS: Windows 10 Browser: Chrome Version: 96 <!-- Add any other context about the problem here. --The is only testing with 2 items to a linked list. The test should fail if a third item is and the while loop is removed from the because the third item would would be to the linked list, but it would orphan the second item. My suggestion for an improved test:
Can I take this one?


Question: } .form-control { <del> color: var(--theme-color); </del> <ins> color: var(--primary-color); </ins> outline: none; border-color: var(--quaternary-background); <ins> background-color: var(--primary-background); </ins> -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;

Describe the bug Functionally, there is no problem with distinguishing between normal and focus state because there is blinking cursor when on focus state. Filled fields will also be selected and highlighted with blue color when navigating with keyboard tab. Aesthetically, there is suggestion from on issue to invert the input boxes with dark background and light text in night mode. Border color change between normal and focus state also need some visual improvements because currently it is hard to see. To Reproduce Steps to reproduce the behavior: to http://localhost:8000/settings to switch between normal and focus state on input boxes with mouse click or keyboard tab to Describe the bug Expected behavior Refer to suggestion in Describe the bug Desktop (please complete the following information): OS: Windows 10 1809 Build .832 Browser Latest Chrome Version 77.0.3865.120 (Official Build) (64-bit)
i'll take this one


Question: openHelpModal={props.openHelpModal} openResetModal={props.openResetModal} tryToExecuteChallenge={tryToExecuteChallenge} <del> hint={firstFailedTest?.text} </del> <ins> hint={firstFailedTest?.message} </ins> testsLength={props.tests.length} attempts={attemptsRef.current} challengeIsCompleted={challengeIsComplete()}

and are not being replaced by their values in hints: ! While in the console the actual and expected values are visible: ! To reproduce, go to any challenge that uses and/or :
Happening for me in hints for step 76:
Thank you for mentioning, but the fix has not been deployed yet.


Question:
 // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = `
 <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)>
 <Button active={false} block={true} bsClass="btn" bsStyle="primary" disabled={false} onClick={[Function]} > Agree </Button> </FullWidthRow>
 `; exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = `
 <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)>
 <Button active={false} block={true} bsClass="btn" bsStyle="primary" className="disabled-agreed" disabled={true} >
 You have accepted our Academic Honesty Policy.
 </Button> </FullWidthRow>
 `;

Describe the bug When we accept the academic honesty policy and hover over the text, it feels like a button. The cursor should be auto. To Reproduce Steps to reproduce the behavior: to the settings page sure you have accepted academic honesty policy over "you have accepted academic honesty" button Desktop (please complete the following information): OS: Windows 10 Pro 32 Bit Pro Browser: Chrome Version: 77.0.3865.90
, we can make this button disabled, no? I tried it and it seems good, as it is a button but doesn't have to be clicked again..
Please feel free to make a PR.. Here are the lines that you probably need to touch: [ ] The panel can be a button and disabled. [ ] We would need some tests for these as well. Thanks.
Please follow our
Sure, I'll do it as soon as I can, after work.
I went ahead and created a PR for this, along with unit test. Hope it's fine.


Question: This will open the user management tools, you will be able to see the list of all the users. <del> Search for the user that will become contributor. Use the three dots menu on the user row to open a menu and select "Add to team". The proofreader teams have a standard name of `Proof Readers (<language>)`, you can search the team using the language name. Once you have selected the team, use the "ADD" button at the bottom of the page to finalize the thing. </del> <ins> Search for the user that will become proofreader. Use the three dots menu on the user row to open a menu and select "Add to team". The proofreader teams have a standard name of `Proof Readers (<language>)`, you can search the team using the language name. Once you have selected the team, use the "ADD" button at the bottom of the page to finalize the thing. </ins> The user is now a proofreader.

in the document, there is a sentence saying this: But this section is talking about assigning proofreading, it should be changed to this: here is the file here is the original issue If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this.
I can take this up


Question: id='challenge-page-tabs' onSelect={moveToTab} > <del> <TabPane eventKey={1} title='Instructions'> </del> <ins> <TabPane eventKey={1} title='Info'> </ins> {instructions} </TabPane> <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>


Question: Which starting number, under the given `limit`, produces the longest chain? <del> **Note:** Once the chain starts the terms are allowed to go above one million. </del> <ins> **Note:** Once the chain starts the terms are allowed to go above `limit`. </ins> # --hints--

I was translating of project-euler and noticed that the NOTE is a little bit weird. I checked the . The description is "Which starting number, under one million, produces the longest chain?" and "NOTE: Once the chain starts the terms are allowed to go above one million." If we change the description to "Which starting number, under the given , produces the longest chain?", should we change the NOTE? change the NOTE from "" to "Note: Once the chain starts the terms are allowed to go above ." !
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: height: 100%; overflow: hidden; } <del> #challenge-page-tabs a { text-decoration: none; } #challenge-page-tabs a:hover { color: var(--secondary-background); </del> <ins> #challenge-page-tabs .nav-tabs > li.active > a { color: var(--quaternary-color); background-color: var(--quaternary-background); </ins> }


Question: .map-title-completed { margin-left: auto; <del> width: 100px; </del> <ins> min-width: 100px; </ins> padding-left: 20px; }

!
Hi, this could be resolved by removing the width of the -class. Should I do that and create a PR?
You should check locally if the fix will have any unintended side effects, of course a PR is welcome. Thanks.
I changed the to so the progress reports still align on mobile screens.


Question: id='challenge-page-tabs' onSelect={moveToTab} > <del> <TabPane eventKey={1} title='Info'> </del> <ins> <TabPane eventKey={1} title={i18next.t('learn.editor-tabs.info')}> </ins> {instructions} </TabPane> <del> <TabPane eventKey={2} title='Code' {...editorTabPaneProps}> </del> <ins> <TabPane eventKey={2} title={i18next.t('learn.editor-tabs.code')} {...editorTabPaneProps} > </ins> {showUpcomingChanges && <EditorTabs />} {editor} </TabPane> <del> <TabPane eventKey={3} title='Tests' {...editorTabPaneProps}> </del> <ins> <TabPane eventKey={3} title={i18next.t('learn.editor-tabs.tests')} {...editorTabPaneProps} > </ins> {testOutput} </TabPane> {hasPreview && ( <del> <TabPane eventKey={4} title='Preview'> </del> <ins> <TabPane eventKey={4} title={i18next.t('learn.editor-tabs.preview')} > </ins> {preview} </TabPane> )}

Describe the bug When you enter a challenge using a mobile device, the tabs below the main header are displayed with untranslated text To Reproduce Steps to reproduce the behavior (mobile device): to untranslated tabs below the main header Expected behavior Tabs text should be translated. Screenshots Spanish site ! Chinese site ! Desktop (please complete the following information): OS: [Windows 10] Browser: [chrome] Version: [88] Additional context Those strings are not available yet on the Crowdin platform.


Question: # --hints-- <del> There should be an `img` element right above the second `section` element's closing tag. </del> <ins> There should be an `img` element right after the closing `</ul>` tag. </ins> ```js assert($('section')[1].lastElementChild.nodeName === 'IMG');

In RWB, the placement of the instructions interrupts the code and makes indentation unclear, especially for a beginner that may not know what to look for yet. I noticed several instances where putting longer, uninterrupted part of the code in the highlighted editor might help with clarity. <h2Examples</h2<a href=""Step 21</a: change the error message or expand the highlighted code. (Error message when h3 is in the wrong location: "There should be an h3 element right above the second section element's closing tag.") <a href=""Step 23</a: include in highlighted editor to match the instructions ("A figure caption (figcaption) element is used to add a caption to describe the image contained withing the figure element.") and to show the placement of within . <a href=""Step 50</a: include in highlighted editor to match the instructions ("The legend element acts as a caption for the content in the fieldset element.") and to show the placement of within . <h2Proposed solutions</h2- Expand the code on case-per-case basis. Permanently move the instructions box on top of the code editor. (I think that would make everything clearer and more accessible with well defined sections on the page, but I imagine it would be harder to implement now.)
I don't believe we would go this route, as the instructions UI was specifically designed to allow us to highlight the section of code a camper should be editing. I do agree some of these regions could be tweaked a bit
Thank you for reading through it! I will admit I that secondary suggestion because of a personal issue as well, as I find the page a bit overwhelming and every time I click on the next step, it takes me a while to find and re-focus on the editor. I think there's just a lot going on visually, but I'm not a UI/UX designer so I don't have specific suggestions except for the fixed placement.
I'm fine with changing the three lessons mentioned here, but we could maybe use a discussion on how those regions should be. There's probably going to be many steps where the editable region could be bigger or smaller or different. Maybe we need some hard rules on how to apply them. Something like - for HTML steps, include the parent element in the region. For CSS steps, include the whole selector.


Question: # --hints-- <del> There should be an `img` element right above the second `section` element's closing tag. </del> <ins> There should be an `img` element right after the closing `</ul>` tag. </ins> ```js assert($('section')[1].lastElementChild.nodeName === 'IMG');

There may be instances where rules like that don't work out so well. Like for the first steps of the Cat Photo project, we may want to be more specific about where to add code - and on later steps or projects, more vague. So I don't know.
I did bring this up, but we were on the fence with:
Yeah it seems like something that's more of a case-by-case basis than to have hard and fast rules for. My proposed "general" approach would be to encapsulate anything the instructions mention. So if the instructions say "write a h2 below your h1", the h1 should be within the editable region.
To try and get this issue resolved, I vote for these changes: step 21: change the hint to "There should be an img element right after the closing tag." step 23: use op's suggestion step 50: use op's suggestion
Thank you for reporting this issue. An easy fix would be to scroll the editor so the instructions are always almost at the top of the "page". That way the eyes know where to go on each challenge. (right now it scrolls to the center) I am interested in knowing more about this: " it takes me a while to find and re-focus on the editor." Are you having difficulty locating the instructions? do also look around for the tests and the submit button? More context is appreciated. We ultimately need to usability test this with people who have not seen the curriculum.
Hello, sorry for the late reply. After seeing this notification, I opened the curriculum on a random step to see if I could provide you with more information. I mostly forgot how the page was structured and my eyes just ran across the page in no specific order. "Check your code" was the first text I read, as it draws the most attention, and then "". I believe that would be very helpful! (I think it would also be nice if the navigation breadcrumbs were more subtle, and if the buttons like "", "" and "preview" looked more like toggle buttons – now they remind me of tabs but disconnected from their sections, and they also draw more attention than is perhaps needed?) Thank you for checking in on this!
Thank you for your feedback.


Question: .scene-wrapper { overflow: hidden; position: relative; <ins> color: var(--gray-00); </ins> } .scene-start-screen {

In you can see the dialogue text in night mode, but not otherwise. The issue is that the font changes colour, but the background image does not.
Ha, this explains why I didn't think there were any captions, I never looked at it in dark mode.
I had the same thought haha


Question: id: 587d778b367417b2b2512aa8 title: Add an Accessible Date Picker challengeType: 0 <del> videoUrl: 'https://scrimba.com/c/cD9DJHr' </del> <ins> videoUrl: 'https://scrimba.com/c/cR3bRbCV' </ins> --- ## Description

The video for the lecture does not exist.
Two videos from that section are missing: "Add an Accessible Date Picker" and "Make Elements Only Visible to a Screen Reader by Using Custom CSS". It seems both videos are down on the Scrimba platform. In the , both videos seem to be missing. If this video has been uploaded elsewhere, we can replace the URL for now. Otherwise, those two videos may need to be re-uploaded. Side note: The playlists are also incorrectly named. It seems that the Applied Accessibility and Applied Visual Design titles have accidentally been switched.


Question: } } <ins> focusOnEditor() { this._editor.focus(); } </ins> onChange = editorValue => { const { updateFile, fileKey } = this.props; updateFile({ key: fileKey, editorValue });

Is your feature request related to a problem? Please describe. It currently can take a several key presses to navigate to the editor if it does not have focus. Describe the solution you'd like It should be possible to focus on the editor with a hotkey, for example 'e'. The issue where this was mostly discussed will be closed soon, but some thoughts about implementing this appeared there:


Question:
return ( <Fragment>
  Before we issue our verified certification to a camper, he or she must accept our Academic Honesty Pledge, which reads:   Before you can claim a verified certification, you must accept our Academic Honesty Pledge, which reads:

 "I understand that plagiarism means copying someone else’s work and


Question:
return ( <Fragment>
  Before we issue our verified certification to a camper, he or she must accept our Academic Honesty Pledge, which reads:   Before you can claim a verified certification, you must accept our Academic Honesty Pledge, which reads:

 "I understand that plagiarism means copying someone else’s work and


Question: }, timeout); worker.onmessage = e => { <del> if (e.data && e.data.type) { </del> <ins> clearTimeout(timeoutId); // data.type is undefined when the message has been processed // successfully and defined when something else has happened (e.g. // an error occurred) if (e.data?.type) { </ins> this.emit(e.data.type, e.data.data); <del> return; </del> <ins> } else { this.emit('done', e.data); </ins> } <del> clearTimeout(timeoutId); this.emit('done', e.data); </del> }; worker.onerror = e => {

Describe the bug Sass pages with invalid syntax occasionally timeout To Reproduce Steps to reproduce the behavior: to in in the console (sometimes) Expected behavior The following should appear in the console: Since this is intermittent, here's a gif to demonstrate: ! Additional Context When the error appears it does so very quickly, so it is unlikely that this is due to a genuine timeout.
Hey Oliver, When I clicked on the link, I reset the code, and completed the challenge as it should be completed. I came across a error, and was unable to run the tests. However, after resetting the code, refreshing the page, and pasting in the code you provided (missing ), the error you mention appeared, but does not disappear. So, I suspect it has to do with the page first load, because I can get the error only if I: 1) reset the code 2) Duplicate the tab 3) Input the incorrect code (missing ) !
I tried method but that didn't produce the bug. I am able to reliably reproduce the bug on Chromium & Firefox with the following steps: the page (new tab & refresh can both produce bug). delete & re-add the character from line 9, fast enough that the new state does not display in the console. step 2 on deleting the . If done correctly the message will display instead of an error, even though the console input is incorrect. approximately 3-5 seconds for the timeout message to appear. Note: it can also be reproduced where by in step 2 you end on re-adding the but it's harder to tell if the bug has happened. It must have something to do with the console state change and the output error check conflicting.
I worked on this issue on my old computer that is very slow and on my main PC (with a dual boot). On my old computer I have the same result as regurlaly timeouts. On the new one to have this issue I have to paste 3 times the piece of code to reproduce it. But everytimes, this is a real timeout (5ms, I put 'new Date()' on the code).


Question: }, timeout); worker.onmessage = e => { <del> if (e.data && e.data.type) { </del> <ins> clearTimeout(timeoutId); // data.type is undefined when the message has been processed // successfully and defined when something else has happened (e.g. // an error occurred) if (e.data?.type) { </ins> this.emit(e.data.type, e.data.data); <del> return; </del> <ins> } else { this.emit('done', e.data); </ins> } <del> clearTimeout(timeoutId); this.emit('done', e.data); </del> }; worker.onerror = e => {

We can upgrade the source code one "execute-challenge-" with this kind of stuff to have a best message, but still the problem : <prelet errMsg = 'error'; if (err === 'timeout') { // eslint-disable-next-line no-ex-assign errMsg = ; } else if (Array.isArray(err) && err.length0 && err[0] === 'timeout') { // timeout: 5ms errMsg = ; } else { errMsg = err; } (errMsg); yield put(updateConsole(escape(errMsg))); </preso the result will be "Server response timeout"
While this is old, it's still reproducible, unfortunately. A PR to improve the warning would be welcome.
I’m currently taking a look into a possible solution on this!


Question: assert.match(calculateCalories.toString(), /document.querySelectorAll(s*('|")#breakfast input[s*type=numbers*]s*1s*)/); ``` <del> You should assign the result of your `odocument.querySelectorAll()` call to `breakfastNumberInputs`. </del> <ins> You should assign the result of your `document.querySelectorAll()` call to `breakfastNumberInputs`. </ins> ```js assert.match(calculateCalories.toString(), /breakfastNumberInputss*=s*document.querySelectorAll(s*('|")#breakfast input[s*type=numbers*]s*1s*)/);

Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: File: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: class WorkerExecutor { constructor( workerName, <del> { location = '/js/', concurrency = 2, terminateWorker = false } = {} </del> <ins> { location = '/js/', maxWorkers = 2, terminateWorker = false } = {} </ins> ) { <del> this._workerName = workerName; this._workers = []; this._queue = []; this._running = 0; this._concurrency = concurrency; </del> <ins> this._workerPool = []; this._taskQueue = []; this._workersInUse = 0; this._maxWorkers = maxWorkers; </ins> this._terminateWorker = terminateWorker; <del> this._location = location; </del> <ins> this._scriptURL = `${location}${workerName}.js`; </ins> this._getWorker = this._getWorker.bind(this); } async _getWorker() { <del> let worker; if (this._workers.length) { worker = this._workers.shift(); } else { worker = await new Promise((resolve, reject) => { const worker = new Worker(`${this._location}${this._workerName}.js`); worker.onmessage = e => { if (e.data && e.data.type && e.data.type === 'contentLoaded') { resolve(worker); } }; worker.onerror = err => reject(err); }); } return worker; </del> <ins> return this._workerPool.length ? this._workerPool.shift() : this._createWorker(); </ins> } <del> _pushTask(task) { this._queue.push(task); this._next(); </del> <ins> _createWorker() { return new Promise((resolve, reject) => { const newWorker = new Worker(this._scriptURL); newWorker.onmessage = e => { if (e.data?.type === 'contentLoaded') { resolve(newWorker); } }; newWorker.onerror = err => reject(err); }); </ins> } _handleTaskEnd(task) { return () => { <del> this._running--; if (task._worker) { const worker = task._worker; </del> <ins> this._workersInUse--; const worker = task._worker; if (worker) { </ins> if (this._terminateWorker) { worker.terminate(); } else { worker.onmessage = null; worker.onerror = null; <del> this._workers.push(worker); </del> <ins> this._workerPool.push(worker); </ins> } } <del> this._next(); </del> <ins> this._processQueue(); </ins> }; } <del> _next() { while (this._running < this._concurrency && this._queue.length) { const task = this._queue.shift(); </del> <ins> _processQueue() { while (this._workersInUse < this._maxWorkers && this._taskQueue.length) { const task = this._taskQueue.shift(); </ins> const handleTaskEnd = this._handleTaskEnd(task); task._execute(this._getWorker).done.then(handleTaskEnd, handleTaskEnd); <del> this._running++; </del> <ins> this._workersInUse++; </ins> } }


Question: class WorkerExecutor { constructor( workerName, <del> { location = '/js/', concurrency = 2, terminateWorker = false } = {} </del> <ins> { location = '/js/', maxWorkers = 2, terminateWorker = false } = {} </ins> ) { <del> this._workerName = workerName; this._workers = []; this._queue = []; this._running = 0; this._concurrency = concurrency; </del> <ins> this._workerPool = []; this._taskQueue = []; this._workersInUse = 0; this._maxWorkers = maxWorkers; </ins> this._terminateWorker = terminateWorker; <del> this._location = location; </del> <ins> this._scriptURL = `${location}${workerName}.js`; </ins> this._getWorker = this._getWorker.bind(this); } async _getWorker() { <del> let worker; if (this._workers.length) { worker = this._workers.shift(); } else { worker = await new Promise((resolve, reject) => { const worker = new Worker(`${this._location}${this._workerName}.js`); worker.onmessage = e => { if (e.data && e.data.type && e.data.type === 'contentLoaded') { resolve(worker); } }; worker.onerror = err => reject(err); }); } return worker; </del> <ins> return this._workerPool.length ? this._workerPool.shift() : this._createWorker(); </ins> } <del> _pushTask(task) { this._queue.push(task); this._next(); </del> <ins> _createWorker() { return new Promise((resolve, reject) => { const newWorker = new Worker(this._scriptURL); newWorker.onmessage = e => { if (e.data?.type === 'contentLoaded') { resolve(newWorker); } }; newWorker.onerror = err => reject(err); }); </ins> } _handleTaskEnd(task) { return () => { <del> this._running--; if (task._worker) { const worker = task._worker; </del> <ins> this._workersInUse--; const worker = task._worker; if (worker) { </ins> if (this._terminateWorker) { worker.terminate(); } else { worker.onmessage = null; worker.onerror = null; <del> this._workers.push(worker); </del> <ins> this._workerPool.push(worker); </ins> } } <del> this._next(); </del> <ins> this._processQueue(); </ins> }; } <del> _next() { while (this._running < this._concurrency && this._queue.length) { const task = this._queue.shift(); </del> <ins> _processQueue() { while (this._workersInUse < this._maxWorkers && this._taskQueue.length) { const task = this._taskQueue.shift(); </ins> const handleTaskEnd = this._handleTaskEnd(task); task._execute(this._getWorker).done.then(handleTaskEnd, handleTaskEnd); <del> this._running++; </del> <ins> this._workersInUse++; </ins> } }


Question: The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. <del> Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </del> <ins> Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </ins> # --hints--

CSS Learn Typography/Nutrition Label: Step 31 “Create an .small-text selector and set the font-size to” the “an” should actually be an “a”. Windows 11/ Chrome browser Version 110.0.5481.78 (Official Build) (64-bit)
It helps if you use the New Issue template. ! Link to challenge: Suggested correction:
Would you like to solve this issue? Or shall I go for it? Feel free to try
iam new to opensource i love to work on this issue.
An issue with the or label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
To solve this issue, change this line from to Here is the file If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our prolific contributors will guide you through this.


Question: # --description-- <del> Add another conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </del> <ins> Add another boolean expression that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </ins> # --hints-- <del> You should have a conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </del> <ins> You should have a boolean expression that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </ins> ```js

The instructions are really confusing and could be rephrased. ! I don't think what is referred to as a conditional is a what people are going to think of as a conditional. It is just a Boolean expression that is being asked for. No action or assignment is being given depending on truthiness of the expression. It seems like it is looking for an if, switch, ternary or bare conditional, and I believe only ternary or a bare conditional can be placed inside of an array (Not being nested inside of IIFE) which is knowledge a novice probably won't have. The difference, although small, is that a condition takes an action based on the result of a Boolean expression. No conditional action is being taken, so it is just an expression. Might ask for the first element in the array to be a Boolean expression of the sum of the player's position, height and velocity greater than or equal to the platform's position. There are various steps that follow that refer to Boolean expressions as conditionals. The concern is people learning incorrect terminology and getting mixed up in the field.
Yes, you are correct we should update the terminology for steps 78-81 to say boolean expression instead of conditional statement. I have opened this up for contribution.
For each of the steps, make sure to make the change mentioned above in all of the descriptions. Also, go through and check all of the hint text to make sure the correct terminology is used as well
It is bigger than a few steps. I did not track all the steps but kept seeing it through to the end of the course. It happens everywhere that we later do conditional action based on the Booleans stored in arrays. For each array we made, (I think there were 3? player, platform and checkpoints), the instructions use the same wording.
Looks like we have a PR to address the few steps I mentioned earlier. We can review that and merge it in which will close this particular issue. But then I can audit the project to find the other steps and create a second PR to remove the rest
Did a search and replace for the english files and found five more files total where the change needed to be applied. Here is the PR to resolve that.


Question: "Try creating one of each." ], "tests":[  "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"   "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"  ], "challengeSeed":[ ],

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. Code broken: assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters'); Create a // style comment that contains at least five letters Should only show; Create a // style comment that contains at least five letters
Dear camper, your issue is a duplicate: Please see .


Question: "Try creating one of each." ], "tests":[  "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"   "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"  ], "challengeSeed":[ ],

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. Code "assert(editor.getValue().match(/(//)...../g)," appears on the left hand checklist. After completing the challenge and running the code, section completion pop-up appears, and if you try to move on to the next section, the section completion pop-up will continuously appear instead of moving on to the next section. Multi-line comments such as this do not pass the test: / hello / <img width="1440" alt="screen shot 2015-08-18 at 8 50 03 pm" src=""
Dear camper, your issue is a duplicate and already fixed: Please see .


Question: "Try creating one of each." ], "tests":[  "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"   "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"  ], "challengeSeed":[ ],

In order to pass the test for this waypoint, the comment for the slash-start-start-slash type of commenting has to be on the same line as the first slash-star, otherwise it doesn't work. ! Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible.
Dear camper, your issue is a duplicate: Please see .


Question: "Try creating one of each." ], "tests":[  "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"   "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"  ], "challengeSeed":[ ],

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. Left side error checking seems wrong !
I couldn't get this to work until I entered the following: //Not hello world /(asterisk)Still not hello world(asterisk)/ Note that the /(asterisk) and (asterisk)/, apparently, have to be on the same line. Using Chrome 45.0.2454.85 on Mac OS 10.10.5.


Question: <ins> /* global expect jest */ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import TestRenderer from 'react-test-renderer'; import Honesty from './Honesty'; import { Button } from '@freecodecamp/react-bootstrap'; describe('<Honesty />', () => { const renderer = new ShallowRenderer(); const updateIsHonestMock = jest.fn(); test('<Honesty /> snapshot when isHonest is false', () => { const componentToRender = ( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('Honesty'); }); test('<Honesty /> snapshot when isHonest is true', () => { const componentToRender = ( <Honesty isHonest={true} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('HonestyAccepted'); }); test('should call updateIsHonest method on clicking agree button', () => { const root = TestRenderer.create( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ).root; root.findByType(Button).props.onClick(); expect(updateIsHonestMock).toHaveBeenCalledWith({ isHonest: true }); }); }); </ins>

Describe the bug When we accept the academic honesty policy and hover over the text, it feels like a button. The cursor should be auto. To Reproduce Steps to reproduce the behavior: to the settings page sure you have accepted academic honesty policy over "you have accepted academic honesty" button Desktop (please complete the following information): OS: Windows 10 Pro 32 Bit Pro Browser: Chrome Version: 77.0.3865.90
, we can make this button disabled, no? I tried it and it seems good, as it is a button but doesn't have to be clicked again..
Please feel free to make a PR.. Here are the lines that you probably need to touch: [ ] The panel can be a button and disabled. [ ] We would need some tests for these as well. Thanks.
Please follow our
Sure, I'll do it as soon as I can, after work.
I went ahead and created a PR for this, along with unit test. Hope it's fine.


Question: </p> <p key={6}> In the situations where we discover instances of unambiguous plagiarism, <del> we will replace the camper in question’s certification with a message </del> <ins> we will replace the person in question’s certification with a message </ins> that "Upon review, this account has been flagged for academic dishonesty." </p>

<img width="1074" alt="Profile_freeCodeCamp_org" src="https://user-"
can I take this issue?
Thank you and for your interest. This issue might need a little more investigation before arriving at the final solution. I encourage you to find similar issues to tackle in the meantime. should I only audit the copy to replace profile with portfolio or you would rather changing the profile instances in the client and the api-server entirely?
I would like to get it assigned..
this should come as a cosmetic change to the copy only, do not change any endpoints or code (functions, objects, files) etc. It can be done to both API and the client where copy edit is needed.


Question: </p> <p key={6}> In the situations where we discover instances of unambiguous plagiarism, <del> we will replace the camper in question’s certification with a message </del> <ins> we will replace the person in question’s certification with a message </ins> that "Upon review, this account has been flagged for academic dishonesty." </p>

<img width="927" alt="Settings_freeCodeCamp_org" src="https://user-"


Question: `); } catch (err) { if (__userCodeWasExecuted) { <ins> // rethrow error, since test failed. </ins> throw err; <ins> } else { // report errors to dev console (not the editor console, since the test // may still pass) __utils.oldLog(err); </ins> } testResult = eval(e.data.testString); }

Describe the bug If the user's code does not build there are no logs informing them of this. To Reproduce Steps to reproduce the behavior: locally, to (a); ('a'); </preinto the editor the tests that test output does not log 'a' or report any errors. Expected behavior The user should get some feedback, even if the code in the editor is broken. Perhaps just some output to the dev console, since there are various challenges that pass since they ignore the build errors. I think it should not appear in the test output area. It would be a little confusing for a new coder to get told something is wrong even though their code is passing. However, if they dig a little deeper there should be something (so they can see why their aren't working, for instance). Additional context The behaviour in production is different - it automatically fails tests (with output) if the build fails.


Question: function Hotkeys({ canFocusEditor, children, <ins> editorRef, </ins> executeChallenge, introPath, innerRef,


Question: `myVar = myVar - 1;` should be changed. ```js <del> assert( /lets*myVars*=s*11;s*/*.*s*([-]{2}s*myVar|myVars*[-]{2});/.test(code) ); </del> <ins> assert(!code.match(/myVars*=s*myVars*[-]s*1.*?;?/)); ``` You should not assign `myVar` with `10`. ```js assert(!code.match(/myVars*=s*10.*?;?/)); </ins> ``` You should use the `--` operator on `myVar`.

You can pass the test by assigning 10 to the variable after decrementing it past that value. It also doesn't seem like the... is not working. Incorrect code that is passing: Forum: Challenge: Tests:
I am happy with this being changed, but, personally, I see no issue here: The lesson teaches the operator, and that has been used. If the lesson were to give an element the text , and you did this, I would not expect you to fail the tests: Aside I might be becoming pessimistic in my teaching pedagogy, but we cannot truly expect to keep changing all these lessons forever, as more and more cases are found - there is a "good enough" point, IMO.
Yes, I believe that if a user uses the solution that stated, they know how works already, which fulfills the objective of the lesson.
I don't think your example is equivalent at all. The end value is supposed to be the result of decrementing, not just assigning a final value. Clearly, they do not if they can not decrement the starting value to the final value that is asked for. I see no reason why anyone that understands what the challenge is asking for would do that assignment. We are not just blindly looking for the operator to be used. We are looking for the value to be decremented to using the operator. An example would be a lesson where you ask someone to use a word in a sentence and they use the word incorrectly. They may have used the word but if it is used incorrectly they do not understand the word. Using it in a sentence means correctly using it, not just blindly shoving it into a sentence. I would think a test with a regex that looks for an assignment to be good enough here.
You're right, my bad. As I understand it, you want to use regex to check if an assignment is present, and if it is, fail the test? I think that would work well.
second test should be updated. Right now you can leave the initial code even though the test says it should be replaced. It should test that is not present in the code. that no assignment is used.
I see, thank you for the clarification!


Question: # --description-- <del> Use the `join()` method to combine the `songsHTML` markup into a single string. </del> <ins> Right now the `songsHTML` is an array. If you tried to display this as is, you would see the songs separated by commas. This is not the desired outcome because you want to display the songs as a list. To fix this, you will need to join the array into a single string by using the <dfn>join()</dfn> method. </ins> <del> The `join()` method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called `separator` which is used to separate each element of the array. For example: </del> <ins> The `join()` method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called a `separator` which is used to separate each element of the array. For example: </ins> ```js const exampleArr = ["This", "is", "a", "sentence"];

This step comes up a lot on the forum and I think it is because we have never really explained what method chaining is or showed an example. Let's update the description to include an example so they know what to do. We should also explain why the join method is needed here so they better understand what is going on. js const exampleArr = ["This", "is", "a", "sentence"]; const sentence = (" "); // Separator takes a space character (sentence); // Output: "This is a sentence" js ().join(); ` see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the Happy coding


Question: --fcc-editable-region-- function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> while (numbers.length < 10) { numbers.push(Math.floor(Math.random() * 11)); }

No need to use here since the array is not re-assigned in later steps. We used for other arrays in this project that aren't reassigned. No response All No response
Hello, I fixed this by doing the following: 1) went to 2) found the ID of step-162 () 3) went to the repositories code and searched for the markdown file through ID. 4) the markdown file 5) Updated the markdown file to use 'const' instead of 'let' ! After this commit is approved, this should be able to be closed.
All of the seed code for subsequent challenges would also be changed.
I am not sure what you mean by this. Is there anything I can do to learn this? Are you referring to all references of 'let' initialization to be changed to 'const' in future steps?
Not quite - the answer to this step becomes part of the starting code for all future steps. If we change the instructions to use here, then then starting code on all future steps needs to be swapped to reflect that.
Hi, I raised a PR to fix this


Question: .once('error', err => reject(err.message)); }); <del> this._pushTask(task); </del> <ins> this._taskQueue.push(task); this._processQueue(); </ins> return task; } } <ins> // Error and completion handling </ins> const eventify = self => { self._events = {};


Question: .once('error', err => reject(err.message)); }); <del> this._pushTask(task); </del> <ins> this._taskQueue.push(task); this._processQueue(); </ins> return task; } } <ins> // Error and completion handling </ins> const eventify = self => { self._events = {};


Question: 此指南可阅读的语言版本 	     Read these guidelines in 	   English 	   中文 	  русский 	   عربي 	   Español 	    中文 	   Português 	   Русский 	  Español 	  Ελληνικά

Describe your problem and how to reproduce it: When you try to change contibution guidelines language - you'll see how the languages table's order is desynchronized and in several languages you cannot find new Greek language. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: Version 74.0.3729.169 (Official Build) (64-bit) Operating System: Windows 10 Pro 1809 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !


Question: "tests": [ "assert.deepEqual(chunk(['a', 'b', 'c', 'd'], 2), [['a', 'b'], ['c', 'd']], 'should return chunked arrays');", "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'should return chunked arrays');", <del> "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'should return cthe last chunk as remaining elements');" </del> <ins> "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'should return the last chunk as remaining elements');" </ins> ] }, {

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --From CSS variable lesson, I just want to inform that IE doesn't supports as well as it's fallback value. It'd be great if your team will curate those lessons/challenges or add alternate CSS property with that. Started from lesson. Browser Name: Chrome Browser Version: 67+ Operating System: Windows 10
Thanks for raising this. Fallbacks as described in this lesson are not for older browsers that lack CSS variable support, they are for when the variable has not been defined yet, or otherwise not able to be resolved. The technique you mention of using a preceding more broadly supported CSS rule is also referred to as a fallback. Ideally, I think there should be two lessons, one describing each. whats the situation with adding additional lessons?
yes we are open to adding new lessons.
what did you have in mind for additional lessons? How about just a message in the first variable lesson that or something
In my opinion: needs corrected additional lesson should be after the lessons in screenshot below, lesson to show how to use this principle to form resilient css - ie fallback behaviour for css rules not understood by browser !
I'd like to work on this. Should I lump this all into on PR or separate it into two since part one is technically a fix while part two is a feature?
great! Looking forward to seeing what you come up with. I would say it's better to have two separate PRs, one for the fix and another for the new lesson.


Question: ## --sentence-- <del> `_ to _ you all. I'm David, the project _ from FCC _.` </del> <ins> `_ to _ you all. I'm David, the project _ from FCC _` </ins> ## --blanks--

I'm no language genius but I don't think the requirement is correct. I'm not sure you are supposed to use two full stops in a row after an abbreviation. Not sure if both are correct or what? ,full%20stops%20in%20a%20row Maybe don't end the sentence in an abbreviation if it makes it unclear. Or do not require two full stops. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] forum:
I agree that this could be unnecessarily confusing. I also believe that it is technically incorrect to end a sentence with two full stops (periods) even when the sentence ends with an abbreviated word. As I understand it (grammatically) the single full stop serves a dual purpose in this case.
Should we add comma to first full stop or any other suggestion? If yes i am happy to do so?
I suggest changing the sentence to not end with the abbreviation. I think it is more important to teach the use of a period to denote an abbreviation, than it is to teach "no two periods in a row". Maybe that could be another lesson.
I would agree with that. But I would assume that's also more work than just removing the period at the end.
Oh. Right. I completely forgot the video/audio matched the sentence. In that case, I change my suggestion to just removing the period oat the end.
This issue is open to first-time code contributors to this repository. The change you should be making is to remove the period at the end of the sentence, under the section. The file that you should be updating is Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: className="spacer" style={ { <del> "height": "1px", </del> "padding": "5px 0", } }

We have instances which is used to provide spacing for both side of the component to wrap it up in specific space Example: We can make the Spacer component smarter, and allow it to accept children, so the code be like. But in doing so, we need to: change the current values and how the padding is calculated, the old layout shouldn't change with the new spacers. change which padding has the new value, I think paddingBlock, which is paddingTop and paddingBottom, is the new padding property . I am requesting this because this will make live simpler, and we have to worry about less elements while controling the layout, and if we have specific cases, we can still use
There is an abstraction with , we need address, it's better if we can specify the direction of the padding. but this can be sorted in another issue, for now to solve this issue please allow to have children prop inside of it, but the current styles of the curriculum shouldn't change. If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our prolific contributors will guide you through this.
Hey I have few questions while looking into this issue are few files where we have used Spacer, so may I just change wrap the content where ever needed or it would be handled in new issue? (I guess it must be done in other issue, as it would be easy to maintain) have implemented the children props, so may I raise a PR? Will break this issue in 2 other issues as well. 1 for wrapping the places it has been used, and 2nd for specifying the direction. I was wrapping and trying it out, I found out that Spacer has been used at every 2nd-3rd line of code, so do we need such a wrapper which would give spacing to all components present inside it or only to the parent component? EG: If we have 2 divs wrapped inside Spacer, then does both div have the spacing around them or only the outmost div.


Question: className="spacer" style={ { <del> "height": "1px", </del> "padding": "5px 0", } }

sorry for the delay, it was difficult to understand what you mean without looking at an example of code, so to answer you: yes the direction will be in a second issue, but the spacing and values should still be in this issue, so the pages won't look different Of course, please raise a PR after reading the guideline, nicely done . The Spacer shouldn't affect the children inside of it, think of it as creating a container with margin-block to space the area of the children inside of it from other areas
I guess we could close this issue
will be closed when the height is removed in the other PR


Question: "// Only change code above this line.", "// We use this function to show you the value of your variable in your output box.", "// You'll learn about functions soon.", <del> "if(typeof(myArray) !== "undefined" && typeof(data) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}" </del> <ins> "if(typeof(myArray) !== "undefined" && typeof(myData) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z));})(myArray, myData);}" </ins> ], "type": "waypoint", "challengeType": 1

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. The last line in code is: but for output box to work should be: ( replaced by )
Created PR


Question: # --description-- <del> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `falsey`. </del> <ins> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `null`. </ins> Inside the `if` block, call the `playSong()` function with the `id` of the first song in the `userData?.songs` array. This will ensure the first song in the playlist is played first. # --hints-- <del> You should create an `if` statement with the condition `!userData?.currentSong`. </del> <ins> You should create an `if` statement with the condition `userData?.currentSong === null`. </ins> ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{/); </ins> ``` You should call the `playSong` function with `userData?.songs[0].id` inside your `if` block. ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/); </ins> ``` # --seed--

in step 43 of the js beta music player project, we are asked to: add an if to check if userData?.currentSong is falsey. But if you type an if like below, it is accepted even though that's not a falsey check? I also looked at the code in step 44 and the condition doesn't seem to be a general falsey check there either, so maybe this step 43's instructions should be updated to say "add an if to check if userData?.currentSong is null"? a rewrite of the instructions is needed to be clearer about not requiring a falsey check but just a check against null. No response N/A No response
iirc the tests were updated to be more accepting of conditions that would still work for the project but weren't what the user stories ask
Hmm. I am not sure this issue fits the behaviour? It is really the description that is too restrictive in this case and doesn’t match the test?
There was change from requiring to falsey Further steps still have in the seed code.
It looks like when someone tried to fix the tests to allow the falsey answer they also changed the description in reverse to make it more restrictive than it was? (That is, a falsey condition requires that many conditions like false “” null and undefined are checked, but a null check is much simpler?)
Allowing any falsy value, through type coercion, implicitly allows all falsy values. However, we are not expecting the value to be an empty string or , so allowing explicit falsy value checks that isn't wouldn't be correct. is the explicit falsy value used by the code to denote "not set" or "unset", so allowing an explicit check for that value is fine. But I don't think the test should allow for an explicit value check. I don't believe there is a code path where the property being means the same as it being . If it is , I would assume something went wrong. Not that I thoroughly looked at the code. So if anything, we should update the test to not allow an explicit check but keep the check. Edit: Just to be super clear. I understand allowing is implicitly the same as allowing any explicit falsy value check. However, when reading code, explicit value checks signals something to the reader which a implicit check does not.


Question: # --description-- <del> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `falsey`. </del> <ins> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `null`. </ins> Inside the `if` block, call the `playSong()` function with the `id` of the first song in the `userData?.songs` array. This will ensure the first song in the playlist is played first. # --hints-- <del> You should create an `if` statement with the condition `!userData?.currentSong`. </del> <ins> You should create an `if` statement with the condition `userData?.currentSong === null`. </ins> ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{/); </ins> ``` You should call the `playSong` function with `userData?.songs[0].id` inside your `if` block. ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/); </ins> ``` # --seed--

So if I was reviewing the code, I would ask for an implicit falsy or an explicit check.
My confusion remains with the description. Someone sees this step’s description and posts on the forum with their code only checking for null, my first instinct is to say: hey, the instructions said check for a falsey not check for null. (This actually happened by the way which is why I opened this). Then I found out that actually the test didn’t care that the person wrote code that only checked for null. My point is this; if the test wants a null check then pls make the step ask for a null check and not a falsey check.
I assume we wanted to allow a falsy check instead of only a literal check, and in doing so we also change the written requirements to say a falsy check. I don't have an issue with removing the literal and part of the regex test. But the requirement doesn't state how the falsy check should be preformed, that is, it doesn't say it has to be an implicit coercion. So we might want to allow using as well.
I'm in the opposite camp (lasjorg's original camp?). There are other conditional points in the code flow that use an explicit check, and the property is initialised to in the code. It does not make sense to then allow a falsy condition in the step. We should revert the tests to require an explicit comparison.
I'm inclined to agree, but it is more an opinion. Strictly speaking, is used as an intentional value and other falsy values are not expected. Could you check for a by using implicit coercion? Sure. But in doing so, you are allowing potentially unexpected values to pass the check.
I will give my vote to revert the change back to a strict check. A falsy check seems too broad and allows for unexpected values.
I'm going to open this up for contribution. A PR which resolves this issue will update the instructions and tests for the linked step to require an explicit null check.
/assign
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labeled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: > <Caret /> <h4> <del> Super Block One Certification (300 hours) </del> <ins> Super Block One Certification (300 hours) </ins> </h4> </button> <ul>

Currently the map looks like this: ! I think it would look a lot better if we made more use of the available space. Something like this: !
I can fix the css in a separate PR, if you like. Unless you're already handling it, of course.
I think it is handled now in the PR already. I moved things into the Grid system
That PR still has the heavy indentation: !
You are correct, if you have something going please go ahead and push to the PR. I am done with the basic consolidation of the views that I was going for.


Question: You also need to get the value of your `#budget` input. You already queried this at the top of your code, and set it to the `budgetNumberInput` variable. However, you used `getElementById`, which returns an `Element`, not a `NodeList`. <del> A `NodeList` is an array-like, which means you can iterate through it and it shares some common methods with an array. For your `getCaloriesFromInputs` function, an array will work for the argument just as well as a `NodeList` does. </del> <ins> A `NodeList` is an array-like object, which means you can iterate through it and it shares some common methods with an array. For your `getCaloriesFromInputs` function, an array will work for the argument just as well as a `NodeList` does. </ins> Declare a `budgetCalories` variable and set it to the result of calling `getCaloriesFromInputs` – pass an array containing your `budgetNumberInput` as the argument.

A sentence in the description is missing the word "object". It currently says: It should say: The word "object" is missing. The sentence should say, "A NodeList is an array-like object..." ! Device: MacBook Air OS: MacOS 12 Browser: Opera Version: 112.0.5197.53 No response
Would love to be assigned to this issue. I am a first-time contributor and fixing a typo seems like a great first contribution to make to freeCodeCamp! Thanks!
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.