Question: "nav": { "forum": "https://chinese.freecodecamp.org/forum/", "news": "https://chinese.freecodecamp.org/news/" <ins> }, "help": { "HTML-CSS": "front-end", "JavaScript": "front-end", "Python": "curriculum", "Relational Databases": "curriculum" </ins> } }

As we are now rolling out the curriculum in Chinese and Spanish, we need to think about how to get the button to work for the two languages. Currently, when the button is clicked, the user is taken to the English forum () where a pre-populated topic message (in English) is displayed for the user to fill in with relevant information. These topics are dynamically generated before the post is created on the forum, so we will just need to make use of the file for the content of the topics. Also, we will need to route to the correct forum url for Chinese and target the correct subforum for Spanish.
So the Chinese links work correctly, because the Chinese forum is hosted at a different domain (which is passed in to the environment variable). For Espanol, as it currently stands the category comes from the value returned by the .


Question: "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", "The i element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to the i element to turn it into an icon, for example:", "<i class="fa fa-info-circle"></i>",  "Use Font Awesome to add a thumbs-up icon to your like button by giving it a i element with the classes fa and fa-thumbs-up."   "Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up."  ], "tests": [ "assert($("i").hasClass("fa fa-thumbs-up"), 'Add an i element with the classes fa and fa-thumbs-up.')",

here "giving it a i element with the classes fa and fa-thumbs-up." shoud be "an i" and not "a i" Challenge has an issue. User Agent is: <codeMozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code:


Question: const searchClient = algoliaAppId && algoliaAPIKey ? algoliasearch(algoliaAppId, algoliaAPIKey) <del> : {}; </del> <ins> : { search: () => {} }; </ins> const propTypes = { children: PropTypes.any,

and found themselves unable to log in locally. Ahmad's issue was fixed by , but Randy's was not. Could you explain a bit in this issue if the problem persists? It might be nothing, but it could be a sign something isn't quite right.
I am able to log in, and save settings. I did however get a bunch of errors on the landing page, which I resolved by adding: Back to Possibly useful to take a look at what changes made, and correct the setup for the changes.
Here are the errors I am getting without the above env vars ! Slightly more verbose: !
Thanks for confirming, we should add some defaulting logic to this actually in dev mode. Speaking of which do you know if we have a test instance of Algolia, I do not see any on the dashboard.
The only way I was able to finally clear up the errors I was seeing, was to clear my cache for localhost. Before that, I had tried: master the following commands: I was not able to just do a hard refresh of the page (Ctrl + F5). I literally had to go into browser history and delete out localhost history. Before clearing my cache, I was getting the "Something is not quite right. A report has been generated and the team have been notified." message and seeing the following in the terminal when the main home page loaded. !
Thanks this additional information helps. The secrets were changed (by me) on the which have led the sessions (in the local db on your end) to go stale. The client is sending the session details to the API, the API is also correctly seeing them in the db, but because the key (which encrypted) the tokens in the first place has changed it is erroring out. This is kind of expected. The fix is to purge the cache on the browser (techically you need to purge the db, where the keys are, but clearing the cache should be enough).
Wouldn't the have purged the db?
Nope. It will only "seed" the user collection if it is not present already. It would not create/remove anything else by design.
Should we add something to that purges the local db and then seeds it?
Like I said, this behaviour is intentional. The DB is not a ephemeral entity. It should not be mutated after intial setup.

That is the only way you would catch potential bugs from reaching production. The DX is not the end goal, the production is.
Oh, so because I don't keep my browser cache, it kept requesting a new token?
Yes.
we do have a test instance of Algolia, but I accidentally created it under my account rather than a general team account, so only I have access to it. I'll create a test instance under the team account and create a PR to update the keys in
I am not in favor of adding our keys (although these are client side keys for algolia) to version control. Instead the search feature sould be mocked/disabled in developement.
sure, that sounds good. I think it'll throw errors for now, but there's probably a good way to disable search altogether in development.
Let's mock the search feature. We can test then. What do you guys say?
Hey thank you for all of your help with testing. It's been awesome to see how quickly the test coverage has improved with each of your PRs. I'm all for mocking the search bar. Now that Cypress is in place, it will be good to make sure things like the up and down keys and mouse entering / leaving the dropdown is working as expected. I haven't looked much into it, but it should be possible to pass a mock Algolia response to the component somehow.


Question: # --hints-- <del> The `ownProps` array should include `"name"`. </del> <ins> The `ownProps` array should only contain `"name"`. </ins> ```js <del> assert(ownProps.indexOf('name') !== -1); </del> <ins> assert.deepEqual(ownProps, ['name']); </ins> ``` <del> The `prototypeProps` array should include `"numLegs"`. </del> <ins> The `prototypeProps` array should only contain `"numLegs"`. </ins> ```js <del> assert(prototypeProps.indexOf('numLegs') !== -1); </del> <ins> assert.deepEqual(prototypeProps, ['numLegs']); </ins> ``` You should solve this challenge without using the built in method `Object.keys()`.

Challenge: Forum: Right now you can pass the challenge using a for loop with no conditionals. for both the presence and absence of properties (includes && !includes). change assert messages from "should include" to "should only contain".
Sounds good to me We could possibly use a deepEqual to make sure there aren't any other properties .


Question: # --hints-- <del> You could have `card_number_reversed = card_number[-1:-5:-1]` within the `verify_card_number` function. Expected `--fcc-actual--` to equal `--fcc-expected--`. </del> <ins> You should have `card_number_reversed = card_number[-1:-5:-1]` within the `verify_card_number` function. Expected `--fcc-actual--` to equal `--fcc-expected--`. </ins> ```js ({

The hint text should read "You should have" instead of "You could have".
This issue is open to first-time code contributors to this repository. The files that you should be updating are: We typically do not assign issues. Instead, we accept the most quality contribution followed by the one that is made first. 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. Happy contributing.


Question: No properties should be added. `Object.keys(Person).length` should always return 6. ```js <del> const person = new Person('Bob', 'Ross'); person.setFirstName('Haskell'); person.setLastName('Curry'); person.setFullName('John', 'Smith'); assert.lengthOf(Object.keys(person), 6); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFirstName('Haskell'); _person.setLastName('Curry'); _person.setFullName('John', 'Smith'); assert.lengthOf(Object.keys(_person), 6); </ins> ``` You should be able to instantiate your `Person` object. ```js <del> const person = new Person('Bob', 'Ross'); assert.instanceOf(person, Person); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.instanceOf(_person, Person); </ins> ``` Your `Person` object should not have a `firstName` property. ```js <del> const person = new Person('Bob', 'Ross'); assert.notProperty(person, 'firstName'); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.notProperty(_person, 'firstName'); </ins> ``` Your `Person` object should not have a `lastName` property. ```js <del> const person = new Person('Bob', 'Ross'); assert.notProperty(person, 'lastName'); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.notProperty(_person, 'lastName'); </ins> ``` The `.getFirstName()` method should return the string `Bob`. ```js <del> const person = new Person('Bob', 'Ross'); assert.strictEqual(person.getFirstName(), 'Bob'); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.strictEqual(_person.getFirstName(), 'Bob'); </ins> ``` The `.getLastName()` should return the string `Ross`. ```js <del> const person = new Person('Bob', 'Ross'); assert.strictEqual(person.getLastName(), 'Ross'); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.strictEqual(_person.getLastName(), 'Ross'); </ins> ``` The `.getFullName()` method should return the string `Bob Ross`. ```js <del> const person = new Person('Bob', 'Ross'); assert.strictEqual(person.getFullName(), 'Bob Ross'); </del> <ins> const _person = new Person('Bob', 'Ross'); assert.strictEqual(_person.getFullName(), 'Bob Ross'); </ins> ``` The `.getFullName()` method should return the string `Haskell Ross` after calling `.setFirstName('Haskell')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFirstName('Haskell'); assert.strictEqual(person.getFullName(), 'Haskell Ross'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFirstName('Haskell'); assert.strictEqual(_person.getFullName(), 'Haskell Ross'); </ins> ``` The `.getFullName()` method should return the string `Bob Curry` after calling `.setLastName('Curry')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setLastName('Curry'); assert.strictEqual(person.getFullName(), 'Bob Curry'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setLastName('Curry'); assert.strictEqual(_person.getFullName(), 'Bob Curry'); </ins> ``` The `.getFullName()` method should return the string `Haskell Curry` after calling `.setFullName('Haskell', 'Curry')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Haskell', 'Curry'); assert.strictEqual(person.getFullName(), 'Haskell Curry'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Haskell', 'Curry'); assert.strictEqual(_person.getFullName(), 'Haskell Curry'); </ins> ``` The `.getFirstName()` method should return the string `Haskell` after calling `.setFullName('Haskell', 'Curry')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Haskell', 'Curry'); assert.strictEqual(person.getFirstName(), 'Haskell'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Haskell', 'Curry'); assert.strictEqual(_person.getFirstName(), 'Haskell'); </ins> ``` The `.getLastName()` method should return the string `Curry` after calling `.setFullName('Haskell', 'Curry')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Haskell', 'Curry'); assert.strictEqual(person.getLastName(), 'Curry'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Haskell', 'Curry'); assert.strictEqual(_person.getLastName(), 'Curry'); </ins> ``` The `.getFullName()` method should return the string `Emily Martinez de la Rosa` after calling `.setFullName('Emily Martinez', 'de la Rosa')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(person.getFullName(), 'Emily Martinez de la Rosa'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(_person.getFullName(), 'Emily Martinez de la Rosa'); </ins> ``` The `.getFirstName()` property should return the string `Emily Martinez` after calling `.setFullName('Emily Martinez', 'de la Rosa')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(person.getFirstName(), 'Emily Martinez'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(_person.getFirstName(), 'Emily Martinez'); </ins> ``` The `.getLastName()` property should return the string `de la Rosa` after calling `.setFullName('Emily Martinez', 'de la Rosa')`. ```js <del> const person = new Person('Bob', 'Ross'); person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(person.getLastName(), 'de la Rosa'); </del> <ins> const _person = new Person('Bob', 'Ross'); _person.setFullName('Emily Martinez', 'de la Rosa'); assert.strictEqual(_person.getLastName(), 'de la Rosa'); </ins> ``` # --seed--

The test variable here should be prefaced with an or something like that to prevent colliding with a common user variable name. Valid code should pass No response All No response_
From the individual tests: can be moved to the . This alone would be enough to make it not affected by such collision. Additionally using underscore after that, while not necessary also would be fine.
This is entirely user written code above. The user's choice of variable name conflicts with the variable name in the test suite, so we need to use a less common variable name in the test suite. A leading underscore is how I've seen that done in most challenges.
Whoops - this one was my fault haha.
To confirm the fix: Within the , all instances of the variable in the tests should be changed to .
I have this minor fix Please review Thanks


Question: return cert.show ? ( <Fragment key={cert.title}> <Row> <del> <Col sm={10} smPush={1}> </del> <ins> <Col className='certifications' sm={10} smPush={1}> </ins> <Link to={`/certification/${username}/${cert.showURL}`}> <Button block={true}

!
Could you give a link to the page as then it might be easier to solve the issue?
This should be the case on the user's profile page. You can reproduce by setting the certificate keys to true in the user object.
I could work on this!
I am already working on it.
Thanks for letting me know!
a reasonable fix would be to give the grid that contains the profile a class and on the css, change the button under that class and have . you will end up with something like this. here it is on small and large screens <img width="681" alt="screen shot 2019-02-22 at 2 18 10 pm" src="https://user-"<img width="1095" alt="screen shot 2019-02-22 at 2 17 53 pm" src="https://user-"
Similar solution could be applied to these donate buttons probably. but the selectors should be very specific not to change the styling on other buttons in the platform. <img width="669" alt="screen shot 2019-02-23 at 2 09 14 pm" src="https://user-"<img width="502" alt="screen shot 2019-02-23 at 2 08 51 pm" src="https://user-"
Hey or Can you take this up? just updated us that he will be a bit busy with other things.
I'm on it


Question: Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively. <ins> Your answer should follow this basic structure: ```html <span class="stat">TEXT <strong><span id="VALUE">TEXT</span></strong></span> ``` </ins> # --hints-- You should add a `strong` element in your first `.stat` element.

We still have a high number of campers struggling with the step on how to nest the strong elements inside the existing span elements We should add an example of the syntax so they understand what the markup should look like. html <span class="stat"TEXT <strong<span id="VALUE"TEXT</span</strong</span` 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
Hey! Mind if I pick this up?
This issue to open for contribution, you don't need to ask for permission to work on it. Please be sure you read and follow
It was hard to understand that Instructions. Finally got the clue


Question: <p> We earned the 2019 Platinum Seal of Transparency from Guidestar.org. You can view all our nonprofit's details and download our accounting <del> documents [there](https://www.guidestar.org/profile/82-0779546). </del> <ins> documents{' '} <Link to='https://www.guidestar.org/profile/82-0779546'>there.</Link> </ins> </p> <Spacer />

The markdown text was pasted in directly. As a result, the link to GuideStar doesn't work. <img width="1142" alt="Supportournonprofit_freeCodeCamp_org" src="https://user-"Here's the file:


Question: assert(reRegex.source.match(/1|2/g).length >= 2); ``` <del> Your regex should have two spaces separating the three numbers. ```js assert( reRegex.source.match(/ |s/g).length === 2 || reRegex.source.match(/(s)(?=.*(1|2))/g) ); ``` </del> Your regex should match `"42 42 42"`. ```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: This challenge is not aceepting the regex which is valid and matches all the conditions except one condition because it is checking whether 2 is used in the regex or if is used along with or . So, it does not accept the above regex. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Firefox Browser Version: 83.0 (64-bit) Operating System: macOS 11.0.1 Big Sur If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
Thank you, for taking the time to raise this issue. I can confirm the issue. I suggest the test in question be removed: javascript assert( (/ (/(s)(?=.*(1|2))/g) ); ` There should be no need for it, as the test conditions satisfy the requirements of the instructions. I am opening this to first timers only
I'm fine with removing that test.
I've went ahead and changed this one to start familiarizing myself with the code and hopefully keep contributing. Please tell me if there's any problem.


Question: import { Observable } from 'rx'; import debug from 'debug'; import { isEmail } from 'validator'; <del> import format from 'date-fns/format'; </del> import { reportError } from '../middlewares/sentry-error-handler.js'; import { ifNoUser401 } from '../utils/middleware';

Describe the bug New certificate displays incorrect date. To Reproduce Steps to reproduce the behavior: I can't say I'm really sure of the steps - I claimed the certificate just a few moments ago, and it is still 3 July 2020 local time. The certificate shows "Issued July 4, 2020" however. Expected behavior Certificate earned date should be based on local time? Screenshots ! Desktop (please complete the following information): OS: Windows 10 v. 1909 Browser: Chrome Version: 83.0.4103.116 Additional context The Quality Assurance certification had no such issue.
Is this reproducible locally?
when Date constructor is called on the server-side it outputs date in UTC, right?
timezones are tricky, but the server creates a object and then stores that. There's no timezone information stored with it, so the date sent back is just i.e. the UTC date.
Indeed - timezones are tricky. Thanks for confirming that datetime given back by Node is in UTC. I saw the above code just now. You are absolutely correct I looked at GitHub profile, he lives in USA. Timezone of USA is UTC -4 hours. What I think might be the case here is that might have claimed the certificate after 3 July 2020 8:00 PM. Adding four hours to 3 July 2020 8:00 PM brings it in UTC timezone which gives us date of 4 July 2020. Can you confirm this Do you remember at what time you claimed the cert? What do you think about all this
There are 3 time zones (PST, CST - GMT-6, EST ) in the mainland US or 5 times zone if you include Alaska (GMT-8) and Hawaii (GMT-10). It also depends on the time of year, because of DST (Daylight Savings Time).
I am in the Pacific Timezone, which is currently PDT (due to Daylight Savings Time). I claimed the certificate in question at approximately 17:18 PTD, which translates to 00:18 UTC (pushing the time into the next day). This may be the source of that bug.
oh my god. Timezones are actually complex. Amazing - I believe we have found the source of this bug.

IMO, the best solution to this issue will be to append "UTC" to the issued date to make things clear for users. Going after local time will involve getting timezone from users via settings and then querying db for their timezone while claiming cert. This'll be bad in terms of UX as well as perf. So, let's add UTC at the end of issued date... what do you all think?
We should be able to allow users to set a timezone in their user profiles for the correct offset.
Is this in line with what we are wanting: ! ! Or, would something more explicit be necessary?
Something more along the lines of the snippet here:
, Would it be beneficial for a JSON file to be made in the api-server directory, in case the values need to be referenced elsewhere in the platform?
Even if they're only used in one place, it would be better to have the data imported from a separate file. It's just less cluttered that way.
Just so its clear about the implementation, we will need to store the timezone on the user record, and do any computation of the display on the client only.
Just so its clear about the implementation, we will need to store the timezone on the user record, and do any computation of the display on the client only. Thank you, for this clarification. Makes it easier, I suppose.


Question: showFooter?: boolean; isChallenge?: boolean; block?: string; <ins> showCodeAlly: boolean; </ins> superBlock?: string; t: TFunction; }

The page gets stuck and goes blank with you leave the relational database challenges. to 'Start the course' the fCC logo/button in the nav goes blank and nav disappears Page not to go blank. Clicking fCC logo should go to /learn No response Same on Chrome and Firefox Console errors: <img width="671" alt="Screen Shot 2023-02-16 at 11 44 19 AM" src="https://user-"


Question: For the checkbox `input`, both the `id`, `name` and `value` attributes should be set to `"location"`. <del> Below that `input` element, add another `label` element with the text of `Reputation` and the for attribute set to `"reputation"`. </del> <ins> Below that `input` element, add another `label` element with the text of `Reputation` and the `for` attribute set to `"reputation"`. </ins> For the checkbox `input`, both the `id`, `name` and `value` attributes should be set to `"reputation"`.

There are some small issues that need to be fixed in the following files: optionfor elementsinline"Check your code" String` This looks like something that can be fixed by "first-time" code contributors to this repository. The files you should look at to work on a fix are those linked above. 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.
Hi I'd like to work on this issue. Thanks
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled 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: --- title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset --- ## Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset This is a stub. Help our community expand it. This quick style guide will help ensure your pull request gets accepted.

<!-- 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: Link to the guide on the challenge Data Visualization: Data Visualization with D3: Use the and Functions to Find Minimum and Maximum Values in a Dataset is pointing to the wrong place Incidentally, the challenge page uses the d3-max and d3-min in the url while the guide page uses and Add a Link to the page with the problem: Get a Hint button brings the camper to which is 404 - Page not found Correct link is Tell us about your browser and operating system: Browser Name: Mozilla Firefox for Ubuntu canonical - 1.0 Browser Version: 62.0.3 Operating System: Ubuntu 18.04 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
/ If you can guide me to where this file might be located. I can check....
Solution <body<scriptconst positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]] // Add your code below this line const maxX = (positionData, (d) =d[2]); const output = maxX ; // Change this line // Add your code above this line ("body") .append("h2") .text(output) </script</body


Question: # --description-- <del> Add a `range` property which generates a range from `nums`. Remember that you have a `range` function you can reuse here. </del> <ins> Add a `range` property which generates a range from the first number in `nums` to the second number in `nums`. Remember that you have a `range` function you can reuse here. </ins> # --hints--

The instructions for step 103 of the spreadsheet project request that a range be created from an array. The say: My solution (listed below) tries to do that by passing in the first number found in nums and the last number found in nums as arguments to the range function. This solution is not accepted and the hint says: On reading this initially I have no clue what this hint is attempting to say. Does it want the range to span from the first number of the array to the second number only? Does it want the range property to define a function that takes two arguments? I'm really not sure what it wants. After some investigations though it seems that this step wanted the range to be between the first and second numbers of the array. I think this confusion could have been easily avoided if the instructions just said that. Change the instructions to say: numsnums No response N/A No response
One of the tests is checking , so it's clearly intended to use first and second number.


Question: const browser = new Browser(); ``` <del> And use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code: </del> <ins> And use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code. **Note**: `done` is passed as a callback to `browser.visit`, you should not invoke it. </ins> ```js suiteSetup(function(done) {

Setting causes the error Using Or forcing the DNS result order () fixes it. The best I can tell, in newer versions of Node the DNS result order has changed (might have been in v17). We had to fix a different challenge at one point to allow IPv6 IPs. I think this issue is related. Not sure what the best solution is but we might have to update the boilerplate or the challenge text. We can force the result order in the boilerplate if needed. Edit: My best guess why we haven't seen this issue more is because we (at least at one point) forced the engine in and possibly Replit running older versions of Node for a long time. I believe most people will see it locally with new versions of Node and I see it on Gitpod running Node 20. Not to get an error with the code the challenge tells you to use. 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:
:sparkles: Thanks to the community, there's an estimated bounty value of $6.81 USD for a successful merge request of this issue via contributions such as 9.750 STORJ tokens. Happy coding :grinning: Details and T&Cs at
I think updating the challenge text to expect is good.


Question: # --hints-- <del> You should concatenate an empty space to the beginning of your returned value. </del> <ins> You should concatenate a single space to the beginning of your returned value. </ins> ```js assert.match(padRow(1, 1), /^s/); ``` <del> You should concatenate an empty space to the end of your returned value. </del> <ins> You should concatenate a single space to the end of your returned value. </ins> ```js assert.match(padRow(1, 1), /s$/);

Error message: The string is either empty or holds a space. "empty space" and "blank space" in this context is confusing. Clear wording: No response All No response
Opening this up. A PR which resolves this issue will update the messaging to the "single space" text Jeremy proposed above.
<img width="655" alt="Screenshot 2024-06-07 at 3 20 38 PM" src=""Would you like me to change both beginning and end hints to "single space" make it more simplistic? since the answer is: function padRow(rowNumber, rowCount) { return " " + (rowNumber) + " "; }
Yes, we should use the phrase "single space" in all three spots
aye aye captain!


Question: <ins> import { ChallengeFile, SavedChallengeFile } from '../../../redux/prop-types'; export function mergeChallengeFiles( files?: ChallengeFile[] | null, savedFiles?: SavedChallengeFile[] | null ): ChallengeFile[] { if (!files) return []; if (!savedFiles) return files; if (files.length !== savedFiles.length) return files; const sortedChallengeFiles = files.sort((a, b) => a.fileKey.localeCompare(b.fileKey) ); const sortedSavedChallengeFiles = savedFiles.sort((a, b) => a.fileKey.localeCompare(b.fileKey) ); const fileKeysMatch = sortedChallengeFiles.every( (file, index) => file.fileKey === sortedSavedChallengeFiles[index].fileKey ); if (!fileKeysMatch) return files; return sortedChallengeFiles.map((file, index) => ({ ...file, contents: sortedSavedChallengeFiles[index].contents })); } </ins>

Code in the doesn't seem to be evaluated in production for Cash Register project. (Edit)This appear to be related to the code saving / resetting. In development there isn't such issue. Including building production client and serving it. This is actually the only challenge from the new challenges that is using . Old challenges are working fine when using . Both when names start with ` might be somehow deciding factor, but there isn't any other new challenge to check that. After adding function to user code, error moves normally to the next used in test non-defined variable - and then . Steps to reproduce the behavior: (Be logged in, and have previously saved code for project). to solution. Example: tests. errors. Code present in the should be evaluated after the user code, and before running tests. (Edit) When logged out there's different error, or no errors at all(?!). This might be somehow related to saving / resetting code.
Thanks again for the detailed report, You were dead right about the issue: it's due to the fact that saved challenges don't include head or tail (aka and ) and we were just using them in place of challengeFiles (which does have that stuff).
I have marked this as a showstopper seeing as it is affecting camper's ability to complete a certificate project. It would be nice to get the fix in as soon as possible, so the forum isn't filled with support threads for this.


Question:
"Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can click a button to show me a new random quote.", "Bonus User Story: As a user, I can press a button to tweet out a quote.",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ],

Challenge has an issue. Please describe how to reproduce it, and include links to screen shots if possible. Step : "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs." incorrectly to this url: It should link to: Unless that misdirection is meant to be tricky for the student ;)
This is a duplicate of
Kind of. This one is referring to a different page (challenge/zipline), but I did notice that all of the Ziplines have the same bug.
This was fixed ages ago, right? Please close.
This isn't actually fixed. The erroneous link still exists in these ziplines: Maybe it's not an issue because we'll be switching over to the content at soon? But I thought you should know that the issue hasn't actually been fixed yet. Actually, the only reason that it isn't an issue on the beta site is that none of the ziplines seem to link directly to the jquery json page.
This was fixed in prior to the branch being available through Now they seem to have changed how the ziplines look, so it wouldn't be an issue regardless. Since all changes seem to happen on the branch before ending up in production, issues that are fixed in should probably be considered fixed, even though it might be better to merge small fixes like this into production at a quicker rate than what is the current reality.
Thanks for the explanation! That makes sense. I'm not privy to staging, so I didn't realize it had been fixed there.


Question: }; const run = async () => { <ins> await client.connect(); log('Connected successfully to mongo'); </ins> await dropUserTokens(); await dropUsers(); if (args.includes('certified-user')) {

when mongodb is off at dev environment and someone trying to run seed script 'connected successfully to mongo' message displayed 'pnpm run seed' mongo down to run 'pnpm run seed' will see errror message at the terminal but still at the begining - 'connected successfully to mongo' message displayed in case mongodb is not running - you should see Failed to connect to mongo message ! 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
hi i would like to work on this issue
Thanks for the report, and thanks for the offer of help, Anyone is free to work on this, but we recommend new contributors read our contribution guide first:
HI I WOULD LIKE TO WORK ON THIS ISSUE
Hey the is up, can you help me take a look at it? Thanks.


Question: #instructions ol { font-family: 'Lato', sans-serif; } <del> #description ::selection { background-color: rgba(var(--highlight-color), 0.3); } </del>

If I try to select text with my mouse so I can copy/paste it or something - the selected text has the same background as the rest of the page. Making it difficult to see what is selected, and frustrating to try and select, well anything. ! This seems to occur across the entire site. Perhaps it was intentional or something, but I don't think it's a good ux. Note: the text does actually get selected, so you can still copy/paste it. Tested on Chrome and Firefox
Good catch. It'll be this PR: which didn't scope the change to challenge descriptions. I'll put together a quick fix. Edit: nevermind, it's just that has to be passed four values, not two. I don't quite understand how this ever worked.


Question: ## Introduction to the Redux Challenges [Redux](https://redux.js.org/) is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While you can use Redux with any view library, it's introduced here before being combined with React. <del> Improve this intro on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions/front-end-libraries/redux). </del>

Describe your problem and how to reproduce it: 1) Go to: 2) Find this text: "Improve this intro on GitHub." 3) Link to GitHub to improve the intro is broken Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 79 Operating System: Mac OS 10.13.6 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): ! !
I am not even sure why that last sentence is present. I think it is best if it is removed completely from the introduction. If you see anymore links like this, please add them to this issue, so someone can create a PR to fix them all at the same time.
What do you think about removing the link to the redux website (the first word in the intro)
I think for now, we can leave it alone. I think the discussion of external links should be on a separate issue (if there is not already an outstanding issue). I thought I had an open issue at one point about external links. It may have gotten closed at some point (can't remember why).
Hey guys , the same issue is happening in the React and Redux section, please check:


Question:
"
555-555-5555n(555)555-5555n(555) 555-5555n555 555 5555n5555555555n1 555 555 5555
", "Para esta prueba se te presentará una cadena de texto como por ejemplo: 800-692-7753 o 8oo-six427676;laskdjf. Tu trabajo consiste en validar o rechazar el número telefónico tomando como base cualquier combinación de los formatos anteriormente presentados. El código de área es requrido. Si el código de país es provisto, debes confirmar que este es 1. La función debe devolver true si la cadena de texto es un número telefónico válido en los EEUU; de lo contrario, debe devolver false.", "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."  ], "titleIt": "Verifica numeri telefonici degli Stati Uniti", "descriptionIt": [ "Ritorna true se la stringa passata come argomento è un numero valido negli Stati Uniti.", "L'utente può digitare qualunque stringa nel campo di inserimento, purchè sia un numero di telefono valido negli Stati Uniti. Qui sotto alcuni esempi di numeri di telefono validi negli Stati Uniti (fai riferimento ai test per le altre varianti):", "
555-555-5555n(555)555-5555n(555) 555-5555n555 555 5555n5555555555n1 555 555 5555
", "In questo problema ti saranno presentate delle stringe come 800-692-7753 o 8oo-six427676;laskdjf. Il tuo obiettivo è di validare o rigettare il numero di telefono basato su una qualunque combinazione dei formati specificati sopra. Il prefisso di zona è obbligatorio. Se il prefisso nazionale è presente, devi confermare che corrisponda a 1. Ritorna true se la stringa è un numero di telefono valido negli Stati Uniti; altrimenti ritorna false.", "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."  ] }, {

Advanced Algorithm Scripting () Translate the challenge Advanced Algorithm Scripting in Italian
I'll be working on this


Question:
## Description
 Objective: Build a full stack JavaScript app that is functionally similar to this: http://whatsgoinontonight.herokuapp.com/ and deploy it to Heroku.  Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.  Here are the specific user stories you should implement for this project: User Story: As an unauthenticated user, I can view all bars in my area. User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight.

<!-- 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: In some of the take home projects there is a broken link in the description - - which leads to a 404. Add a Link to the page with the problem:
Here is a breakup of the action items (can be done in parallel, by multiple contributors): . we were hoping you could point us in the right direction by helping us with the source code repo link? [ ] This Glitch project can then be published and the challenge updated with the link and the verbiage. [ ] Finally we would also need to point the link for getting started use our standard intro for other projects.
if I have the original challenge link I could start on this.
I would like to work on this .
please let me know if you are still interested in making a pull request for this issue.
Please inform on the status of the work on this issue, otherwise I would like to have a go at it.
I would like to know the status. Do we have the correct link available or not?
What is the original challenge link which attempts to link to?
please let me know once the actual link is confirmed. I would like to work on this issue.
I'm not sure where the original link is. I thought it was in Apis And Microservices in the legacy site, but I can't find it. We may have to re-create this page? It is supposed to let users know how to create a repository and deploy to heroku. For some of these apps, users can also just use glitch.
It has to be somewhere in the history on Github. When using Git, it is not possible to lose content.
I'm not sure the very latest instance of the file, but it's the best I could find. If there's a way to find the latest version, I'd love to know how! Regardless, you might be able to get some inspiration from there, but unfortunately the specifics are all out of date.
That link is in four of the take home project descriptions - I didn't see it anywhere else. Maybe we should just remove that line from them... Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit
Yes please.


Question: **Instructions**: Write a function `selectionSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest. <del> **Note:** We are calling this function from behind the scenes; the test array we are using is commented out in the editor. Try logging `array` to see your sorting algorithm in action! </del> # --hints-- `selectionSort` should be a function.

<!-- 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: The challenge description says there is not a commented out array there I wouldn't know how to change that other than deleting the paragraph entirely Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Google Chrome Browser Version: 87.0.4280.77 Operating System: iOS 14.1 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
Description is wrong. Code placeholder was changed in - test array moved from comment to function call argument, but description stayed same without any edits.
This seems quite reasonable. I will open this up to first timers
An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. 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
I would Like to contribute to your cause i am a first timer and have not yet worked in big project but i want to start by freecodecamp
thank you for wanting to contribute, this issue has already a linked PR. Take a look at other issues with label "first timers only" and "help wanted" that do not have already a linked PR


Question: const mapStateToProps = createSelector( userSelector, isSignedInSelector, <del> ({ email }, isSignedIn) => ({ email, isSignedIn }) </del> <ins> ({ email, theme }, isSignedIn) => ({ email, theme, isSignedIn }) </ins> ); class DonateForm extends Component {

Describe the bug ! The input text on the darkmode version of the donate page () are not readable so you cannot see what you are typing. To Reproduce Steps to reproduce the behavior: to '' with darkmode enabled. on the input labled 'Your Card Number:' and enter some numbers. entered input is not readable as the color of the input text is the same as the background-color of the input. bug applies to the credit card expiration and CVC inputs. ! Desktop (please complete the following information): OS: Win10 Browser Brave/Chrome/Firefox


Question: id: 587d78b1367417b2b2512b09 title: Make an Image Responsive challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD' </del> forumTopicId: 301140 dashedName: make-an-image-responsive ---

<!-- 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 followed along with the video entered the code exactly and the first test fails second test passes the code is correct so the test I think is broke Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: microsoft edge Browser Version: Operating System: windows 10 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
worked in chrome only test I have had trouble with so far
Please use for debugging the code of your projects. If the forum members determine there is nothing wrong with your code, you can request this issue to be reopened. GitHub issues are meant for reporting bugs and not troubleshooting the code in your projects. Thank you for understanding.
not n issue with code issue with test it worked in chrome and not edge test is broken on Microsoft edge
What code did you try on Microsoft Edge? What errors (if any) did you see in the browser's console (not the FCC console)?
I followed the code in the video for help
Please post what you see in your browser's console. Thank you. Also, please post the code you tried.
I notice if I add the following to the first test's testString (when testing locally): I only see the following in Edge vs the following in Chrome:
What version of Edge are you running? and It passes for me in the Chromium-based version which is the only version I have, so I'd like to know what version you are running. Does it give you the same output if you run the log from the browser console? I get the full object when I run it in the console. Not sure where it is getting from, I only see that on the fa icons (animated icons) and in the bootstrap file for the main site. I don't think it should show up in the output/test iframe context. I don't see it in the object when I run the log in the browser console. Side note, not really sure why the test is using getComputedStyle, as far as I know using should be exactly the same. It's a bit shorter and maybe less confusing than mixing Jquery and plain JS.

Or just switching it to only plain JS for all of it.
I tested it using Edge version 44..449.0 on Windows 10 Home. It gives the same from the browser console. On Chrome it works as expected. FYI - When I in the browser console, I see not using Edge. For Chrome, I see .
Well, I can't test it using that version (unless I set up a VM for it). Not sure where it is getting the pixel value from, that seems very odd. I don't understand how set to 100% would ever compute to a pixel value. Using should be the same as using getComputedStyle. Looking at the jQuery source I'm not sure why it wouldn't be the same. Jquery source for reference
Can I take a look at this issue?
sure, go for it.
For these challenges, are the helper-functions ready to be used in the tests? Or, can a simple fix be made like:
That is what it was before So I don't see why not. As for the helper-functions, I don't know anything about that. I'd still like to know why Edge is giving the result it is, but I guess it doesn't matter much.
Well, , you were involved with the current change. Are we better leaving it as is, changing the test to use regex, or change it to what it was before ?
No, the helper functions aren't ready Looks like the method won't work for edge. So yes, probably need to go back to regex here if we want it to work on edge. Here's a modification of something I have used in the past to isolate the styles of a selector... ^ I modified without testing, hoping to get a helper function for isolating styles to the PR for those.
This is still causing problems every now and then. Have we abandoned the support of the older Edge versions (prior to the switch to Chromium), or should we fix this by switching back to a regex?


Question: getValidationStateFor(maybeURl = '') { if (!maybeURl || !maybeUrlRE.test(maybeURl)) { <del> return null; </del> <ins> return { state: null, message: '' }; </ins> } if (isURL(maybeURl)) { <del> return 'success'; </del> <ins> return { state: 'success', message: '' }; </ins> } <del> return 'error'; </del> <ins> return { state: 'error', message: 'We could not validate your URL correctly, ' + 'please ensure it is correct' }; </ins> } createHandleChange = key => e => {

Describe the bug For field in , error state can not be triggered. Warning state will be triggered when an email address with incorrect domain is entered (for example: ). For all fields in , both error and success state can not be triggered. To Reproduce Steps to reproduce the behavior: to http://localhost:8000/settings to fill and to Describe the bug Expected behavior For field in , error state should be triggered instead of warning state. There should only be two states for an email address. Success state is when it is a valid and reachable email address. Error state is when it is an invalid and unreachable email address. For all fields in . Success state is when it is a valid and reachable URL. Error state is when it is an invalid and unreachable URL. Desktop (please complete the following information): OS: Windows 10 1809 Build .832 Browser Latest Chrome Version 77.0.3865.120 (Official Build) (64-bit)
Calling to discuss this from issue . What do you think about this? Are there anything to add or change from the Expected Behavior I described?
the only thing I'm not sure about is 'unreachable'. Do you just mean unreachable because the URL is malformed? Like , for example. If so, then I completely agree. cc
Yes of course. 'Unreachable' is only defined by malformed email format ( valid length, etc) and URL format (protocol, colon, double slash, etc). It is also possible to check the top level domain part against current existing TLD programatically. Other than that, for example checking real email address which is existing should be done by email confirmation / verification.


Question: </div> </section> ## Solution <section id='solution'> ```js //noprotect function primeSummation(n) { <del> // Initialise an array containing only prime numbers let primes = [2]; let result = 2; function isPrime(y, primes) { // Find sqrt(y) const sqrt = Math.floor(Math.sqrt(y)); // Divide y by each applicable prime, return false if any of them divide y for (let i = 0; i < primes.length && primes[i] <= sqrt; i++) { if (y % primes[i] === 0) { return false; } } // At this point x must be prime return true; </del> <ins> if (n < 3) { return 0 }; let nums = [0, 0, 2]; for (let i = 3; i < n; i += 2){ nums.push(i); nums.push(0); </ins> } <del> // For every odd integer, add it to the array if it is prime for (let x = 3; x < n; x += 2) { if (isPrime(x, primes)) { if (x > n) { return result; } else { result += x; primes.push(x); </del> <ins> let sum = 2; for (let i = 3; i < n; i += 2){ if (nums[i] !== 0){ sum += nums[i]; for (let j = i*i; j < n; j += i){ nums[j] = 0; </ins> } } } <del> return result; </del> <ins> return sum; </ins> } ```

Describe your problem and how to reproduce it: The last test for this challenge needs additional time. I'm using optimized version of Sieve of Eratosthenes algorithm but the last case still times out: Here's the link to the code. The solution provided in the challenge's doesnt even pass the third test. I believe the tests are set to timeout after 100ms, if it could be increased to 200ms or 300ms, it should be doable. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 70 Operating System: Windows 10 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
It is caused by babel transform with loop-protect, which is set to 100 ms. Test timeout is set to 5 sec. Will you make a PR to replace a solution in the curriculum? It'll decrease the time of testing in Travis/CI. And in your solution at line 12 is not needed.
Thanks for replying. I'll make a PR updating the solution in curriculum and you're right line 12 is not required, I was trying to optimize the solution more by making the loop skip if that value is already but theres no point since accessing and assigning a value to an array is of anyway. I understand that it'll decrease the CI testing time. But updating the solution in curriculum would also update the test timeout for this challenge? Or something else would also need to be updated? Sorry, just trying to understand. Another quick question: Does the solution only needs to be updated in ? Or all languages? I'll make a PR for english folder but if it needs to be in all others too, let me know.
Update solution does not solve the problem with the test timeout. In addition, we have non-optimal solutions for problems 35 and 47.
Update solution does not solve the problem with the test timeout. Thats what I assumed too. How'd the timeout problem be solved? In addition, we have non-optimal solutions for problems 35 and 47. I'll update the PR with optimal solution of those.
need to increase this timeout:
I reckon changing that would increase for all challenges?

If so, is there a way to only increase for this challenge or others (presuming we find more challenges that require it)?
Problem 35 have 3 wrong assertion tests. I've created a new solution for Problem 35 (current one is wrong) and optimized 47 solution to be 4x times faster. However we'd still need to add additional time. Since the inputs are quite big in both challenges. Shall I update the PR to add correct test and solution for 35 and optimized solution for 47?
Let's do it in separate PRs


Question: <del> .solutions-dropdown a[role='menuitem'] { text-decoration: none; } </del>

contains a single CSS rule: This rule is not needed as the underline of the is already turned off by the component library. Remove Remove the class from
This issue is open for contribution. 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: # --description-- <del> In this project, you will learn the basics of CSS(Cascading Style Sheets) by building a cafe menu. CSS is the language used to style an HTML document. It describes how HTML elements should be displayed on the screen. </del> <ins> In this project, you will learn the basics of CSS (Cascading Style Sheets) by building a cafe menu. CSS is the language used to style an HTML document. It describes how HTML elements should be displayed on the screen. </ins> As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. Every HTML document should have a `DOCTYPE` declaration and `html` element. The `DOCTYPE` tells the browser which version of HTML the document is in. And the `html` element represents the root element which contains all other elements.

There should be a space between "CSS" and "(Cascading Style Sheets)". <img width="579" alt="Screenshot 2024-05-24 at 14 03 12" src="" Fix the typo in the following file:
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: assert(code.match(/</htmls*>/)); ``` <del> Your `html` element should be below the `DOCTYPE` declaration. </del> <ins> Your `DOCTYPE` declaration should be at the beginning of your HTML. </ins> ```js <del> assert(code.match(/(?<!<htmls*>)<!DOCTYPEs+htmls*>/gi)); </del> <ins> assert(__helpers.removeHtmlComments(code).match(/^s*<!DOCTYPEs+htmls*>/i)); </ins> ``` You should have an opening `head` tag.

Several. One example is The hint for this step seems to indicate that the user must add the element below the (there must be at least one new line separating them). Hint: "Your element should be below the declaration.:" So the expected behavior would be that the user will not pass this step until they add the element below the . <!-- Please complete the following information. --- Device: Desktop OS: Linux/Fedora 34 Browser: Firefox Version: [e.g. 22] This is happening for several courses. The regex used for this test is not enforcing the newline between the elements. If this requirement is important enough to be enforced then we should probably come up with one regex that enforces this requirement and use it for all courses.
One possible regex I am using as a solution for this is:
Affected pages: : js 57 assert((/^s<!DOCTYPEs+htmls[sS]<shtmls/gi)); 58 : js 55 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 56 : js 53 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 54 : js 55 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 56 : js 17 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 18 : js 17 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 18 : js 41 assert((/(?<!<htmls)<!DOCTYPEs+htmls/gi)); 42 : js 53 assert((/(?<!<htmls)<!DOCTYPEs+htmls*/gi)); 54
If the regex from is the way we want to go, I'd be happy to start working on it in the pages linked by .
I was eventually going to get around to updating these but please, feel free to step in. My solution above was officially merged into main so I'm assuming that's acceptable to use for these as well.
I'm beginning to wonder if we should even have a requirement that the DOCTYPE be on its own separate line?

I can't seem to find any documentation that says this is required and the W3C HTML validator accepts it without being on a new line. Also, we don't seem to be enforcing separate lines for other types of tags. But the DOCTYPE does need to be the first element on the page, which I don't think we are currently testing for, so I propose we test for that instead and get rid of the separate line requirement.
As far as the tests go, I suggest we stick with this: If the HTML spec can parse it, it is valid, and should be accepted, unless the instructions specifically say, for example, "add a semi-colon at the end of the value" So, as I can see in the spec, there is no requirement for the DOCTYPE and the element to be on separate lines:
Would you agree with me then that instead of testing for DOCTYPE being on a separate line we should be testing that the DOCTYPE is the first element on the page? This brings us back to another I found in which there are JS comments in the code string before the HTML begins: Not impossible to work around, just wanted to make whoever ultimately works on this aware of it.
It wouldnt surprise me if that's the why the test was written that way, because if doctype isnt the first element, how else would you check it's current placement? It would be in relation to the html tag, right?
Ideally, yes. As I mentioned below, we do have a solution to the comment thing, but it is a work-in-progress.
I have submitted a that fixes the source of this issue (css comments before the html in the code string) which if approved will allow us to easily test that the DOCTYPE declaration is the first element in the HTML.
should i close my initial pull request since you said in your pull request that you were going to fix the others once yours gets approved and merged? I dont mind helping update the other docs with the new test once it's approved if you want me to. either way, just let me know !
We've had a couple of reports in the support inbox that the negative lookbehind used in some of these tests is failing in Safari, so it's great that either or (pending update) will take care of that as well. At the moment seems more flexible, and allows valid code to pass without forcing a particular style.

It'll also be good to move away from regex for this type of test.
If __helpers.removeHtmlComments(code) is preferred, we could modify in that direction or accept alternatively.
Yes, is the final PR to put this issue to rest. I did an initial PR for just one course and it has already been merged. is using the same solution, just updating the remaining courses that need it.


Question: "For example: <input type='text' placeholder='this is placeholder text'>" ], "tests": [  "assert($('[placeholder]').length > 0, 'Your text field should have a placeholder attribute.')", "assert(/url/gi.test($('input').attr('placeholder')), 'Your placeholder field should have the value of "cat photo URL".')"   "assert($('input[placeholder]').length > 0, 'Your text field should have a placeholder attribute.')", "assert($('input').attr('placeholder') === 'cat photo URL', 'Your placeholder field should have the value of "cat photo URL".')"  ], "challengeSeed": [ "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",

Adding placeholder tag to the <imgelement rather than the <inputelement validates the "Your text field should have a placeholder attribute." checkbox incorrectly.
Could you provide a screenshot? I'm not quite following "Adding a placeholder tag to the element rather than the element...."
Sorry spaced out and wrote the wrong thing. If you add placeholder tag to the img element rather than the text field the waypoint will say it's correct.


Question: { "matchUpdateTypes": ["minor", "patch", "pin", "digest"], "matchCurrentVersion": "!/^0/", <del> "automerge": true }, { </del> <ins> "automerge": true, </ins> "rebaseWhen": "behind-base-branch" } ],

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved. Error type: Cannot find preset's package (githubwhitesource/merge-confidence:beta)


Question: import PropTypes from 'prop-types'; import { Link, graphql } from 'gatsby'; import Helmet from 'react-helmet'; <del> import { ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap'; </del> <ins> import { Grid, ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap'; </ins> import LearnLayout from '../../components/layouts/Learn'; import FullWidthRow from '../../components/helpers/FullWidthRow';

Describe the bug Unnecessary horizontal page scroll bar. It is not the scrollbar, its the page scroll bar. To Reproduce Steps to reproduce the behavior: to , it does not occur in all pages. for the page horizontal scrollbar (Not the scrollbar). Expected behavior No horizontal scroll bar. Screenshots  Desktop: I have no other env to test. OS: Ubuntu. Browser: chrome, chromium, firefox. Version: not applicable. Additional context This visual problem is generated by: Applied to:


Question: align-items: center; max-width: 960px; margin: 0 auto; <ins> padding: 0 15px; </ins> }

Front end project pages have no margin and hug the window: <img width="370" alt="Screen Shot 2019-08-20 at 9 12 57 AM" src="https://user-"All other pages have a margin I believe: <img width="373" alt="Screen Shot 2019-08-20 at 9 12 48 AM" src="https://user-"I can fix this one
from the screenshots. does adding a padding that way causes a horizontal scroll?
No, I'm pretty sure that's just my firefox being goofy again - that screenshot is from .dev and it shows this at the bottom on my firefox... <img width="319" alt="Screen Shot 2019-08-23 at 7 40 55 AM" src="https://user-"causing the horizontal scroll bar to appear, but it's fine on chrome.
That should get fixed by , unless there's some other stuff overflowing. It just needs
Thinking about it: do you want to make that change in your PR as well, That way you can see if there are any other problems.
Looks like it might not be my firefox - I found that when signed in, it displays the button in the picture above - but when not signed in, the button says "I've completed this challenge" So it's not the margin causing the scrollbar.
looks like that property does fix the scrollbar issue - <img width="292" alt="Screen Shot 2019-08-23 at 8 23 25 AM" src="https://user-"but it's strange that the button displays different text based on authentication


Question: # --description-- <del> Even through you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are <dfn>inline elements</dfn>, which don't appear on new lines. </del> <ins> Even though you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are <dfn>inline elements</dfn>, which don't appear on new lines. </ins> You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to make it clearer. Go ahead and do this to specify this button should submit the form.

<!-- Add a link to the coding challenge with the problem. --freeCodeCamp Page: GitHub Source: At the beginning of the description for Step 42, the text reads "Even through ..." when it should read "Even though ..." ! Device: Desktop OS: Windows 10 Browser: Chrome Version: 100.0.4896.88


Question: All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. <del> Install Helmet version `3.21.3`, then require it. </del> <ins> Install Helmet version `3.21.3`, then require it. You can install a specific version of a package with `npm install --save-exact package@version`, or by adding it to your `package.json` directly. </ins> # --hints--

Challenge: this challenge need instructions on how to actually install the specified version? On if you search for a package it will just give you the latest version. you run it will add the package with the caret in front of the version number but the test does not allow for that. Should the test allow for the caret?
If changing the tests to allow does not cause any of the versioning issues mentioned previously, then we should go with that. Otherwise, we could add a note that the camper should use :
Just bringing this back up: Are we changing the tests, or changing the instructions to be explicit about the versioning?
Personally, I'd say both. Show the npm command for how to install a specific package version and make the test ignore/accept the caret.
I like that. This kind of lesson is so short, I also think it would be useful to add the information about . I am going to open this up for general help
Hi, I do exactly like npm install --save-exact helmet and helmet = require('helmet'); but still not pass the challenge, anyone, please help me, thanks
Hey , Without seeing your code, or being able to test your project, it will be difficult to assist. Please make use of the to open a topic, and provide as much detail as possible. It will be easier to assist that way.
my code: var express = require('express'); var app = express(); const helmet = require('helmet'); { "name": "fcc-infosec-challenges", "version": "0.0.1", "description": "fcc backend boilerplate", "main": "", "scripts": { "start": "node " }, "dependencies": { "express": "^4.14.0", "helmet": "3.21.3" }, "keywords": [ "node", "hyperdev", "express", "freecodecamp" ], "license": "MIT" } and the test result: // running tests helmet version 3.21.3 should be in // tests completed Please help me to solve this. thanks
As mentioned, please use for questions that involve debugging challenge or project solutions. Thank you.


Question: return "Yes"; ``` <del> will return `Yes` only if `num` is between `5` and `10` (5 and 10 included). The same logic can be written as: </del> <ins> This code will return `Yes` if `num` is between `5` and `10` (`5` and `10` included). The same logic can be written with the <dfn>logical or</dfn> operator. </ins> ```js if (num > 10 || num < 5) {

Similar to issue Please also update another step that has the same issue and should get a similar fix: The sentence: "will only return Yes if num is greater than 5 and less than 10. The same logic can be written as:" should be changed to: "This will only..." (adding This is enough to fix it as a reference to the previous code block) And similarly for this step as well: Multiple As described above No response N/A No response
Proposed change: Question - do we use or for string literals?
"yes" i think
Please assign this issue to me i think can fix this and make my first contribution to open source
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled 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.
I have created a pull request, what should i do next ?(It's my first contribution, don't mind my stupid questions please)


Question: # --description-- <del> When the user has a calorie deficit, the `remainingCalories` value will be negative. You don't want to display a negative number in the result string. </del> <ins> When the user has a calorie surplus, the `remainingCalories` value will be negative. You don't want to display a negative number in the result string. </ins> `Math.abs()` is a built-in JavaScript method that will return the absolute value of a number.

Problem: Simple content description error. It says in the challenge description that when the user has a calorie deficit, the remainingCalories will be a negative (less than 0). It is actually the opposite. For example, if I were to input this in the form: The description of the step must say that it will be a negative value if the input is a surplus (above budget). ! 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: The first time setup can take a while depending on your network bandwidth. Be patient, and if you are still stuck we recommend using GitPod instead of an offline setup. <ins> > [!NOTE] > If you are using Apple Devices with M1 Chip to run the application locally, it is suggested to use Node v14.7 or above. You might run into issues with dependencies like Sharp otherwise. </ins> ## Getting Help If you are stuck and need help, feel free to ask questions on the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [the contributors chat room](https://chat.freecodecamp.org/channel/contributors).

Describe the bug I am setting up the freecodecamp platform on my local following the instructions from I get this issue when I run . ! I have tried solutions given in below links: Still no luck. I also tried running the terminal on Rosetta, that also gave the same error. Desktop (please complete the following information): MacBook Air (M1, 2020) 11.4 (20F71)
can someone with a mac confirm this on another device? ?
I checked it yesterday but I didn't get any error. Also the docs suggest you to use Node v14. Could you try once with that version?
Oops. I had tried this on Node v14. My default version is 12, So at the time of creating the issue, it came as 12. Apologies. Here is the actual version.
Can you give some more info on what you've tried?
I forked and cloned the repo into my system. Then ran following commands. Environment: MacBook Air (M1, 2020) 11.4 (20F71) node: v14.16.1 npm: 6.14.12 terminal: iTerm 3.4.8 As suggested in , I went through these steps. I also tried removing the node_modules/sharp and installing it specifically to but no luck. It fails with below error. I might be missing something fundamental here. Not sure.
Did you configure your terminal to use Rosetta or are you using the normal terminal?
It is normal terminal.
Switched the terminal to run on Rosetta, deleted and installed all dependencies. The error is still the same. I verified that the terminal is running on Intel from Activity Monitor. PS: I have another Gatsby Project which has and it is running properly.
Hmm this is strange, I use the normal terminal and I haven't any issues in my M1 Mac. Could you try deleting your clone of FCC and starting again. Also how did you install Nodejs?
I installed NodeJS through NVM. Are you using terminal in rosetta or Apple M1?
Im using M1 terminal. I haven't come across the need to use Rosetta as of yet, so rosetta has not been enabled anywhere at all. Aha I knew I had missed something.

Ok so when I got my M1, which was like a month or so back, I was reading up on Nodejs v14 support for M1 and at that time it was in testing stage as Node had made v15 and up fully support M1 but not v14. Later on a week later, they released a minor update v14.17 which backported support for v8. I think that if you use the v14.17 version you might not face any issue. Also just to be on the safer side, its better if you deleted your local clone of the repo. Also what output do you get when you run in terminal? Here's hoping that it works
Good that you recalled. Updating to node v14.17 worked!! PS: command output Do you think we need to update page for M1 users?
Hey Nice to hear that it worked! I don't think we need to add it in the contributors' guide because of the userbase being so small. Also, Node might update and the instructions could go out of date fast. You can always open a PR and we will review it. Have a nice day and looking forward to your contributions!
Perfect and also I think it would be better to add a small note in the "Troubleshooting" part of the contribution docs.
Added in
I am having the same issue with node v14.18.0
I suggest sticking to Node v14.17.0 for now if you are on M1 Mac.
tried switching too, still doesn't work, Gatsby is working though. Also, I am using a Linux machine


Question: ```yml tests:  - text: The quickCheck function should return a boolean (true or false), not a string ("true" or "false") testString: assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));  - text: quickCheck(["squash", "onions", "shallots"], "mushrooms") should return false testString: assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false); - text: quickCheck(["onions", "squash", "shallots"], "onions") should return true

<!-- 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: The tests call for the function to return or . I ran into a user on the forums that was failing to get the tests to pass because they were returning and as strings, rather than boolean values. I wonder if the instructions should be made a little more specific to clarify that the function needs to return boolean values. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: Version 83.0.4103.61 Operating System: Windows 10 Home v 1909 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
Whilst I can understand the confusion, the general adopted format has been: What is within the code tags is exactly what needs to be returned In other exercises, if the user is asked to return a string, it should be I say should be, because I just encountered another exercise where the test string was not following this format, but it is likely to be fixed.
That format makes complete sense to me. The only reason I bring this up is that I know learning to code can be a frustrating experience for some, and an opportunity to eliminate potential confusion and alleviate some of the self-generated stress seems like a good move.
How about catching this with a test?
I like that idea. It provides a little extra clarity on why the test is failing for the user's code.


Question: "descriptionEs": [ "Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ", "Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",  "jQuery usa selectores CSS para elegir elementos, El selector CSS .clase:nth-child(i) le permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puede usarse un elemento",   "jQuery usa selectores CSS para elegir elementos, El selector CSS .clase:nth-child(i) te permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puedes usar un elemento",  "He aquí cómo le asignarás la clase bounce al tercer elemento de cada pozo:", "$(".target:nth-child(3)").addClass("animated bounce");",  "Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos con la clase target."   "Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase target."  ] }, {

[x] Learn how Script Tags and Document Ready Work [x] Target HTML Elements with Selectors Using jQuery [x] Target Elements by Class Using jQuery [x] Target Elements by ID Using jQuery [x] Delete your jQuery Functions [x] Target the same element with multiple jQuery Selectors [x] Remove Classes from an element with jQuery [x] Change the CSS of an Element Using jQuery [x] Disable an Element Using jQuery [x] Change Text Inside an Element Using jQuery [x] Remove an Element Using jQuery [x] Use appendTo to Move Elements with jQuery [x] Clone an Element Using jQuery [x] Target the Parent of an Element Using jQuery [x] Target the Children of an Element Using jQuery [x] Target a Specific Child of an Element Using jQuery [x] Target Even Numbered Elements Using jQuery [x] Use jQuery to Modify the Entire Page
Checking


Question: .map-challenge-title { margin-bottom: 0.25rem; <del> max-width: 28rem; </del> <ins> max-width: calc(100% - 80px); </ins> } .block a {

Describe the bug Some challenge titles on the map wrap to a new line while the parent width is big enough for them to display on a single line. <img width="818" alt="Screen Shot 2019-08-23 at 8 42 26 PM" src="https://user-"I think it's due to the rule applied to the tags.
The reason for this is because the element has a class which has !
I think that can be removed. I don't see any reason to keep it.
Yeah we can remove the rule as long as we make sure that the removal doesn't affect anything else. Feel free to make a PR for this
I think it might be nice if the effective left and right margins of the titles were the same. Currently, because they're (roughly) what happens is the left margin is larger, because each has its elements indented slightly by . Try and see what you think. Obviously it's a bit of a compromise (a few more titles will wrap), but I think that'll look better.


Question: "name": "Waypoint: Line up Form Elements Responsively with Bootstrap", "difficulty" : 0.062, "description": [ <del> "Wrap both your form's text input field and submit button within a div with the class "row". Wrap your form's text input field within a div with the class of "col-xs-7". Wrap your form's submit button the in a div with the class "col-xs-5".", </del> "Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a "row" element with "col-xs-*" elements withing it.", <ins> "Wrap both your form's text input field and submit button within a div with the class "row". Wrap your form's text input field within a div with the class of "col-xs-7". Wrap your form's submit button the in a div with the class "col-xs-5".", </ins> "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!" ], "tests": [ <del> "assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class "row".')", </del> <ins> "assert($('.row').length > 4, 'Wrap your form submission button and text area in a div with class "row".')", </ins> "assert($('.col-xs-5').length > 0, 'Wrap your form submission button in a div with the class "col-xs-5".')", "assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class "col-xs-7".')" ],

Spelling error: The waypoint requirements say, "You should have three li elements on within your ol element." I think "within" is the better choice here.

Typo on the first test "your text field have the property of being required". Also, the second test passes even if the placeholder text field is empty.
Thanks for the report, the copy has been updated.

This isn't exactly a bug, but in the description for the challenge, there is an image that shows how bootstrap lays out elements on a page. This image is way too small to see or read any of the text in the image, and there doesn't seem to be a good way to get a larger version of the image.
Thanks, we've updated the copy to have the image link to the specific section of the bootstrap website!

One of the requirements are not fulfilled (Wrap your all of your checkboxes inside one div with the class "row".) even though the codes have fulfilled the requirement. Per checking my code 3 times, I know I have fulfilled the requirement. Kindly check and see if this is just an error on my part. Thank you.

<link href='' rel='stylesheet' type='text/css'

That test has a typo, it should tell you to wrap your input field and button in the div (like it does in the instruction text), not the checkboxes. Also, if you wanna show your html, .
Alright! That worked! Thank you very much! :) Should I close this issue now? Newb in Github here.
The "bug" is still present so you can leave it open. If you want to fix it yourself, you can open a pull request. If you look it seems like an easy fix, and you can use the little pencil button at the top to do it all right from within GitHub.
I'm actually lost with Github. Tried opening a pull request but I really don't know where to go. I guess I ll study Github first?
Thanks for bringing this issue up. We've cleaned up the copy!


Question: You should use `console.log()` to print out the result of `inputValues`. Write the code for this inside the `sortInputArray` function. <del> To see the result for the `inputValues` array, log out the `inputValues` array to the console. Then click on the sort button and open up the console. You should see an array of strings like this: </del> <ins> To see the logged `inputValues` array, click on the sort button and open up the console. You should see an array of strings like this: </ins> ```js [ '8', '2', '4', '1', '3' ]

The second paragraph of step 8 in the Number Sorter project is awkwardly phrased. The instructions begin as follows: You should use () to print out the result of inputValues. Write the code for this inside the sortInputArray function. To see the result for the inputValues array, log out the inputValues array to the console. Then click on the sort button and open up the console. You should see an array of strings like this: The second paragraph should really say: To see the logged inputValues array, click on the sort button and open up the console. You should see an array of strings like this: It's clearer than the original text. The 1st and 2nd paragraphs together can flow better together as well since the first paragraph just told us to log the inputValues array (so saying again 'log out the inputValues array' sounds wrong). N/A rewrite the 2nd paragraph with clearer text. No response N/A No response
I can work on this issue.
I will open this up as it sounds like a reasonable change. Please make sure you have read the . When an issue has the label, it is not yet ready for a PR. It must be triaged first.


Question: <ins> footer{ position: absolute; background-color: #E0E0E0; color:#555555; background-size: cover; font-size: .9em; width:100%; margin-top: 5px; padding-top: 40px; } footer b { padding-bottom: 5px; } </ins>

!
I think 'settings ' is better UI, clearer and more obvious for users. Also think 'home' would be better than clicking freeCodeCamp word and icon which doesn't actually look like a button.
I agree. We should have both: a user photo and settings link - both of which will point to the settings. Is this something you'd be interested in helping us implement?
I'd be happy to but I've got a bunch on at the moment so might be a few weeks before I get a chance to look at it. I've it to my to-do list but in the meantime anyone else can pick it up. I'll add a comment if I start working on it.
I would appreciate it if someone told me what I should do and the progress of this issue.
Are you still interested in helping tackle this issue? I think we could add both a "home" button (which would take them to the "welcome page" to the navigation, and a "settings" link to the left of their photo (both the photo and the "settings" link would redirect them to /settings).
see my email - however for this issue I think I saw something being done in another PR which has changed the navs - www, learn and settings are all now different
Yes - we're trying to make the navigation universal across different services. We will add the settings button to the nav when we do so.
Hey there, is this issue still up for grabs? Also, are the requirements still as defined in It seems like it might have changed a bit from reading the conversation above. Thanks!
pointed out to me that we have a number of different navigations. I was wondering if you would be interested in a complete nav redesign to make it more comprehensive and more user friendly?
What is the current of this issue? Can I be of any help?
Thanks for your patience. We want to build a universal navigation component that exists on every page - including the Guide and Learn. Rather than add a ton of buttons up top, we want to add a footer that has links to all the various pages currently linked from The main problem with having a footer is that the curriculum view has 3 independently scrolling elements. Would you be interested in taking a crack at designing this? And We would welcome your help as well if you're interested in collaborating on this.

I made a quick pen at one point that I thought might be a good design to implement or build on... - basically just took all the parts we have on various pages and put them together.
Here's a list of what we might want in a footer.
I suggest finalizing the links that we need to include in the footer and then start working on the footer component. here is a link to bootstrap official sticky footer template: for large number of links, It is the industry standard to group the links for the footer. so we probably need to think of that. here are some examples: khanacademy: <img width="1234" alt="screen shot 2018-12-26 at 7 07 05 pm" src="https://user-"Udacity: <img width="1216" alt="screen shot 2018-12-26 at 7 07 43 pm" src="https://user-"EDX: <img width="1192" alt="screen shot 2018-12-26 at 7 08 12 pm" src="https://user-"Slack: <img width="1304" alt="screen shot 2018-12-26 at 6 59 48 pm" src="https://user-"
Any ideas for resolving the 3 scroller issue Qunicy mentioned? I think if we had only one scroller, the user had to scroll to the bottom of the page anyway to get the footer. Right now, i get a pretty similar behavior. when I have my cursor on a scrolling component and scroll to the end I am able to go where the footer component would be. So I don't think it is a major issue because the behavior is similar.
I like the simplicity of Khan Academy's footer, with it's mission statement and call to action on the side: freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-) Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world. Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can .

Columns: Our Nonprofit Our Community Our Learning Resources
Here is a quick pen. any thoughts?
This looks great! Very nice clean design, good use of whitespace, and good responsivity.
I have a working footer, and as Qunicy mentioned it does affect the user experience when placed under three scrolling divs. here are some solutions. the separating the columns separating the three panels so campers have something to grab onto to scroll the whole page rather than individual panels; a an expandable fixed bar at the bottom. a sticky expandable small footer at the bottom. removing the footer on this page. Let me know about your feedback so I could proceed with finalizing the footer. Thanks P.S there are other issues with the UI's grid system and markdown that affects the footer implementation. I addressed them in a separate issue.
There's already a lot going on in this area. More scroll bars seems like clutter and possible confusion... I like the expandable option(s) or... the footer within the lesson panel?
Thanks that is definitely an option. we should see how it would like in action. I also like the small expandable option. so if it does get in the way of the user, at least it is a small distraction. I included a gif of the current state of the footer in different screens. let me know what you think. btw, how does the style and the color look? !
Looks good, I was thinking more of a green background to match the nav, but the gray and green buttons look good... might want to get Quincy's opinion there. And actually, that looks pretty good just putting it at the bottom of the other panels... the scrollbar is hidden until you scroll down - I suppose it might be different on other browsers. It could maybe use some white space or something to separate it from the lesson panels a little. But overall, it looks real good - nice job!
I want to be an active participant in designing the footer but as you know I am presently inactive in the community. Fortunately, I landed here while I was looking at the issues. I want to share some ideas on this. Amazing work there . I am a big fan of GitHub's footer! We should do something similar. We should put the full footer only on the main homepage.

Few primary links may be put on the authorized user's welcome page. Some screenshots will clear the design I have in mind. ! ! ! ! And I am totally against putting footer on the platform. Before making any UI change we should ask ourselves "As a camper will it improve my learning experience?". Putting footer on platform will not. Presently, we have a lot of scrollbars and buttons on learn platform and putting footer there will conjust things up more. So, no footer on is the way we should be going :)
thanks for the valuable input. That is the industry standard to implement footers. So ideally the footer component will receive some props depending on the page that the user is visiting and output a custom footer. Let's wait for output to see which direction he would like us to pursue.
Nice design of the footer. I was wondering if for the social media part(FB, twitter, medium, Youtube etc.) we could change it to logos.
That looks solid! Rather than simplify the footer as GitHub has done, I propose we keep it the same everywhere so people don't have to adapt to the fact that the footer changes from page to page. We want to keep our navigation up top the same on every page, too. Regarding having the footer on Learn - we do eventually want to do this, but we need to figure out how. As pointed out, with the current multi-pain scrolling, having a footer would be a pain. Let's worry about that later, and focus instead on creating a common component we can use on all the non-learn pages. Since you've already got a working design of the footer, are you interested in tackling this?


Question: challengeType?: number; completedDate: number; challengeFiles: ChallengeFileType[] | null; <ins> // TODO: remove once files->challengeFiles is refactored files?: ChallengeFileType[] | null; </ins> }; // TODO: renames: files => challengeFiles; key => fileKey; #42489 export type ChallengeFileType =

When trying to view a JS solution, the following error appears in dev, explaining the issue in production. It seems we followed the expected prop-types too early (ref: ). The object is still an object literal. Reported on forum:
I have the same problem as I said in the forum, the bottom error says it responded with 404 to the request for the certification on JS algorithms and data structures. Seems like there's an issue with the backend reaching that certification. !


Question: "Largest int from concatenated ints" ], [ <del> "5a23c84252665b21eecc7edd", </del> <ins> "5e4ce2b6ac708cc68c1df25e", </ins> "Last letter-first letter" ], [

<img width="428" alt="Screen Shot 2020-03-26 at 8 07 49 PM" src="https://user-"The rosetta code challenges are all in alphabetical order except those first few. I did some digging and found that regenerated some mongo ID's for the challenge files. But it looks like those ID's we're never updated to match in the . I'm assuming that's the problem. And strangely I can't find them when I search my local DB - This may cause some issues if someone tries to submit one of these - not sure. Edit: that first link is actually to a commit and not a PR - with that commit Seems like there should be a test for this.