Question: return ( <button className={classes} onClick={onClick} type='button'>  {label ?? 'Close'}   {label || 'Close'}  × </button> );

I got a mini heart attack as I randomly tested the Storybook page of the component and found that the component failed a11y checks. <img width="1680" alt="Screenshot 2024-03-06 at 00 49 32" src=""This is because: We pass as an empty string to the component in the Storybook demo: We use the operator in the computation of the button's label, which would only fall back to if is either or : Note that this issue is only in Storybook and not in /learn as we do pass a to there: In , replace the operator with the operator In , make an empty object instead of containing empty and
I do not care much about the implementation, BUT, surely if a label of is never valid, then it is best to make the optional, and not pass one to the component? That is, I can imagine passing to a component because I do not want one, but was forced to pass one because it is not optional.
For this particular component, I agree that can be optional or can even be removed as a configuration option, since I don't think we need any customization here (the button's label should just be "Close" rather than something else). In fact, is already an optional prop of . However, has a limitation, which is that the library is not localized, so we still want to pass strings from /learn in order to have them translated. Semi-related, there was a discussion a while back regarding whether or not we should expose for consumption outside of . We decided to export the component because: The component in doesn't have a close button, but its version in /learn (which is called ) has one, so was built. (I wasn't around during the development of most of the components so I don't have the full context of the technical design) The limitation mentioned above.


Question: Your `letters.forEach()` callback function should be nested inside the `range(1, 99).forEach(number => {}` callback function. ```js <del> assert.match(code, /ranges*(s*1s*,s*99s*)s*.forEachs*(s*((s*numbers*)|number)s*=>s*{s*[^}]*letters.forEach(s*((s*letters*)|letter)s*=>s*{s*}s*)s*}s*)/) </del> <ins> assert.match(code, /ranges*(s*1s*,s*99s*)s*.forEachs*(s*((s*numbers*)|number)s*=>s*{s*[^}]*letters.forEach(s*((s*letters*)|letter)s*=>s*{s*}s*)s*;?s*}s*)/) </ins> ``` # --seed--

This step will fail with code and will pass removing the semicolon at the end of the third line. It doesn't look like this test allows for semicolon


Question: ); ``` <ins> Trying to remove an element from an empty tree should return `null`. ```js assert( (function () { var test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree(); } else { return false; } if (typeof test.remove !== 'function') { return false; } return test.remove(100) == null; })() ); ``` </ins> Trying to remove an element that does not exist should return `null`. ```js

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: using the code in this file: the challenge is passable by uncommenting lines 56-59 if (curr === null) { (curr, "curr") return null } The wording of the test is "Trying to remove an element that does not exist should return null." yet the assertions only test for removing a node that does not exist in an empty tree. What about removing nodes that do not exist in a tree that has nodes? ` Add a Link to the page with the problem: My pull request: Tell us about your browser and operating system: Browser Name: Browser Version: Operating System: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
To summarize the issue: Test checks only if trying to remove non-existing element from empty tree will return null. It doesn't check if the same happens for removing non-existing element from non-empty tree. This can lead to implementation, which doesn't handle the second case at all (and even as in example above can end up with error), and still pass challenge.


Question: } from '../../../redux/selectors'; import { ChallengeFiles, <del> ChallengeTest, </del> Dimensions, FileKey, ResizeProps,

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: } return { <del> postResult </del> <ins> postResult, oldLog </ins> }; })();

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: isResetting: boolean, isSignedIn: boolean, { theme }: { theme: Themes }, <del> tests: [{ text: string; testString: string }], </del> <ins> tests: [{ text: string; testString: string; message?: string }], </ins> isChallengeCompleted: boolean ) => ({ attempts,


Question:
"He aquí un ejemplo:", "<p>Aquí está un <a href="https://freecodecamp.org"> enlace a freeCodeCamp</a> para que lo sigas.</p>", "
",  "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla "fotos de gatos"."   "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla "cat photos"."  ] }, "pt-br": {

<!-- freeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- NOTE: If your issue is CodePen Project / Test Suite related, please open it using the below URL instead --<!-- --<!-- Insert link to challenge below --Link to external page with anchor elements <!-- Describe below when the issue happens and how to reproduce it --In the translation to Spanish, the instruction is: "Create an element which links to and have the anchor text "fotos de gatos". The validator says: Your a element should have the anchor text of "cat photos". This will be a trouble in all translations when the validator looks for a string given in a specific language. <!-- Describe your workspace in which you are having issues--Browser Name, Version: Operating System: Mobile, Desktop, or Tablet: <!-- If relevant, paste all of your challenge code in here --<!-- Add a screenshot of your issue --!
I can do this!
I guess an overhaul of the challenge JSON structure could go something like: But this would be a big overhaul :D


Question: --- # --description-- <del> The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `<em>` tag. </del> <ins> The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag. </ins> To use `em` on its own: <iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&theme-id=dark&default-tab=html%2Cresult&slug-hash=wvewqpp&user=TheOdinProjectExamples&name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>

The description of Working With Text Question D should read "in an tag" instead of "in a tag". <img width="788" alt="Screenshot 2024-03-29 at 23 05 44" src="" Change "in a tag" to "in a tag" in
This issue is open to first-time code contributors to this repository. The file that you should be updating is linked in the original post. Please make sure you read our as well as 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: const keyMap = { NAVIGATION_MODE: 'escape', EXECUTE_CHALLENGE: ['ctrl+enter', 'command+enter'], <ins> FOCUS_EDITOR: 'e', </ins> NAVIGATE_PREV: ['p'], NAVIGATE_NEXT: ['n'] };

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: assert.match(code, /consts+collisionDetectionRuless*=s*[s*(?:[^]]*s*)*];?/); ``` <del> You should have a conditional statement that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </del> <ins> You should have a boolean expression that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </ins> ```js assert.match(code, /consts+collisionDetectionRuless*=s*[s*player.position.ys++s*player.heights*<=s*platform.position.y,?s*]s*;?/);

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: } return test; } <del> // tail: let rules=[["A -> apple","B -> bag","S -> shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["A -> apple","B -> bag","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["A -> apple","WWWW -> with","Bgage -> ->.*","B -> bag","->.* -> money","W -> WW","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "], ["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"]]; let tests=["I bought a B of As from T S.", "I bought a B of As from T S.", "I bought a B of As W my Bgage from T S.", "_1111*11111_", "000000A000000"]; let outputs=["I bought a bag of apples from my brother.", "I bought a bag of apples from T shop.", "I bought a bag of apples with my money from T shop.", "11111111111111111111", "00011H1111000"]; </del> ```

Describe your problem and how to reproduce it: Data with test cases is in wrong place in challenge template. This makes it inaccessible when tests are run and makes challenge virtually unsolvable, unless test data is manually copied to the user code. Tests in this challenge uses three arrays, containing two inputs for the function and function outcome - arrays , , . They are called this way: Those variables are currently at the end of sample solution in challenge template. Simple moving them to more appropriate place - or section in the section - as shown in the , would deal with the issue. Add a Link to the page with the problem:


Question: ); ``` <del> `newestBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </del> <ins> `remove(add(bookList, "A Brief History of Time"), "On The Electrodynamics of Moving Bodies");` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </ins> ```js assert( <del> JSON.stringify(newestBookList) === </del> <ins> JSON.stringify(remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies')) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica',

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. -- This is the starter code: The starter code for this challenge is strange. 1) Why the space between the function name and the ()s for the arguments? 2) I get that the idea is to have the learners change the function signature, but it is a bit strange having a mismatch between the function signatures and the function calls in the starter code.
The linked PR in this issue. For , we could probably move away from having variables in the seed code and instead assert the function returns the expected value


Question: ], "description": [ "You can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within your submit button element.",  "Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane."   "Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane.", "All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%."  ], "challengeSeed": [ "<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">",

<!-- FreeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- Insert link to challenge below -- <!-- Describe below when the issue happens and how to reproduce it --This challenge would be a lot more informative if a description of what adding the form-control class to the input field actually does. Something along the lines of: All textual [input], [textarea], and [select] elements with class [.form-control] have a width of 100%.
This challenge is currently quite short and it's defiantly worth adding an explanation here. To First Timer: You will need to add the sentence under line. Please, check our and if you need any assistance reach out to the .
The code you'll need to add specifically is It should render as
Hey there. I'm a first-timer interested in getting started with contributing to Free Code Camp. I will submit a PR for this issue. Thanks!
Hey What about tests ?? Tests should be for each input.
having issue in style-text-inputs-as-form-controls just give a class="form-control" to before your checkbox's 1st div and finally add here 3)


Question: } } <del> @media (max-width: 767px) { .certificate-outer-wrapper .donation-section { padding: 20px 20px; } } </del> @media screen and (max-width: 992px) { .certification-namespace header { height: 160px;

Is your feature request related to a problem? Please describe. Currently the certificates lack any white space along the top border, making them difficult to screenshot and/or print: ! We should add some white space to the top of the page so the certificate is centered.


Question: - text: All elements from the first array should be added to the second array in their original order. testString: assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]); - text: The first array should remain the same after the function runs. <del> testString: frankenSplice(testArr1, testArr2); assert.deepEqual(testArr1, [1, 2]); </del> <ins> testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr1, [1, 2]); </ins> - text: The second array should remain the same after the function runs. <del> testString: frankenSplice(testArr1, testArr2); assert.deepEqual(testArr2, ["a", "b"]); </del> <ins> testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr2, ["a", "b"]); </ins> ```

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: While helping a camper with their work on this solution, I took a look at mine and discovered it passes when it should not. If you paste this code into the editor, you can see that has been modified from to but the test does not catch this fact. I believe it may be due to the tests for array modification calling the function without an parameter: If I assign a default value of in the function, then the tests catch this behaviour as expected. As such, I believe updating these function calls in the tests should correct this error. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 85.0.4183.102 Operating System: Windows 10 v 1909 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
I believe so. Essentially if you invoke without , the value of is and from the solution you have given, will be which is . Therefore : As a result and remain unmutated. What i am not sure of is whether invoking the function without was an oversight or intentional.
calling the function without an stops various loop solutions from being accepted. I do not know if it was intentional
Is it to force learners to use / since it is a splice-slice challenge?
There is no requirement to use splice or slice. It is an algorithm challenge. We do not care how they solve the problem.
So, to be clear - you are thinking to put a value in for on those two tests you shared would catch this.
Yes, updating the test call to: should correct this bug


Question: import DonateModal from '../Donation'; import 'prismjs/themes/prism.css'; <ins> import './prism.css'; import './prism-night.css'; </ins> import 'react-reflex/styles.css'; import './learn.css';

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: ); ``` <del> `newerBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. </del> <ins> `remove(bookList, "On The Electrodynamics of Moving Bodies")` should return `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. </ins> ```js assert( <del> JSON.stringify(newerBookList) === </del> <ins> JSON.stringify(remove(bookList, 'On The Electrodynamics of Moving Bodies')) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica',


Question: } .certification-namespace .information { <del> margin-top: -20px; </del> height: 380px; text-align: center; background-color: var(--gray-05);


Question: You should use a `for...of` loop to iterate through the `arr` array. ```js <del> assert.match(code, /consts+detectFullHouses*=s*((s*arrs*)|arr)s*=>s*{.*s*fors*(s*consts+nums+ofs+arrs*)s*{s*.*}/s); </del> <ins> assert.match(code, /consts+detectFullHouses*=s*((s*arrs*)|arr)s*=>s*{.*s*fors*(s*(const|let|var)s+nums+ofs+arrs*)s*{s*.*}/s); </ins> ``` # --seed--

We had this issue on the forum where the camper was unable to pass the test for step 71 with the following code. The test is expecting the use of inside the loop. But is valid too. After a quick scan of the final solution, it looks like the loop is used four times. I have checked the tests, but it is possible that all 4 instances have the same issue where is expected. Update all 4 instances of the tests to accept the use of or multiple pages 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
I verified other for loops at step 35, 38 and 57. All these accepts the use of let or const or var.


Question: ); ``` <del> `newBookList` should equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </del> <ins> `add(bookList, "A Brief History of Time")` should return `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </ins> ```js assert( <del> JSON.stringify(newBookList) === </del> <ins> JSON.stringify(add(bookList, "A Brief History of Time")) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'On The Electrodynamics of Moving Bodies',


Question: const getMultiple = await $.get(url + '?created_by=Alice&assigned_to=Bob'); assert.isArray(getMultiple); assert.lengthOf(getMultiple, 2); <ins> const copyId = getMultiple[0]._id; const getById = await $.get(url + `?_id=${copyId}`); assert.isArray(getById); assert.lengthOf(getById, 1); assert.equal(getById[0]._id, copyId, 'should be able to query a document by _id') </ins> } catch (err) { throw new Error(err.responseText || err.message); }

None of the GET request examples/Tests mention to be able to GET with id param, However during one of the PUT request tests there is a GET request sent with an ID, i struggled to find this Bug in my code, i feel adding one extra Functional test for GET request specifically requiring to be able to GET by IDs, If using mongoDB like i was the ID needs the toString Method in order to be read as a string. i attached a screen shot shows the PUT test with the GET request at the bottom Either extra functional test requiring to be able to GET with an ID, or Updated with GET example that shows GET with an ID ! Device: [Desktop] OS: [Windows 11 WSL Ubuntu 22.04.3 LTS] Browser: [Chrome] Version: [122.0.6261.70 ] No response_
This requirement would be covered by: I'd be fine adding another check inside that existing test to look at the param.
i see now the "any field" and value, this was a lack of knowledge at the time, being able to get data by an "id" is imperative. Id like to propose a solution to the test above, change query of to GET the post created by carol and assigned to eric, this keeps the get Multiple aspect but returns 1 doc the of to GET and assert that of is equal to of
I'm hesitant to rewrite the entire tests, when instead we could update the test I indicated to try a query by ID (which we know won't break existing projects because a later test relies on that functionality).
Agreed my proposed solution would be for the existing GET test that you indicated, you could just drop in and after existing , this adds a query by ID. The current tests only query by and !
Ah, I see. Yes, that would be a good approach. I'll go ahead and open this one up.


Question: req.flash('info', { msg: dedent` Once you have completed all of our challenges, you should  join our Half Way Club and start getting   join our Half Way Club and start getting  ready for our nonprofit projects. `.split('n').join(' ') });

when I finish all challenges, the flash info is Once you have completed all of our challenges, you should join our<a target=""_blank"" href=""""Half Way Club</aand start getting ready for our nonprofit projects.a element will not open HalfWayClub of gitter I'm using firefox 41.0.1 on windows, I think there is something wrong with


Question: Your `h2` tag should have a `width` of 80vw. ```js <del> assert(code.match(/h2s*?{s*?width:s*?80vw;s*?}/g)); </del> <ins> assert( __helpers .removeCssComments(code) .match(/h2s*?{s*?width:s*?80vw;s*?}/g) ); </ins> ``` Your `p` tag should have a `width` of 75vmin. ```js <del> assert(code.match(/ps*?{s*?width:s*?75vmin;s*?}/g)); </del> <ins> assert( __helpers .removeCssComments(code) .match(/ps*?{s*?width:s*?75vmin;s*?}/g) ); </ins> ``` # --seed--

Describe your problem and how to reproduce it: After commenting the code in a , the tests are passing. I think the issue is with this particular challenge only as I have solved many challenges and I haven't observed this bug in any of them. ! Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 76.0.3809.132 (Official Build) (32-bit) Operating System: Windows 10 Pro
This is not unique to the beta site. Many of the challenges don't ignore comments. We have a helper function which can be applied to the tests which removes comments. We can not use it across all challenges, because there are challenges which involve validating the comments. Since there are only a few challenge tests where we need to be able to check the actual HTML, CSS, or JavaScript comments, maybe we can figure out a way to pass an extra property named with a value of only when comments should not be removed from a specific testString's use of the variable. That way, the default behavior would always be to remove comments from a test. It might be simpler to just add the to the frontMatter of the challenge, so all the tests of a challenge would not remove the comments and the s could be adjusted to account for the comments not being removed from the variable.
I do not like the idea of changing the schema again though. What we really need is a parser to sanitize comments.
Some of the challenges are actually checking the comments, so you can not just sanitize all the challenges' comments.
Did someone say ?
Ooops, been a while since I have been on GitHub. Using an AST will help remove those awful regex tests that many of the older challenges rely on. The is built with . Is wouldn't take much to create a library of helper functions to use in tests.
How do this look? The idea is to provide a challenge test utility to replace the need upon horrible RegEx tests. I have this passing locally as a POC. <img width="568" alt="Screenshot 2019-09-15 at 14 19 32" src="https://user-"
This would be really nice to be able to update those quirky tests. Can you please throw in you changes in a PR?


Question: e.preventDefault(); if (executeChallenge) executeChallenge(); }, <ins> FOCUS_EDITOR: e => { e.preventDefault(); if (editorRef && editorRef.current) { editorRef.current.getWrappedInstance().focusOnEditor(); } }, </ins> NAVIGATION_MODE: () => setEditorFocusability(false), NAVIGATE_PREV: () => { if (!canFocusEditor) navigate(prevChallengePath);


Question: id: bad87fee1348bd9aede08817 title: Nest an Anchor Element within a Paragraph challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb' </del> forumTopicId: 18244 dashedName: nest-an-anchor-element-within-a-paragraph ---

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Affected page Your code Typical user code: Expected behavior We've had an uptick of people blindly copying the help video from this challenge without reading the instructions: This leads to campers failing the requirement (This is generally a problem with the help videos, unfortunately - copying with zero understanding.) Does this video link need to be updated or removed? Screenshots If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. System (please complete the following information): Device: [e.g. iPhone6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.4] Browser: [e.g. chrome, safari] Version: [e.g. 22] Additional context Add any other context about the problem here.
let's remove it, it's already that direction with other videos, once there is a discrepancy, the challenge win and the video is removed
Seeing as this is an easy fix (I assume we just remove the URL) I will open this up to first-timers. If anyone disagrees feel free to remove the label.
Thanks for making this a first timers only. The only additional step I would be recommending is using as an example to add clear instructions for first timers. I am going to go ahead and take care of that here. 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: Edit this file and remove the line containing . Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum 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.
Thanks for the help. I have the template to a saved reply. Hopefully, I will remember to use it. Also, I have a stupid question. How do you best "quote" the code and line numbers of a .md file?


Question: id: bad87fee1348bd9aede08817 title: Nest an Anchor Element within a Paragraph challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb' </del> forumTopicId: 18244 dashedName: nest-an-anchor-element-within-a-paragraph ---

Do you just use the blame view or look at a commit/PR? I don't understand the commit link you have in your quote. It looks to be for something else?
Oh - I just use the code view for a markdown file and then grab the permalink. <details<summaryDetails</summaryOpen file in code-view: It's the icon on the left at the top right of the file. Looks like this: ! Getting the permalink by selecting the line (host shift for more lines): ! </details
Right, but you can only get to the code view from inside a commit, right? I mean I do not see the source view for .md files when just looking at the file. Anyway, I will figure it out sorry to bother you with this I know you are a busy man.
Yes, that is correct. I browse the repo with top commit at the time of making a comment. But again, you do not have to spell out every little detail for the first-timers, it's just a "the more the better" type thing.


Question: The `console.log(array[0])` prints `50`, and `data` has the value `60`. <del> **Note:** There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. </del> # --instructions-- Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation.

I see here that we are intentionally supporting confusing but technically correct syntax. In light of this, we should remove the note here All of these are non-standard things that technically work but nobody actually does in practice. We should either go out of our way to support this sort of thing or not. If we are going out of our way to support this sort of thing, then there really isn't much point of letting the users know that it's unconventional syntax. See also: Personally, I think it's valuable to teach the learners how to write code that others expect to see so that it's easier for them to get hired, but we really need to be consistent. We should either help them with conventions or not bother. If we aren't doing anything after making the note, then it's just visual noise and should be removed.
For what it's worth: This code fails the "bracket notation" test, presumably because of the space. And I'm of the opinion that it should stay that way (I'd be okay with updating the test to allow spacing and adding a third test that clarifies "you should not have spacing"). That being said, there are areas where we are more lenient on the spacing/conventional style, which IMHO is okay if that's not the concept being taught/tested.
For what it's worth here's what I think about formatting. In practice the likes of prettier have rendered manual formatting unnecessary and unhelpful - I don't need to see diff noise obscuring actual code changes. If we're overly picky about formatting then I can see that creating a frustrating experience. However, we should provide nicely formatted code in the examples. That way learners can pick up good habits simply by copying.
I'm generally pretty flexible with formatting. I don't think we have any business requiring a specific brace and indentation style. I'll format utterly unformatted code when someone asks for help and explain how it helps me and the learner discuss the code more easily, but that's a very useful context to discuss readability. But the extra spaces in the above three examples are so unusual and uncommon of syntax that it feels strange to make our tests permit them in the recent couple of issues while also calling it out here as something to not do.
I disagree with both propositions — the note is fine, we should encourage standard style. But also let's not be a PITA.


Question: The `console.log(array[0])` prints `50`, and `data` has the value `60`. <del> **Note:** There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. </del> # --instructions-- Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation.

I'll copy my other comment here, so we can have a discussion in a single place:
If we aren't going to enforce/test it, it's just pointless noise that needs to be removed. Text that doesn't related to what is being tested just fills the screen. We have enough trouble getting users to actually read the challenge text without including text we intend for them to ignore.
From an accessibility perspective, I don't think we should be strict on formatting that does not affect the execution of the code. One example that comes to mind is people who are listening to the code. Screen readers don't announce spaces by default so it might not be obvious that there is an extraneous space between the variable name and the bracket notation. I don't think the tests should penalize them for this when the code executes just fine. On a side note, you can use the keyboard shortcut in monaco to format the code and it will remove the space between the variable name and brackets (I just tested it). So I suppose we could require everyone to format their code properly before testing, but this seems like overkill. Or perhaps there is a way to auto-format the code when the user clicks the test button?
I'm not thrilled about intending this syntax to pass, but I find the accessibility concern more compelling than just allowing highly uncommon syntax variations because it can run in other JS environments. But I still say that it we aren't going to test it, then the spacing note should not be there. If its not part of the challenge outcomes, then it's noise. We already struggle to get learners to actually read the parts of the text that relate to their ability to pass the challenge.
Allow me to revise my previous answer just a little. I think I was assuming that this extraneous space issue was being tested in all challenges, but now I'm realizing that it may apply to only this one particular challenge. If so, then as long as the challenge instructions make it clear that this is a requirement to pass the challenge, and there is a clear error message that indicates the reason the test failed is due to the extraneous space, then I think it is OK to leave this test in there if it's deemed important enough to keep. But in general, I do not think such formatting issues should cause a test to fail (as explained above).
Thanks for the thoughts & Here is what we should do: the note.


Question: The `console.log(array[0])` prints `50`, and `data` has the value `60`. <del> **Note:** There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. </del> # --instructions-- Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation.

IMHO you all are correct in assuming it does nothing other than draw attention to a confusing notion. should support the technically correct syntax (ignore testing for it, if we are). may be a good idea, but I am afraid of accidentally introducing something else.


Question: ```yml tests: <del> - text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>. </del> <ins> - text: <code>resolve</code> should be called with the expected string when the <code>if</code> condition is <code>true</code>. </ins> testString: assert(removeJSComments(code).match(/ifs*(s*responseFromServers*)s*{s*resolves*(s*('|"|`)We got the data1s*)(s*|s*;s*)}/g)); <del> - text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>. </del> <ins> - text: <code>reject</code> should be called with the expected string when the <code>if</code> condition is <code>false</code>. </ins> testString: assert(removeJSComments(code).match(/}s*elses*{s*rejects*(s*('|"|`)Data not received1s*)(s*|s*;s*)}/g)); ```


Question: ```yml tests: <del> - text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>. </del> <ins> - text: <code>resolve</code> should be called with the expected string when the <code>if</code> condition is <code>true</code>. </ins> testString: assert(removeJSComments(code).match(/ifs*(s*responseFromServers*)s*{s*resolves*(s*('|"|`)We got the data1s*)(s*|s*;s*)}/g)); <del> - text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>. </del> <ins> - text: <code>reject</code> should be called with the expected string when the <code>if</code> condition is <code>false</code>. </ins> testString: assert(removeJSComments(code).match(/}s*elses*{s*rejects*(s*('|"|`)Data not received1s*)(s*|s*;s*)}/g)); ```

Sure, we could change many tests in other challenges, but I would much rather have the tests as is, teaching users to debug their own code. In programming outside of tutorials, debugging is a massive portion of the process, and programmers do not always write their own tests. In my opinion, the tests are well-suit for teaching programming skills.
Just took a second look and it makes sense now, didn't see the part that specified what the strings had to be. I'll probably just add a couple of tests to check for what the strings are inside of resolve/reject and change the test messages depending on which ones were passed. BTW, if you don't mind me asking, why do you guys have all of your files in Markdown? I'm just curious for the sake of learning.
That’s a question or or some of the moderators could artIculate a better answer, but I think the theory is that markdown is an easy to read input for feeding the curriculum engine/logic.
TL;DR: Markdown is easy on editing. We used to have a json object (schema) for the challenges in the earlier days, but ever since we moved to - A static site generator, we started using markdown. It is easy for contributors to edit a text file. More often than not when making a quick contribution, you do not need to know how the underlying infra works, because maybe you are changing the instructions a little bit, fixing a typo, you get the idea. We wrote a custom parser (and a schema that it needs to be compliant with) to get the content out of the markdown and build the HTML pages (which is implemented as a Gatsby plugin of course). You are welcome to dig into the package to learn how it works. P.S: All questions are welcome, do not be shy :)
That makes a lot of sense thanks for the response, I have a couple more questions actually If you don't mind me asking, Since the challenges are made using Gatsby, how do you guys test your code? Do you make your own site and run it on there? Or do you use extensions on whatever IDE/text editor you use? Also, what does YML mean? I'm assuming YAML, but I honestly don't know, I think however that If I know what that means I can figure it out.


Question: ```yml tests: <del> - text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>. </del> <ins> - text: <code>resolve</code> should be called with the expected string when the <code>if</code> condition is <code>true</code>. </ins> testString: assert(removeJSComments(code).match(/ifs*(s*responseFromServers*)s*{s*resolves*(s*('|"|`)We got the data1s*)(s*|s*;s*)}/g)); <del> - text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>. </del> <ins> - text: <code>reject</code> should be called with the expected string when the <code>if</code> condition is <code>false</code>. </ins> testString: assert(removeJSComments(code).match(/}s*elses*{s*rejects*(s*('|"|`)Data not received1s*)(s*|s*;s*)}/g)); ```

Here's what I have so far:  What I want to do is change the first two tests to just resolve and reject with empty strings inside, then have the last two be with the correct string inside. These are probably very simple questions but I think they would help me out a lot as I contribute more this summer!
have you made a PR yet? When you do put the PR # in this thread so we can test your tests. If you need any help with this let me know. EDIT: Yes, YML stands for YAML files (yet another markup language). If you read the instruction on installing FreeCodeCamp locally there should be instructions for testing locally as well. To test curriculum: To test everything: Check out for all the commands for the project.
Also we have some documentation here: if you want to learn more.
I'm working on setting up my repo locally and getting a basic idea of the codebase, as I've never worked with YAML; if anyone else wants to fix this issue don't hesitate! I can work on something else. Like I said I'm new to open source so all of this stuff is new to me, apologies for me taking this long, I will be a lot more productive once I have more time on my hands.


Question: Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? <del> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. </del> <ins> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and nest an `input` accepting a file upload. </ins> # --hints--

In step 31 of the Learn HTML Forms by Building a Registration Form project, the step doesn't explicitly say that it wants the input element to be nested inside the label element. Instead it says: "Add a label with the text Upload a profile picture: , and add an input accepting a file upload." This could be interpreted to mean that the input element should be on the right side of the label element. Only when we attempt this are we told by the Hint "You should nest an input element inside the label element." To clarify the requirement, the step should use the word nest in the exercise as below for eg.: "Add a label with the text Upload a profile picture: , and nest an input accepting a file upload within it.", The step should explicitly state that the input element should be nested within the new label element. No response Not Applicable No response
I think if all of the challenges will have specifications defined explicitly, it will serve no purpose of "challenging" the learners to really think and solve it. In the first place, the solution is already implied from the given code and then, if the learners will still have the hard time solving it, then the feature will definitely do its job.
Agreed. The instructions should be clear to begin with. Making the users guess what the test requires isn't a "challenge", it's just rude.
For what it is worth, the camper has nested an input in a label element a few times in this challenge prior to this step. I am not against adding this reminder to the instructions, but I don't want to lose sight of our goal to keep the instructions more lean and have the hints serve as the reminders.
Definitely. But I looked back at the instructions on the steps where they add the previous inputs and we do explicitly tell them to put the input within the label: step 17: Nest an input element within each label. step 25: within each of the first two label elements, add one input element with type="radio". If we can add that information to those instructions then I think we can add it to this one. And let me just clarify that what I am really concerned about is this correct solution being rejected: I'm working under the assumption that correct code should always pass. So we need to tell the user that only a nested input will pass if that's all the test will accept.


Question: Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? <del> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. </del> <ins> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and nest an `input` accepting a file upload. </ins> # --hints--

I understand that if someone is working on a series of steps they may not need to be told to nest the input again. However, if they stop and return to the project a few weeks later on, they may not remember that. The hint will remind them sure. I guess this is a minor issue given the hint is quite clear. Personally I like a more explicit instruction.


Question: <ins> --- title: Static Site Generators --- ## Static web page Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However, loose interpretations of the term could include web pages stored in a database, and could even include pages formatted using a template and served through an application server, as long as the page served is unchanging and presented essentially as stored. Static web pages are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing. Maintaining large numbers of static pages as files can be impractical without automated tools, such as Static site generators described in the Web template system. Another way to manage static pages include Online compiled source code playgrounds, e.g. GatsbyJS and GitHub may be utilized for migrating a WordPress site into static web pages. Any personalization or interactivity has to run client-side, which is restricting. ## Static Site Generators A Static Site Generator is a program, that generates an HTML website as an output. This HTML website is then served through your web server, just like the olden days. This is usually achieved using template languages and code that separates out the layout of the website from its content and styles. ## How static sites work The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our news kiosk metaphor, think of a scenario where it's the news agencies who call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the storefront. When customers arrive, there's no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly. And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users. ## Advantages of static 1) Speed Perhaps the most immediately noticeable characteristic of a static site is how fast it is. As mentioned above, there are no database queries to run, no templating and no processing whatsoever on every request. Web servers are really good at delivering static pages quickly, and the entire site consists of static HTML files that are sitting on the server, waiting to be served, so a request is served back to the user pretty much instantly. 2) Version control for content You can't even imagine working on a project without version control anymore, can you? Having a repository where people can collaboratively work on files, control exactly who does what and rollback changes when something goes wrong is essential in any software project, no matter how small. But what about the content? That's the keystone of any site and yet it usually sits in a database somewhere else, completely separated from the codebase and its version control system. In a static site, the content is typically stored in flat files and treated as any other component of the codebase. In a blog, for example, that means being able to have the actual posts stored in a GitHub repository and allowing your readers to file an issue when something is wrong or to add a correction with a pull request — how cool is that? 3) Security Platforms like WordPress are used by millions of people around the world, meaning they're common targets for hackers and malicious attacks — no way around it. Wherever there's user input/authentication or multiple processes running code on every request, there's a potential security hole to exploit. To be on top of the situation, site administrators need to keep patching their systems with security updates, constantly playing cat and mouse with attackers, a routine that may be overlooked by less experienced users. Static sites keep it simple since there's not much to mess up when there's only a web server serving plain HTML pages. 4) Less hassle with the server Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There's packages, libraries, modules and frameworks with different versions and dependencies, there are different web servers and database engines in different operating systems. Sure, a static site generator is a software package with its dependencies as well, but that's only relevant at build time when the site is generated. Ultimately, the end result is a collection of HTML files that can be served anywhere, scaled and migrated as needed regardless of the server-side technologies. As for the site generation process, that can be done from an environment that you control locally and not necessarily on the web server that will run the site — heck, you can build an entire site on your laptop and push the result to the web when it's done. 5) Traffic surges Unexpected traffic peaks on a website can be a problem, especially when it relies intensively on database calls or heavy processing. Introducing caching layers such as Varnish or Memcached surely helps, but that ends up introducing more possible points of failure in the system. A static site is generally better prepared for those situations, as serving static HTML pages consumes a very small amount of server resources. ## Disadvantages of static (and potential solutions) 1) No real-time content With a static site, you lose the ability to have real-time data, such as indication about which stories have been trending for the past hour, or content that dynamically changes for each visitor, like a "recommended articles for you" kind of thing. Static is static and will be the same for everyone. There's not really a solution for this, I'm afraid. It's the ultimate price to pay for using a static site, so it's important that you ask yourself the question "how real-time does my site need to be?" — if its concept is based around delivering real-time information then perhaps a static site isn't the right choice. A dangerous solution: There's an easy exit for whenever you're faced with the challenge of dynamically updating content on a static site: "I can do it with JavaScript". Doing processing on the client-side and appending the results to the page after it's been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a fully dynamic one. It can prevent some users from seeing the injected content, hurt your SEO and introduce other problems, potentially taking away the ease of mind and sense of control that comes with using a static site. 2) No user input Adding user-generated content to a static site is a bit of a challenge. Take a commenting system for a blog, for example — how do you process user comments and append them to a post using just plain HTML pages? You don't. </ins>

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: I have gone through the Guides of freeCodeCamp and I think there should be Guides on Some Static Site Generator like Hugo, Jekyll, Next, Hexo etc The guides have already which is also used to generate the static site
Hi I think it is fine to do that. If you really want to do it write, I would suggest first creating a new article on Static Site Generators that would be located at . Then, in the same PR, I would suggest moving the existing to be a sub folder of the folder you create like . Then, you contributors can create other folders/files like: However, please do a quick search of the repo to see if you can find existing articles which may already cover these. I believe I have seen some of these mentioned in detail in some existing Guide articles, so we don't want to be duplicating content if we can keep from it. In fact, before creating a PR, I suggest you document here where you find any of these and we will figure out the best strategy of how to organize everything.
Any progress on this
yeah I have gone through the guides I think the only static site generator based file in freeCodeCamp is I am working on to add more guides on static site generator like and
Take the time you need. It was just a while since any activity here so I thought I would check in.


Question: className="spacer" style={ { <del> "height": "1px", </del> "padding": "15px 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": "15px 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: expect(redirectUrl.pathname).toBe('/authorize'); }); }); <ins> describe('GET /mobile-login', () => { let superGet: ReturnType<typeof createSuperRequest>; beforeAll(() => { superGet = createSuperRequest({ method: 'GET' }); }); beforeEach(async () => { await fastifyTestInstance.prisma.userRateLimit.deleteMany({}); await fastifyTestInstance.prisma.user.deleteMany({ where: { email: newUserEmail } }); }); it('should be rate-limited', async () => { await Promise.all( [...Array(10).keys()].map(() => superGet('/mobile-login')) ); const res = await superGet('/mobile-login'); expect(res.status).toBe(429); }); it('should return 401 if the authorization header is invalid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0NotOk()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer invalid-token' ); expect(res.body).toStrictEqual({ type: 'danger', message: 'We could not log you in, please try again in a moment.' }); expect(res.status).toBe(401); }); it('should return 400 if the email is not valid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0InvalidEmail()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(res.body).toStrictEqual({ type: 'danger', message: 'The email is incorrectly formatted' }); expect(res.status).toBe(400); }); it('should set the jwt_access_token cookie if the authorization header is valid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(res.status).toBe(200); expect(res.get('Set-Cookie')).toEqual( expect.arrayContaining([expect.stringMatching(/jwt_access_token=/)]) ); }); it('should create a user if they do not exist', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const existingUserCount = await fastifyTestInstance.prisma.user.count(); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); const newUserCount = await fastifyTestInstance.prisma.user.count(); expect(existingUserCount).toBe(0); expect(newUserCount).toBe(1); expect(res.status).toBe(200); }); it('should redirect to returnTo if already logged in', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const firstRes = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(firstRes.status).toBe(200); const res = await superRequest('/mobile-login', { method: 'GET', // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment setCookies: firstRes.get('Set-Cookie') }) .set('Authorization', 'Bearer does-not-matter') .set('Referer', 'https://www.freecodecamp.org/back-home'); expect(res.status).toBe(302); expect(res.headers.location).toBe( 'https://www.freecodecamp.org/back-home' ); }); }); </ins> });

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


Question: # --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/EZKqza.   **Objective:** Build an app that is functionally similar to this: https://choropleth-map.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: assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); ``` <ins> Your text `Total Liabilities` should not include period `.`. ```js assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.'); ``` </ins> Your `th` element should have the text `Total Liabilities`. ```js

The instructions state "In your fourth tr element, add a th element with the text Total Liabilities." However it is not really clear that the user should or should not include a period. Users will have failed previous tasks if the period was omitted (periods are required on previous exercises) , therefore they will most likely add the period which will result in a failed test case. Also, if the period is included after "Liabilities", the error message gives "Your th element should have the text Total Liabilities." Which does not highlight the actual issue. Maybe making a different test case message that looks for the period would make it more understandable? The code above should highlight the issue of the period being present. The test case that is currently in place can confuse users that they have a spelling issue/spacing instead of the actual issue being the period at the end of "Liabilities". No response Device: Desktop OS: Windows 10 Browser: Chrome Version: Version 108.0.5359.125 No response
I was thinking, that we could change to But this doesn't make a coherent sentence. I am in favor of adding a new test.
I also think a new test case would be good.
Hi! We just opened a to fix it, but it was not accepted . Could you please kindly inform us some feedback about what was going wrong and what else we need to do? So that we can know where to focus. We appreciate any help, thank you!!
Hi Thanks for reaching out and creating a pull request. For reasons of sanity, we can't accept PRs from forks that organizations maintain. You should make a PR from your own personal GitHub account. You can collaborate with others and have commits made by multiple people, but one person needs to create the PR, and then others may push to the same PR should they wish. It is OK if you want to use the draft mode while collaborating. The person making the PR is responsible for ensuring the checklist is followed, tests are working, and so on. You can also commit on someone's behalf. See: Also, please create good, small, and succinct commit messages and PR titles. Keep your commits clean and avoid any merge commits unless you have conflicts to resolve. The final PR should not have dirty commits from collaborating on an organization fork like the previous PR.


Question: assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); ``` <ins> Your text `Total Liabilities` should not include period `.`. ```js assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.'); ``` </ins> Your `th` element should have the text `Total Liabilities`. ```js

The reason is the maintainers of this project will need to validate your changes and the source of the commits. Keeping it clean makes everyone's lives easy. Thanks and happy coding!
Hi Mrugesh! Thank you for your precious feedback! I've switched back to my personal GitHub account, and made a pull request . This time the commits are clean and the messages are concise. Thank you for taking time reviewing! I appreciate any feedback. :D


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.