Question: .btn-invert { background-color: #fff; color: #006400; <del> } </del>  No newline at end of file <ins> } </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: editorDidMount={editorDidMount} editorWillMount={editorWillMount} onChange={onChange} <del> options={options} </del> <ins> options={{ ...options, folding: !hasEditableRegion() }} </ins> theme={editorTheme} /> </span>

Steps to reproduce the behavior: on toggle button(code folding) on line 36 of the code editor (check screenshots) error no idea ! ! <!-- Please complete the following information. --- Device: Laptop OS: Windows 10 Browser: firefox Version: 98.0.1 (64-bit) <!-- Add any other context about the problem here. --
The UI is designed with the assumption that the editable region is visible and will be surrounded by the instructions and the Check Your Code button. With the editable region hidden the UI will look quite confusing. I think the best solution would simply be to disable folding for project steps. Folding is an editor option, , so we can disable it.
I'd be in favour of that solution. Should just be a matter of adding to this editor options object right?
I think so, yeah. We could make it conditional: false if there's an editable region and true otherwise. That might be nice if you're working on a project using the multifile editor, since they can be quite large and don't have editable regions.
I'll go ahead and open this one up for contribution then


Question: "assert.deepEqual(drawer(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]), [["QUARTER", 0.50]], 'message: drawer(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]) should return [["QUARTER", 0.50]].');", "assert.deepEqual(drawer(3.26, 100.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]), [["TWENTY", 60.00], ["TEN", 20.00], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.50], ["DIME", 0.20], ["PENNY", 0.04]], 'message: drawer(3.26, 100.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]) should return [["TWENTY", 60.00], ["TEN", 20.00], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.50], ["DIME", 0.20], ["PENNY", 0.04]].');", "assert.deepEqual(drawer(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), "Insufficient Funds", 'message: drawer(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return "Insufficient Funds".');",  "assert.deepEqual(drawer(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1.00], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), "Insufficient Funds", 'message: drawer(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1.00], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return "Insufficient Funds".');",  "assert.deepEqual(drawer(19.50, 20.00, [["PENNY", 0.50], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), "Closed", 'message: drawer(19.50, 20.00, [["PENNY", 0.50], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return "Closed".');" ], "MDNlinks": [

The instinct on this bonfire is to total up all the change in the drawer to determine whether this is greater than the amount required. This will, however, miss the case where you don't have sufficient lower denominations to make change. In this case, we have a total of 2.50. A test should be written to check for a return value of 'Insufficient Funds' in this case.
I agree, I notice this today so it's still hasn't been resolved. I tested one where I was short two pennies... should I just give the customer back a nickel? ha! FYI that I created an "if" statement at the end that if the amount due doesn't equal zero, then it returns "Insufficient Funds" instead of the array of denominations.


Question: key={hit.objectID} > {noHits ? ( <del> <NoHitsSuggestion title={noHitsTitle} /> </del> <ins> <NoHitsSuggestion handleMouseEnter={handleMouseEnter} handleMouseLeave={handleMouseLeave} title={noHitsTitle} /> </ins> ) : ( <Suggestion handleMouseEnter={handleMouseEnter}

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:
<SectionHeader>Privacy Settings</SectionHeader> <FullWidthRow>
  The settings in this section enable you to control what is show on{' '}   The settings in this section enable you to control what is shown on{' '}  your freeCodeCamp public portfolio.

There is also a button to see what data we hold on your account
  <ToggleSetting action='Make my profile completely private' explain={

Once we've built the JSON we want to output, I believe we can just use Pug like this for the button to initiate the file download:


Question:
"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Recibir datos de Geo-localización", "descriptionEs": [ "Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ", "El navegador puede obtener la longitud y latitud actual de nuestros usuarios.", "Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ", "Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud", "Aquí hay un código que hace esto:", "if (navigator.geolocation) {", "  navigator.geolocation.getCurrentPosition(function(position) {", "    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);", "  });", "}" ]  } ] }

[x] Trigger Click Events with jQuery [x] Change Text with Click Events [x] Get JSON with the jQuery getJSON Method [x] Convert JSON Data to HTML [x] Render Images from Data Sources [x] Prefilter JSON [x] Get Geo-location Data
Trabajando en esta


Question: "tests": [ "assert($('ul').length > 0, 'You should have an ul element on your webpage.')", "assert($('ol').length > 0, 'You should have an ol element on your webpage.')",  "assert($('li').length > 5, 'You should have three li elements on within your ul element.')", "assert($('li').length > 5, 'You should have three li elements on within your ol element.')"   "assert($('li').length > 5, 'You should have three li elements within your ul element.')", "assert($('li').length > 5, 'You should have three li elements within your ol element.')"  ], "challengeSeed": [ "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",

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: FormGroup, ControlLabel, Button, <del> Col </del> <ins> Col, Row </ins> } from '@freecodecamp/react-bootstrap'; import Helmet from 'react-helmet';

<img width="616" alt="Screen Shot 2019-10-01 at 3 26 24 PM" src="https://user-"This is a picture of my own private profile locally, seems like it should say something like "You have not made your profile public" instead of "mot01 has not made their profile public" And as I'm typing this, I'm wondering if a profile should render completely if it's theirs, even if it's not public - there's no way for a user to see what their profile would look like if they don't have it public.
That does look better. The next sentence should be something like "You need to change your privacy settings in order for other people to view your profile". So, they should be able to preview their public profile, basically? Sounds good. If going that route, it would be good to emphasise (even more than currently) that their preview is not public. It wouldn't be good if people went to their preview, saw that it looked right and didn't notice that they were the only people that could see it.
Yes to this, please open a PR. It seems to have been an oversight. I think it's fair to leave the warning on their own pages while showing this page in that case, which means we may need to update the copy for them.
Can you clarify what you want here I'm not sure I understand - do we want to keep the page how it is, and just change the two sentences? Or do we want to display their private profile for them?
Yes. Sorry about being vague last time. I thought about this a little more and I think we should show the users their own profile only when they are signed in. Here is what we should achieve at the end of the day: profiles which are public are visible by default. settings button is only available if the user is on their own profile page. who are not signed in and are visiting profiles which are not public and are not their own are shown the current notice and warnings: ! who are signed in and are visiting their own private profiles are shown the same notice as the above screenshot in point 3 with the verbiage stating "You" and the settings button available. The rest of the their profile is visible as a preview.

So, there'd be a button on their private profile labelled 'Preview profile' and a label 'preview how your profile would look if you made it public'. Clicking that would take them to, say, which shows the preview (and a notice saying that it's currently private). Something like that?
Nope, we do not need a new route. Their profiles can be rendered just below the notice like so: ! Here is the copy: You have not made your profile public. You need to change your privacy setting in order for your profile to be seen by others. This is a preview of how your profile will look when made public.


Question: ```yml question: <del> text: 'What type of HTTP is request is usually used to access a website?' </del> <ins> text: 'What type of HTTP request is usually used to access a website?' </ins> answers: - 'POST' - 'GET'

Describe your problem and how to reproduce it: Not Major: The sentence grammar should read: What type of HTTP request is usually used to access a website? Currently reads: What type of HTTP is request is usually used to access a website? Add a Link to the page with the problem:


Question: ROLLBAR_CLIENT_ID='post_client_id from rollbar dashboard' ALGOLIA_ADMIN_KEY=123abc <del> ALGOLIA_APP_ID=ACDEFG ALGOLIA_API_KEY=123abc </del> <ins> ALGOLIA_APP_ID='Algolia app id from dashboard' ALGOLIA_API_KEY='Algolia api key from dashboard' </ins> AUTH0_CLIENT_ID=stuff AUTH0_CLIENT_SECRET=stuff

Is there any reason not to put the real and in ? I reflexively put in a dummy key when I set this up, but now that I revisit this, that seems like a mistake.
Yes, actually it broke the .dev build unsurprisingly , I think noticed it and reported in the team chat. My bad for not catching this previously. The real fix is to ignore and move ahead when the keys are not available are default. We do this with google application credentials.
Oh, I assume it broke the build because .dev isn't using I didn't think of that... So, we should implement the fix and add the public keys to , right?
I was thinking something more along the lines of (example from api-server): I would try to avoid hundreds of contributors hitting the indexes locally. Ideally people should get their own keys. While the key and index is public, it's still not recommended to hit it?
As for the production keys, it's actually fine because the build should fail. I have since the keys in the build pipeline.
One thing: if we don't want contributors spamming search (fair enough!) I think there should be some docs that let people know what's what. Either that search isn't available in development or the steps they need to take to make it work.
I agree. We should add some docs on getting keys, or perhaps creating a test index and sharing that instead


Question: // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment videoId={videoId} /> <del> <i> <a href={ 'https://www.youtube.com/timedtext_editor?action_mde_edit_form=1&v=' + videoId + '&lang=en&bl=watch&ui=hd&ref=wt&tab=captions' } rel='noopener noreferrer' target='_blank' > {t('learn.add-subtitles')} </a> . </i> </del> </div> </Col> <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Affected page Add a Link to the page with the problem. To Reproduce Steps to reproduce the behavior: to the video text "Help improve or add subtitles" is obscured by the video Expected behavior Either this text should be visible or the code should be removed. Screenshots The text is underneath this corner of the video. !
YouTube doesn't allow anymore for crowd sourcing subtitles If we don't have a different alternative it should be to remove the improve subtitles link for that challenge brings to a 404 page, I imagine all the others too if maybe there is a different service that allows for crowdsourcing subtitles the link could be updated (and the text made visible)


Question:
} </style>

Quincy Larson

@ossia

We need to replace all images and audio samples for the legacy content with the ones that were just to our freeCodeCamp cdn. Here are all of the files that will need to be updated Here are all of the new asset links


Question:
} </style>

Quincy Larson

@ossia

All links in the english curriculum need to be replaced. This is the last of the S3 links Here are the new CDN links that should be used instead multiple 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


Question: .modal-dialog { .modal-content { background-color: @gray; <ins> .btn-success, .btn-danger { background: #FFFFFF; } </ins> } .modal-header, .modal-footer {

<!-- freeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- NOTE: If your issue is CodePen Project / Test Suite related, please open it using the below URL instead --<!-- --My Profile -Update My Settings -Reset Progress/Brownie Points <!-- Describe below when the issue happens and how to reproduce it --The confirmation popup window, the text is not readable. Either the background is too dark because its in dark mode or the buttons should be filled in and the text be in white <!-- Describe your workspace in which you are having issues--Browser Name, Version: Operating System: FireFox 57.0 (64-bit) and Chrome Version 63.0.3239.84 (Official Build) (64-bit) Mobile, Desktop, or Tablet: Laptop Windows 10 Professional 64-bit <!-- If relevant, paste all of your challenge code in here --<!-- Add a screenshot of your issue --!
Fixing this with . I'll be waiting for your review.


Question: assert.equal(document.querySelector('img')?.id, 'logo'); ``` <ins> You should give the `img` element an `alt` attribute of `freeCodeCamp`. ```js assert.equal(document.querySelector('img')?.alt, 'freeCodeCamp'); ``` </ins> You should give the `h1` element the text `HTML/CSS Quiz`. ```js

[X] The "CSS" and the have the same value. This is affecting screen reader users since this involves an input and associated label. [ ] The logo in the upper left needs alt text. I would suggest it just be "freeCodeCamp". A lot of them. N/A Resolved Add alt text to the logo. Do we need to add an extra step for this or can we just add it to ? 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
Seeing as the logo is non-functional, do we want the alt to be null? ? If it does require an , then this should get its own step, and a clear description as to why it needs one should be given. I suggest changing the of the (and associated ) to .
Per , the logo does require alt text. Functionality isn't the deciding factor here, it's if the image conveys information (i.e. is not purely decorative), which this image clearly does. Do we want to split this off into its own issue if we are going to create a new step?
I would say yes, but it is not fun to deal with the merge conflict, when two PRs are opened at the same time.
The logo still needs an alt text. The logo is introduced in step 7: That step should be updated to instruct campers to give the an alt text of . The seed code in all subsequent steps should be updated to include that new attribute.
hey may i work on this issue? if so please assign it to me
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: .then(checkFilesErrors) .then(files => ({ challengeType: challengeTypes.html, <del> build: concatHtml({ required: finalRequires, template, files, theme }), </del> <ins> build: concatHtml({ required: finalRequires, template, files }), </ins> sources: buildSourceMap(files), loadEnzyme }));

I did not see anyone raising this issue, but I don't think the background of the preview in default or night mode should be anything other than white unless the coding exercise specifically changes the background to something else. The preview should be exactly what you would see in a browser. In almost all the challenges, the background would be white. !
I share your concerns The reason we changed the color of the display is that a white display is discomforting to the eye on night mode when everything else is dark. so we injected some styles to harmonize the view in general. That convention was carried over to light mode.
It might be better to default to white in light mode, same as the editor. As for night mode, some of the css challenges might need some changes to look reasonable in both modes. For instance, in night mode, looks like this: ! If we change the seed code to it would become ! It would have to be case-by-case, though.
That is a very good point. I will defer this to
Logically, I have to agree with - displaying anything other than what the code in the editor would produce might confuse campers. But it is a little rough on the eyes to have the white background on night mode. And the current theme looks a lot better - so it's a tough call. I scrolled through a number of challenges, and there's quite a few that don't look right with the blue background. So there might be a decent amount of work to go through and fix all of them.
I really like the new theme, but a preview should be a true preview. We want to make this like the real world. Developers working in some kind of night mode on their favorite local editors, still expect to check the "real" result of the code they have written on a browser or in a preview mode in their local editors. The night mode should only apply to the editor or the non-preview part of the FCC site. Anything else is just not realistic.
The preview should be white.
I agree with everyone here on this thread. The preview should remain white. Note that soon the preview won't always be there on the right side "brightening up" the user interface and ruining people's night mode experience.

Soon we will have a single column layout where you the preview only shows up when you click a button to show it, or it loads in a separate tab. - could you update the styling on this so that the preview area is unaffected by our styling?
Definitely.


Question: "assert(telephoneCheck("(275)76227382") === false, 'message: telephoneCheck("(275)76227382") should return false.');", "assert(telephoneCheck("2(757)6227382") === false, 'message: telephoneCheck("2(757)6227382") should return false.');", "assert(telephoneCheck("2(757)622-7382") === false, 'message: telephoneCheck("2(757)622-7382") should return false.');",  "assert(telephoneCheck("555)-555-5555") === false, 'message: telephoneCheck("555)555-5555") should return false.');",   "assert(telephoneCheck("555)-555-5555") === false, 'message: telephoneCheck("555)-555-5555") should return false.');",  "assert(telephoneCheck("(555-555-5555") === false, 'message: telephoneCheck("(555-555-5555") should return false.');" ], "challengeSeed": [

Challenge [Bonfire: Validate US Telephone Numbers] This actually returns false as the test says it should, but the test does not pass. The rest of the tests pass in my actual telephoneCheck() function.
Thanks for the report! It looks like that test was actually testing against the string rather than like the message said. I have submitted a PR to correct this.
ok good so i'm not insane. just mental. +1:

Challenge [Bonfire: Validate US Telephone Numbers] Apparently the test case "telephoneCheck("555-555-5555") should return true." runs twice.


Question: "description": [ "We're done playing with our jQuery playground. Let's tear it down!", "jQuery can target the body element as well.",  "Here's how we would make the entire body fade out:  $("body").addClass("animated fadeOut")",   "Here's how we would make the entire body fade out:  $("body").addClass("animated fadeOut");",  "But let's do something more dramatic. Add the classes animated and hinge to your body element." ], "tests": [

Challenge has an issue. User Agent is: <codeMozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code: The example code should have valid Javascript code but the semicolon at the end is missing. !
(Sorry, used the wrong branch at first.)


Question: description, instructions, translationPending, <del> superBlock </del> <ins> superBlock, block </ins> } }, isChallengeCompleted,

Describe your problem and how to reproduce it: In the challenges/projects that don't use editor, link text at the top in the contain some additional text, for example Challenges that have editor on page don't seem to have this problem. Add a Link to the page with the problem: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): ! !


Question: Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable: ```js <del> Browser.site = 'http://localhost:3000'; // Your URL here </del> <ins> Browser.site = 'http://0.0.0.0:3000'; // Your URL here </ins> ``` Then at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:

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: Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`. <del> Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`. </del> <ins> Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `"72px"`. </ins> # --hints-- The component should render a `div` element.

Currently, the instructions in module happens to be as follows: The instructions tell the users that instead of setting the font size property to a number ( i.e. 72 ), they can optionally set the font size property to but don't inform the user that needs to be enclosed within quotes i.e. needs to be a string value. Furthermore, the word units in the second sentence should be changed to unit because in this particular case, we are just referring to a single unit i.e. . Considering this, I think the instructions of module should be reworded as follows: The instructions in module should be as follows: <img width="517" alt="image" src=""- Device: Laptop OS: macOS 13.0.1 Browser: Chrome Version: 107.0.5304.110
Hello there, I would like to contribute by fixing this issue,I wanted to ask whether I have to be assigned to this issue to contribute of I can start right away? Also, can you please guide me on where can i find that component to contribute? Thanks :)
Oh~ I see. I was so confused why 72px doesn't work. Good thing I found this issue. Thanks for posting
I'm not sure about this. The instructions explicitly mention that this is a JavaScript Object, which at this point in the curriculum is something that campers should be familiar with. I would be okay with something like:
Or maybe just update the literal value shown. Considering the part "or write it as" it should show the actual value to write.
Thanks for the feedback , ! I think having it as looks like a good solution to this issue. Thanks guys for the input. I'll go ahead and create a PR. Cheers!


Question: assert.match(sellWeapon.toString(), /golds*+=s*15/); ``` <del> You should set `goldText.innerText` to gold. </del> <ins> You should set `goldText.innerText` to `gold`. </ins> ```js assert.match(sellWeapon.toString(), /goldText.innerTexts*=s*gold/);

There is a typo in Step 108, the word is single while it should be . Here is the typo in step 102, there is a missing code block in this line it should be this in step 81, there are three missing code blocks in these line they should be If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution, followed by the one that is made first. Happy contributing.
I would like to work on this.
feel free to open a pull request, after you have read .
I have opened a PR please let me know if there are any changes or improvements that needs to be done.


Question: assert(!!el && el.tagName === 'LABEL') ``` <del> Your `#name-label` should not be empty. </del> <ins> Your `#name-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('name-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#email-label` should not be empty. </del> <ins> Your `#email-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('email-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#number-label` should not be empty. </del> <ins> Your `#number-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('number-label')

There are three tests that test for non-empty labels: "Your #name-label should not be empty." "Your #email-label should not be empty." "Your #number-label should not be empty." I think the word "empty" is slightly ambiguous here. These tests appear to be looking for actual text inside the label. But if the user nests an inside the label without text then the isn't exactly empty: The above will fail because there is no actual text in the but I can see how the user would not think the is empty. N/A Adjust the test descriptions so they clarify that text needs to be inside the . Perhaps something like: "Your #name-label should contain text that describes the input". No response N/A No response
Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution, followed by the one that is made first. Happy contributing.


Question: } ${ projectFormValues <del> ?.map(([key, val]) => `${key}: ${val}n`) </del> <ins> ?.map(([key, val]) => `${key}: ${transformEditorLink(val)}n`) </ins> ?.join('') || filesToMarkdown(files) }

In , if a user has submitted a project link, it will display the project's working view instead of the source code. I am not so sure adding the solution links as is currently functioning is helping much. See . Instead of showing the final project link, it would be more useful to show the source code link. In the linked forum post, going to the project results in the "Hmmm.... We Couldn't Reach Your Repl" page. For at least , we should restructure the link (if needed) to show the editable version of the project. For example, if the user submits , then we show . For Codepen projects, this is not an issue, but for Backend projects where the source code is not readily available, we either need to make my above suggested changes or remove this feature for backend challenges/projects. If a user is hosting their own project, then the same issue arises. Unless they submit a GitHub link to their project source code, a final project view does not help us identify problems for the user.
I was recently thinking about this, and just wondered how stable it would be to transform the Camper's URL into the project code URL. If you think this is a decent feature to have, and worth it, then I am willing to throw something together. I will put out a POC, now. Side Note: I have been looking into the fiasco, as some lessons still cause the dents.


Question: "We can use if statements in JavaScript to only execute code if a certain condition is met.", "if statements require some sort of boolean condition evaluate.", "Example:",  " if (1 == 2) {",   " if (1 == 2) {",  "  return(true);", "}", "else {",

Challenge has an issue: ! It looks to me as if this code is missing a closing code bracket:


Question: </Button> ); const ShowMultifileProjectSolution = ( <del> <div className='solutions-dropdown'> </del> <ins> <div> </ins> <Dropdown id={`dropdown-for-${id}-${randomIdSuffix}`}> <Dropdown.Toggle className='btn-invert'> {viewText}{' '}

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: } .reflex-layout.reflex-container.vertical { <del> width: 100%; </del> margin: 0 18px; }

!
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: `bob instanceof Person` should return `true`. ```js <del> assert.deepEqual(bob instanceof Person, true); </del> <ins> assert.deepEqual(_test_bob instanceof Person, true); </ins> ``` `bob.firstName` should return `undefined`. ```js <del> assert.deepEqual(bob.firstName, undefined); </del> <ins> assert.deepEqual(_test_bob.firstName, undefined); </ins> ``` `bob.lastName` should return `undefined`. ```js <del> assert.deepEqual(bob.lastName, undefined); </del> <ins> assert.deepEqual(_test_bob.lastName, undefined); </ins> ``` `bob.getFirstName()` should return the string `Bob`. ```js <del> assert.deepEqual(bob.getFirstName(), 'Bob'); </del> <ins> assert.deepEqual(_test_bob.getFirstName(), 'Bob'); </ins> ``` `bob.getLastName()` should return the string `Ross`. ```js <del> assert.deepEqual(bob.getLastName(), 'Ross'); </del> <ins> assert.deepEqual(_test_bob.getLastName(), 'Ross'); </ins> ``` `bob.getFullName()` should return the string `Bob Ross`. ```js <del> assert.deepEqual(bob.getFullName(), 'Bob Ross'); </del> <ins> assert.deepEqual(_test_bob.getFullName(), 'Bob Ross'); </ins> ``` `bob.getFullName()` should return the string `Haskell Ross` after `bob.setFirstName("Haskell")`.

A user can fail with correct code because the tests secretly rely upon global variables accessible to the user. This code fails because the user has the correct solution but deleted the instantiation of the object. Tests should instantiate any data they need. We should update the seed code to We should then add and modify the test suite to use instead of . No response All No response
Hello, Just to clarify, did you want to add in the user code block? Because I noticed when I attempted to reproduce the bug you encountered that two test cases still passed, despite not being initialized in the user's code. I checked the lesson's markdown file and found out that those two test cases did have their own initialized. I was thinking of adding to all the test cases instead. For reference, here's the code for one of the test cases that still passed, despite the bug.
Those tests initiate their own values so they are fine. I'm talking about the tests that fail if users modify their seed code to not have the object initialization. The new variable would go into a new --after-user-code-- part; that's not currently present. Just adding this new variable inside of the seed creates the exact same problem. Note - this issue isn't marked as ready for contributions yet. Maybe we should review if the tests logic too to see if they are independent
Opening this up for contribution.
Hi assign this issue for branch bugfix/. I have resolved it, need to create PR for same
We don't assign issues. The first PR that fully covers the issue will be accepted.
Hi ok !! I have raised PR . thanks for reply.


Question: ### --feedback-- <del> `There are` is used for plural nouns, and `bank` is singular. You’ll learn about there are in the next few lessons. </del> <ins> `There are` is used for plural nouns, and `bank` is singular. You’ll learn about `there are` in the next few lessons. </ins> ---

needs to be wrapped in backticks ( ``) in the first sentence needs to be wrapped in backticks. Here also needs to be wrapped in backticks. 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 the 3 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.


Question: ## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution: ```javascript <del> function rot13(str) { // Split str into a character array return str.split('') // Iterate over each character in the array .map.call(str, function(char) { // Convert char to a character code x = char.charCodeAt(0); // Checks if character lies between A-Z if (x < 65 || x > 90) { return String.fromCharCode(x);  // Return un-converted character } //N = ASCII 78, if the character code is less than 78, shift forward 13 places else if (x < 78) { return String.fromCharCode(x + 13); } // Otherwise shift the character 13 places backward return String.fromCharCode(x - 13); }).join('');  // Rejoin the array into a string } </del> <ins> function rot13(str) { // Split str into a character array return str.split('') // Iterate over each character in the array .map.call(str, function(char) { // Convert char to a character code var x = char.charCodeAt(0); // Checks if character lies between A-Z if (x < 65 || x > 90) { return String.fromCharCode(x);  // Return un-converted character } //N = ASCII 78, if the character code is less than 78, shift forward 13 places else if (x < 78) { return String.fromCharCode(x + 13); } // Otherwise shift the character 13 places backward return String.fromCharCode(x - 13); }).join('');  // Rejoin the array into a string } </ins> ```  ![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") Run Code  ### Code Explanation:

Describe your problem and how to reproduce it: First Issue: The Basic solution uses call() function but doesn't include any reference to it. Second Issue: The Basic solution doesn't work when you use it as a solution for the challenge. You get the following error on the beta site: I guess setting to fixes this issue. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Mozilla Firefox Browser Version: 66.0.5 Operating System: Windows 10 One more thing. The error generated on the old site is helpful whereas the one on the new site isn't. Probably something to look at.
That is a valid point regarding the error message, but that is a different issue related to how the challenge tests are ran. I have gone ahead and created a PR () to address the solution in the Guide, but the last issue you mentioned will have to be discussed in a separate issue (feel free to create it if you have the time). I could not find any outstanding issues regarding why this does not show the error "assignment to undeclared variable x" which does show in the actual browser console. Are errors like this being suppressed on showing in the fake console for any reason?


Question:
"assert($("p").length > 1, 'message: You need 2 p elements with Kitty Ipsum text.');", "assert(code.match(/
/g) && code.match(/
/g).length === code.match(/<p/g).length, 'message: Make sure each of your p elements has a closing tag.');", "assert.isTrue((/Purrs+jumps+eat/gi).test($("p").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');",  "assert(Number.parseInt($("p:eq(0)").css("font-size"), 10) > 15 && Number.parseInt($("p:eq(1)").css("font-size"), 10) > 15, 'message: Give elements with the p tag a font-size of 16px.')"   "assert(Number.parseInt($("p:eq(0)").css("font-size"), 10) > 15 && Number.parseInt($("p:eq(1)").css("font-size"), 10) > 15, 'message: Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.');"  ], "challengeType": 0, "nameEs": "Cambia el tamaño de fuente de un elemento.",

Challenge has an issue. User Agent is: <codeMozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code:
Hmm, I can't repro this. Do you have your browser zoomed in at all? Have you tried any other browsers?
Hey Itegman, Thanks for the response, yes my browser was size at 75%. After setting zoom to 100% the challenged passed.
Closing as a duplicate of . We've got a PR up now that will add a warning about needing to be 100% zoom for this particular challenge.


Question: editableRegionBoundaries?: number[]; }) => void; usesMultifileEditor: boolean; <ins> isChallengeCompleted: boolean; </ins> } // TODO: this is grab bag of unrelated properties.  There's no need for them to

I am learning from the RWD course, and I wanted to revise what I had done previously. I went to previous steps, but I found that the steps are shown incomplete when I open them. It tells you to do the step again. This doesn't make sense because you have a button at the top if you do want to do the step again. Completed code should be shown in completed challenge's code editor along with an indicator like ! !
It would be relatively easy to show the solution to a step, and the "Step completed" text, (rather than storing the user's code) if a user has already submitted that step. If other maintainers are in favour of this change, I'd be happy to open this up for PRs.
My concern with that approach would be it completely destroys the UX if someone wants to go through a practise project again.
I propose to add a button under the summary of each project for this issue.
I'm not keen on adding a button to do that, given the potential for frustration if someone triggers that accidentally.
I think I'd be in favour of the existing flow, presonally.
At a minimum, we could probably add the checkmark next to "Step 22" like we do for all the other challenges after it has been completed. That seems to be missing here. !
That's a good idea, IMO.
I think just adding that check mark is probably the way to go then. It keeps it consistent with everything else. I'm going to open it up for contributions. If anyone still has reservations, be sure to bring them up.
May I suggest in addition to indicating completed challenges in the challenge itself, to do that in the list of steps. Here is a crude representation of what I have in mind: <p align="center"<img src="https://user-" width=500 align="centre"/</p
I believe it already does that. Here's a screenshot of what the challenge looks like for me, after I've completed it (the steps are highlighted in blue instead of white). !
Also, I would like to work on this issue, and I agree that adding a checkmark next to the step would be a good fix, but I noticed that the RWD courses don't have a step number or title at the top like the other courses do.

For other courses, the checkmark for completion is displayed next to the name of the challenge, like you can see in the first screenshot (of the JS Algorithms & Data Structures courses). However, for the RWD course, there is nothing in this location, as you can see in the second screenshot. ! ! How should we go about adding a checkmark to the RWD course? Should we just put it next to where it says on the screenshot (inside the instructions block)? Or should we move the step number to the same place as where the challenge names are for the other courses and put the checkmark there, in order to be consistent with the other courses?
Thanks I could not log in since yesterday and this is probably the reason I don't see indication for completed challenges in the list of steps.


Question: assert.strictEqual(studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100), "Class average: 50.8. Your grade: A++. You passed the course."); ``` <del> Your `studentMsg` function should return a the correct message based on the student's score and the class average. </del> <ins> Your `studentMsg` function should return the correct message based on the student's score and the class average. </ins> ```js assert.strictEqual(studentMsg([33, 44, 55, 66, 77, 88, 99, 100], 92), "Class average: 70.25. Your grade: A. You passed the course.");

When invalid code is submitted to step 4 of the gradebook app review project, a message is shown which has a typo. "Your studentMsg function should return a the correct ..." Please remove the just click submit without typing anything to trigger the error message display pls correct the typo No response N/A No response
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi I am intrested to work on this, Can I start?
iam interested to work on this issue
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.
Hi, can I take up this issue? I am new to open source so looking to start with some small contributions.
We do not assign issues except to long time contributors and members. please read through this note here on contributing thanks
I have created a PR for the issue. Waiting for your feedback. Thank you!


Question: When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. <ins> **Note:** This project's tests do not work when using `glitch.com`. </ins> # --instructions-- - Complete the necessary conversion logic in `/controllers/convertHandler.js`

We see this every so often and it might warrant a note. See the examples for more context. Warn the user so they do not waste time debugging something that is out of their control. 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] Examples:
Thanks for opening this. I forgot this was still a thing. An issue with the label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: To Close This Issue Change this file: Add the following to the description: If you have any issues with contributing, be sure to join us on the , or on the
I hope this message finds you well. I am writing to seek your advice and assistance regarding a minor issue I've encountered with a project I am working on. As a beginner, your guidance and support would be greatly appreciated. In the course of my work, I've noticed that the tests for this project do not function properly when using To ensure transparency and clarity, I believe it would be beneficial to add a note in the project documentation, specifically under the "Note" section, stating the following: Note: This project's tests do not work when using I believe that adding this note would help inform other contributors and users about this limitation, ensuring a smoother development and testing process for everyone involved. Furthermore, I would like to seek your opinion on whether it would be appropriate to raise a Pull Request (PR) to implement this change. Your guidance on this matter would be invaluable to me as a newcomer to the project. I genuinely believe that your expertise could help me navigate this process more effectively. Your mentorship has been an inspiration to me, and I am truly grateful for any assistance you can provide. If adding the mentioned note is indeed the appropriate action to take, I would be thrilled to have the opportunity to submit a PR for this purpose. Your approval and support in merging the PR would be an incredible motivation for me to continue contributing to the project.

I would be grateful for your thoughts and guidance on this matter. Your expertise and mentorship are highly regarded, and I look forward to your response. Thank you for your time and consideration. Sincerely, K S Sai Teja
I have raised PR. Regarding this issue.. Please review my PR.


Question: return res.redirect('/forgot'); } res.render('account/reset', { <del> title: 'Password Reset' </del> <ins> title: 'Password Reset', token: req.params.token </ins> }); }); };

When working on the file we are asked to write a function. There is a typo in the last sentence of the info you give. "Make sure the "repsonse" you... no code needed just fix the typo, lol 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
Thank you for opening this issue. Tutorial is located at: This tutorial is using CodeRoad VS Code extension, specific guidelines how to contribute to them can be found on Making PR for this issue will require following parts referring to making changes on the branch. Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I can fix this typo :)

Is your feature request related to a problem? Please describe. The activities count on the search bar in both /learn, and /news is different than /forum. Describe the solution you'd like A clear and concise description of what you want to happen. Fix the count on activities. Additional context Add any other context or screenshots about the feature request here. <img width="629" alt="Screen Shot 2020-05-11 at 23 27 55" src="https://user-"<img width="730" alt="Screen Shot 2020-05-11 at 23 27 39" src="https://user-"


Question: - [📝 研究，编写和更新我们的指南文章](#研究编写和更新我们的指南文章) <del> - [💻 创建，更新编码挑战和修复其中的错误](创建更新编码挑战和修复其中的错误) </del> <ins> - [💻 创建，更新编码挑战和修复其中的错误](#创建更新编码挑战和修复其中的错误) </ins> - [🌐 翻译指南文章和编码挑战](#翻译指南文章和编码挑战) <del> - [🛠 帮助我们修复freeCodeCamp.org学习平台中的错误](#帮助我们修复freeCodeCamp.org学习平台中的错误) </del> <ins> - [🛠 帮助我们修复freeCodeCamp.org学习平台中的错误](#帮助我们修复freecodecamporg学习平台中的错误) </ins> ### 研究，编写和更新我们的指南文章

Describe your problem and how to reproduce it: Anchor links such is not working properly in several languages. For sure is not working in: Russian, Spanish, Chinese languages. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: Version 74.0.3729.169 (Official Build) (64-bit) Operating System: Windows 10 Pro 1809 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
These 3/4 PRs (exlude one - which I PR'd to my own forked-repo) may close this issue. Please review them.


Question: The code editor has two components that are partially defined for you: a parent called GameOfChance, and a child called Results. They are used to create a simple game where the user presses a button to see if they win or lose.  First, you'll need a simple expression that randomly returns a different value every time it is run. You can use Math.random(). This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. Statistically speaking, this expression will return true 50% of the time, and false the other 50%. On line 30, replace the comment with this expression to complete the variable declaration.   First, you'll need a simple expression that randomly returns a different value every time it is run. You can use Math.random(). This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. Statistically speaking, this expression will return true 50% of the time, and false the other 50%. In the render method, replace null with the above expression to complete the variable declaration.  Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the Results component as a child of GameOfChance, and pass in expression as a prop called fiftyFifty. In the Results component, write a ternary expression to render the h1 element with the text "You Win!" or "You Lose!" based on the fiftyFifty prop that's being passed in from GameOfChance. Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.

The challenge seed has since been updated, and this paragraph is out of line This should be reworded to not make a line reference. I suggest: Challenge:
I agree.
Can I have a bash at this?


Question: RUN bash -c 'VERSION="18"  && source $HOME/.nvm/nvm.sh && nvm install $VERSION  && nvm use $VERSION && nvm alias default $VERSION  <del> && npm i -g pnpm@8' </del> <ins> && npm i -g pnpm@8.6' </ins> RUN echo "nvm use default &>/dev/null" >> ~/.bashrc.d/51-nvm-fix

Looking forward for reporting a security issue: Please report security issues by following our security policy: Describe the bug A clear and concise description of what the bug is. Gitpod can't be used to develop right now. Or maybe it's possible but someone new wouldn't know what steps they need to take. Should i add a note in how-to-setup-freecodecamp- so that new people know? To Reproduce Steps to reproduce the behavior: instructions in how-to-setup-freecodecamp-locally to develop with gitpod, fails with message
Thanks for letting us know On the pnpm side this should be resolved by any idea why our .gitpod.Dockerfile isn't already using the latest version of pnpm?
Because I have forsaken the local config to focus on: For this repo, I have just been manually running . Personally, I do not like everything running from the get-go, but realise many like the one-button setup. This is so quick to fix, I will just PR it before the long-term fix is ready.


Question: availble online.  ## Visual Studio Code ![Visual Studio Code Icon](https://i.imgur.com/b4vFsKa.png)   ## Visual Studio Code  ![Visual Studio Code Screenshot](https://code.visualstudio.com/home/home-screenshot-mac-lg.png)

<!-- 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: There are many broken image links and the Visual Studio Code icon is way too large. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: n/a Browser Version: n/a Operating System: n/a If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
I can work on this.
I can work on this.
has already submitted a PR which will most likely be accepted to resolve this issue. We have a backlog of PRs, so it will be a while before it gets merged. There is no need to create any additional PRs for this issue at this time. PRs are merged in the order they are received. Thank you.


Question:
## Solution
  ```js // solution required </del> <ins> ```html  CatPhotoApp  ```

Good day, everybody! Hopefully you have had a great day so far :) I want to mention a possibility for improvement. In the lesson the task is: The code editor has a CSS rule to style all tags black. Add a rule so that when the user hovers over the tag, the is blue. The code window shows: The lesson doesn't allow to solve this task using HexCode: I think that this solution (and others; I tested rgb and rgba and both don't work as well) should be allowed as the code already entered suggests using this way of expressing "blue" and the task itself doesn't state anything about how to express it. Hex code and other ways of expressing "blue" were taught already at this point. ! michael-wise pointed this already out in the FCC forum. A bot referred him to GitHub, but I was unable to locate the issue here. Of course, this is just a minor issue, but I hope this nevertheless helps! All the best, Leo
I see what you mean - the test checks if the solution contains 'a:hover {color: blue}', not if the link actually turns blue. I'll see what I can do.


Question:
## Description
  Remember in the last challenge we mentioned that splice() can take up to three parameters? Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well. This can be incredibly useful for quickly switching out an element, or a set of elements, for another. For instance, let's say you're storing a color scheme for a set of DOM elements in an array, and want to dynamically change a color based on some action:   Remember in the last challenge we mentioned that splice() can take up to three parameters? Well, you can use the third parameter, comprised of one or more element(s), to add to the array. This can be incredibly useful for quickly switching out an element, or a set of elements, for another.  ```js <del> function colorChange(arr, index, newColor) { arr.splice(index, 1, newColor); return arr; } let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf']; colorScheme = colorChange(colorScheme, 2, '#332327'); // we have removed '#bb7e8c' and added '#332327' in its place // colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf'] </del> <ins> const numbers = [10, 11, 12, 12, 15]; const startIndex = 3; const amountToDelete = 1; numbers.splice(startIndex, amountToDelete, 13, 14); // the second entry of 12 is removed, and we add 13 and 14 at the same index console.log(numbers); // returns [ 10, 11, 12, 13, 14, 15 ] </ins> ```  This function takes an array of hex values, an index at which to remove an element, and the new color to replace the removed element with. The return value is an array containing a newly modified color scheme! While this example is a bit oversimplified, we can see the value that utilizing splice() to its maximum potential can have.   Here we begin with an array of numbers. We then pass the following to splice(). The index at which to begin deleting elements (3), the number of elements to be deleted (1), and the elements (13, 14) to be inserted at that same index. Note that there can be any number of elements (separated by commas) following amountToDelete, each of which gets inserted.
 ## Instructions

<!-- 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: is poorly describing splice function, one would expect call based on that, but real one is Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: not applicable Browser Version: not applicable Operating System: not applicable If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): hopefully not necessary
From what I've read in MDN's , it takes three parameters but the last parameter is variadic. Maybe we can reword the following if it's unclear for some:
So I think that "on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well" would be better I am not experienced with that terminology, but it seems to me that is called with four parameters rather than three, but these four parameters are transformed into three.
So I think that "on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well" would be better I am not experienced with that terminology, but it seems to me that is called with four parameters rather than three, but these four parameters are transformed into three. Also, describes its parameters as "start (...) deleteCount (...) item1, item2, ..." - rather than describing it as a function with three parameters.
Good points. I am not experienced as well and my understanding is probably wrong. Maybe someone with more experience about the terminology can chime in.
Good one! This is much clearer.
OK, I will submit PR (feel free to remind me to do that once is empty)
I think your wording is better. I checked GitHub and could not find where you have submitted a PR with this new verbiage. If anyone else would like to create a PR using wording above, that would be great! Thank you.
Unless I'm blind, didn't suggest a change, the quote he gave is directly from the challenge. I think he just suggested what part of the text might be changed. I think part of the problem is when you don't have a clear definition and understanding of the difference between a parameter and an argument.

1 parameter !== 1 argument. I also think using parameter and argument interchangeably, which is done all the time, can cause quite a bit of confusion to people when first learning. The third parameter takes a list as the argument: Maybe just add that, "a list of": You can still misunderstand it to mean an array. It really isn't until you see the prototype method signature (if the annotation used makes sense, otherwise it is just confusing), or better yet an example of the method being used that you can really understand it. Besides a change to the challenge text. I would also suggest the example given in the challenge be updated to add 2 hex colors, this would show the third parameter used as a list. Which is the required knowledge needed to pass the challenge.
Side note: I think the way the challenge example code was written is potentially harmful to people just starting out learning. It really muddies the water and gives a wrong impression of how objects and the splice method works. This is the example code: It is effectively is doing this, but in my opinion hides that fact by returning the array and by capturing the return.
I should have said suggestion is different, because the current challenge states: which is different from his suggestion: I still don't like here, they are placeholders. With the splice method any passed after the first two are the extra elements do be inserted by the splice. I am not sure how best to convey this without using the terminology, but since the challenge is about , we need to come up with something. Definitely think we need to refer to a list of arguments in the example you mention should be add and make it clear that a list is not an array which the current verbiage would almost indicate (third parameter), like it is a collection instead of just a listing of extra arguments.
It is definitely not additional parameters, it is one parameter accepting multiple arguments. Here is my first stab at it.
I like all but that last "Example usage". I think It makes the challenge unnecessarily long and you already have the best example above that part: Here is how you pass a list of values to the third parameter:
My example (or something simple like it) would be used instead of the example code given in the challenge. In my opinion, when first explaining a prototype method it should be simple and bare-bones.

It should not have any complexity to it that is not needed. At least not in the first example given. I can appreciate the example tries to be less abstract and more real-world, but there is a number of problems with it. use of a second function. It just needlessly complicates the example, I don't think it is a good way to initially show how splice works. it is using the array. Passing the reference, then changing the original array only to return it and overwrite the original array anyway. Not good, in my opinion. it is using splice. It makes it look like the change to the array is local to the function and needs to be returned, when in fact that is not the case. is also another more subtle problem with the colorChange function. When passing a list to the third parameter of splice as a variable (newColor), how you need to pass the list changes. It does not work as you might expect from looking at the original code. Anyway, long story short, I suggest we simplify the code example. Side note: I think a deeper problem is how we seem to want the challenges to be "all-in-one". I truly believe starting super simple first and then in the next challenge, if deem necessary, giving a more complicated and "real-world" example, would be so much better. Sorry for the wall of text.
Sincere apologies if this is out of place, but I was rooting around for some places to make first contributions and came across this. Sometimes a lack of experience is the best form of insight, yes? So, that said, I think that lasjorg is right about this: Furthermore, I think the example change suggested by lasjorg is also much clearer and easier to process: I think that this example, paired with a clearer explanation of the material, would be sufficient. The other two examples lasjorg suggested become redundant in that case.

The following would be enough to both explain the functionality of splice() being demonstrated and provide enough context to allow students to grasp its scope: Because the examples in the lesson description do not have proper code formatting (red text on a gray background, with no markup), I find that comments can be very distracting and confusing, since it adds the task of processing the location of the comment notation and the scope it covers (changing the size of the window or frame can change how many lines the comments reach). It's better, then, to be reserved in how much of the example box is utilized for comments, and conscious of their length. As such, I've attempted to minimize their footprint in the example, and opted for a block comment when the comment stands alone. Hope this is helpful somehow.
Thank you for your insight. We have dropped the ball on this one, but hopefully we can implement some kind of improvement in the near future. FYI - You will be happy to know that PR is an attempt to address the lack of code formatting which has plagued the challenges for quite a long time.
As a first time contributor I would be happy to assist in any way I can here.
We are still discussing exactly what needs to be done. Once we finalize the verbiage, we'll post here.
Hi All, first timer here. trying to understand what needs to be done. Request someone to let me know how to proceed further on this issue. Thanks in advance.
function htmlColorNames(arr) { // change code below this line (0, 2, "DarkSalmon", "BlanchedAlmond"); // change code above this line return arr; } // do not change code below this line (htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'])); use this code this going to help you ok if code runs then thumbs up follow to
<bI hope by using above code issue is solved </b<centerthank you then close this issue</center
Did you actually read the issue and what it pertains to? Do we have any final verdict on this? I like what came up with, do you have any objections?
yes i readed but () function can take more than two values if still this issue is not solved then ask
I also really like what came up with.

It's clear, concise and focused on what you can do with .
or anybody else want to create a PR implementing what has proposed? We welcome such a PR.
Hi, beginner here. I am willing to make the changes proposed by .
Go for it!


Question: ] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Elementos", "descriptionEs": [ "Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: developers.google.com/web/tools/iterate/inspect-styles/basics ", "Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.", "Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!", "Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.", "Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ", "También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.", "El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.", "Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en developers.google.com/web/tools/chrome-devtools/" ] </ins> }, { "id": "56b15f15632298c12f315183",

[x] Chrome Dev Tools: Elements [x] Chrome Dev Tools: Network [x] Chrome Dev Tools: Sources [x] Chrome Dev Tools: Timeline [x] Chrome Dev Tools: Profiles [x] Chrome Dev Tools: Resources [x] Chrome Dev Tools: Audits [x] Chrome Dev Tools: Console [x] Chrome Dev Tools: Summary
Working on it


Question: }; ``` <del> You can send a <b>DELETE</b> request to `/api/books` to delete all books in the database. The returned response will be the string `'complete delete successful` if successful. </del> <ins> You can send a <b>DELETE</b> request to `/api/books` to delete all books in the database. The returned response will be the string `complete delete successful` if successful. </ins> ```js async (getUserInput) => {

There is an extra quote in the string below it can be removed as it isn't required Here is the file: If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this.
Can I work on this issue?
Yea, feel free to open PR, after you have read our contribution guideline
I have created the pull request, please review it.
Can i also contribute to this issue?
Yes, there is no pull request that follows the contribution guideline. If you open PR that follows it, that pr will be merged and closes the issue with it
Thank you


Question: This single command will fire up all the services, including the API server and the client applications available for you to work on. > [!NOTE] <del> > Once ready, open a web browser and **visit <http://localhost:8000>**. If the app loads, congratulations – you're all set! You now have a copy of freeCodeCamp's entire learning platform running on your local machine. </del> <ins> > Once ready, open a web browser and **visit <http://localhost:8000>**. If the app loads, sign in. Congratulations – you're all set! You now have a copy of freeCodeCamp's entire learning platform running on your local machine. </ins> > [!TIP] > The API Server serves APIs at `http://localhost:3000`. The Gatsby app serves the client application at `http://localhost:8000` <del> > If you visit <http://localhost:3000/explorer> you should see the available APIs. </del> <ins> > While you are logged in, if you visit <http://localhost:3000/explorer> you should see the available APIs. > [!WARNING] > Clearing your cookies or running `npm run seed:certified-user` will log you out, and you will have to sign in again. </ins> ## Sign in with a local user

It's true that you stay signed in if you , but the very first time you go to you still need to sign in. Once that's done you'll stay signed in until you either clear your cookies or .
Thank you, for the correction. Why do we not need to sign in for each Gitpod instance, then?
Good question. Turns out it's the same thing: when you log into fcc while it's running on GitPod the cookies get set for the domain. That means the login carries over to the next time you open up GitPod.
Thanks for the confirmation I guess it seemed like we had different experiences because you were already signed in. But the dev following the doc will not be signed in and will not be able to visit the API explorer, so I suggest editing the doc. Should I go ahead and make a quick pull request?
Thanks, a PR to the docs would be helpful.


Question:
## Description
  In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue.   In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue.  Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of the array. The nextInLine function should then return the element that was removed.

This is a response to a user of the forum having issues with the Stand in Line challenge. To quote: This is dead simple, there here are code tags around the word in the description, and we've taught users that code tags, naturally refer to code. Browser Name: any Browser Version: any Operating System: any !


Question: </DefaultLayout> ); } <del> if (/^/donation(/.*)*|^/$|^/donate(/.*)*/.test(pathname)) { return ( <DefaultLayout pathname={pathname} useTheme={false}> {element} </DefaultLayout> ); } </del> return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>; }

Looking forward for reporting a security issue: Please report security issues by sending an email to instead of raising a GitHub issue. Describe the bug The heights of the SVG files on the landing page vary, which causes the certification chart to look inconsistent. To Reproduce <img width="946" alt="zoomfloatingvideowindowandLearntoCode—ForFree—CodingCoursesforBusyPeople" src="https://user-"Desktop (please complete the following information): OS: Mac Browser: Chrome Version: Version 88.0.4324.96 (Official Build) (x86_64)
Hi Quincy, I let know about this already.
in min height, so should take care of it.


Question: ```yml tests: - text: Your code should use the <code>sort</code> method. <del> testString: assert(code.match(/.sort/g), 'Your code should use the <code>sort</code> method.'); - text: Your code should use the <code>concat</code> method. testString: assert(code.match(/.concat/g), 'Your code should use the <code>concat</code> method.'); </del> <ins> testString: assert(nonMutatingSort.toString().match(/.sort/g)); </ins> - text: The <code>globalArray</code> variable should not change. <del> testString: assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9]), 'The <code>globalArray</code> variable should not change.'); </del> <ins> testString: assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9])); </ins> - text: <code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>. <del> testString: assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9]), '<code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>.'); </del> <ins> testString: assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9])); - text: <code>nonMutatingSort(globalArray)</code> should not be hard coded. testString: assert(!nonMutatingSort.toString().match(/[23569]/g)); </ins> ```

Feature Request: Add as valid method to clone/copy array and as an alternative to Link to challenge: I often use () to return an array copy, as this is what MDN recommends. When I was working on this challenge I could not get it to pass, even though my solution was returning the correct answer. The challenge ONLY accepts answers that use the format [].concat(arr). The wording in the challenge is clear, but experience from earlier challenges hava been lenient as long as you provide a valid solution. Other reasons: When googling for array copying the top result from MDN recommends slice.()MDN's Array page recommends using () for array copying opinion, is more readable than
You have to also view the test text as part of the instructions for the challenges. In this case, one of the the challenge test expects you to use the method. It even mentions the method in the Description section of the challenge. Always read the test text to make sure you understand what is being asked of you.
If anyone working on this issue? I would like to take care of this. In my opinion, has a point in that the test should allow .slice() if the effect is the same - we know that many times people can solve a problem in multiple ways, and that should be ok. Please let me know. I can either clarify the text so that the user knows to use concat, or I can modify both the description and the test so that .slice(0) is accepted ( I am inclining more towards the second option though).
I bring it up since alternative solutions has been accepted previously in the corriculum. As long as the final solution is correct. It was frustrating to have the tests fail even though the output was correct.
I normally would agree, but the description mentioned and the test case specifically tells you to use
Does it have to be specifically .concat() though? The test seems to be about learning mutation and which functions have side effects and how to work around that. We learn about both concat and slice earlier on, and it seems arbitrary to only accept concat. If the point of the challenge is to learn about concat that's fair. I'd recommend mentioning that .slice() is also an option, but ask to use .concat() still.

If the point is avoiding mutation and being aware that certain methods like .sort() will have side effects on the original array. Then I don't understand why it's so strict.
and After thinking a bit more about your points, I agree this challenge could be updated to allow any valid method for copying the array (, , , ) and other possible ways not mentioned. While looking at the challenge tests, I also realized someone could still technically hard-code the final return value, so I created a PR to address your concerns and attempt to not allow hard coding of the final array returned.