Question: # --instructions-- <del> Nest the existing input element inside a `form` element and assign `"https://freecatphotoapp.com/submit-cat-photo"` to the `action` attribute of the `form` element. </del> <ins> Nest the existing `input` element inside a `form` element and assign `"https://freecatphotoapp.com/submit-cat-photo"` to the `action` attribute of the `form` element. </ins> # --hints--

There are a couple of wording changes needed on the lesson. In the description section, should be changed to In the instructions section, needs backticks around "input"


Question: exports.newStory = function(req, res) { var url = req.body.data.url; <del> var cleanURL = sanitizeHtml(url); </del> <ins> var cleanURL = sanitizeHtml(url, { allowedTags: [], allowedAttributes: [] }).replace(/"/g, '"'); </ins> if (cleanURL !== url) { req.flash('errors', { msg: "The URL you submitted doesn't appear valid"

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Test for this lesson may not check the syntax for any constructor syntax, instead looks like it's tested by output. EIther user provide the constructor(correct/expected way) or not, challenge passes. Browser Name: Chrome Browser Version: 67 Operating System: Win7
I'm on it.
following solution works to passs the test: function makeClass() { "use strict"; / Alter code below this line / class Vegetable { constructor(Vegetable) { this. Vegetable = Vegetable; } } / Alter code above this line / return Vegetable; } const Vegetable = makeClass(); const carrot = new Vegetable('carrot'); (); // =should be 'carrot'
Hello, Unfortunately, this solution doesn't work for me. (The same as in the "Hint": ) Error message: // running tests should return carrot. // tests completed
sorry to hear that! Would you mind posting your solution here so we could take a look?
Hello Kristofer, Thank you for your email. (ES6: Use class Syntax to Define a Constructor Function) I have already got help from FreeCodeCamp. I used the solution from "HINT", but it didn't work. class Vegetable { constructor(Vegetable){ this.Vegetable = Vegetable; } } What worked is the code below: class Vegetable { constructor(name) { = name; } } Thank you. Kind regards, Zsolt


Question: <ins> import * as ReactDOMServer from 'react-dom/server'; </ins> import Loadable from '@loadable/component'; // eslint-disable-next-line import/no-duplicates import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';

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.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); ``` <del> You should give the `background` a `linear-gradient` starting from `--building-color1`. </del> <ins> You should give the `background` a `linear-gradient` starting from `var(--building-color1)`. </ins> ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); ``` <del> You should give the `background` a `linear-gradient` ending at `--window-color1`. </del> <ins> You should give the `background` a `linear-gradient` ending at `var(--window-color1)`. </ins> ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');

In the hint below it ask to add variable, but it's similar to how we ask colors to be , which cased confusion to a camper I propose, applying the same approach in ieahleen pull request to skyline variables name, . Although it feels like giving answers outright, variables are case-sensitive and require specific syntax, which I think we should give their steps some lay way in the hints. original issue:
For that you need to use . First argument of is the found value, and can be referenced with . Second argument of is the expected value, and can be referenced with in the hint text. The tests would need to be changed a bit for this to be possible. And I am not even sure how to apprach it, as it's complex values, and there is this annoying thing called spaces.
I thought will trim the spaces, but as showing in the image below it doesn't. That looks like a nightmare, so let's ignore my original suggestion ! the camper mentioned the lack of keyword, what about adding in the hints something like or


Question: p You’ll continue to work on nonprofit projects until you’ve built a sufficiently impressive portfolio and references to start your job search. Your portfolio will ultimately have four nonprofit projects. We estimate that the 800 hours of nonprofit projects and 80 hours of interview prep you’re going to complete, in addition to the 1,200 hours of challenges you’ve already completed by this point, will be more than enough to qualify you for your first coding job. h3 Your first Nonprofit Project p We generally scope Nonprofit Projects to 200 hours, or about 10 weeks at 20 hours per week of development per camper. These are only rough estimates. You’ll only work on one project at a time. <del> p You will choose another camper to partner with on this projects. You should choose your them based on: </del> <ins> p You will choose another camper to partner with on this projects. You should choose them based on: </ins> ol li How many hours you can pledge (around 10, 20, or 40 hours per week) li Your time zones (Will you be able to pair program together?)

<!-- 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 -- There's a typo. "your them"
I'm working on it.


Question: padding-bottom: 10px; } <ins> .help-modal-heading { line-height: 1.5; font-weight: 400; word-spacing: -0.4ch; } </ins> @media screen and (max-width: 767px) { .help-modal .btn-lg { font-size: 16px;

I was looking at and I wonder if we should improve the legibility of that heading text as well. The default Bootstrap isn't great here. The font used with makes it harder to read in my opinion. Here is the Modal with and the default for the heading. ! And here is the original ! Any challenge with "Get Help" Open the Modal Better legibility of the heading text. 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
! Isn't it already correct?
I don't know what you mean by correct. I'm suggesting changing the and to make it easier to read. I'm talking about the with the Read-Search-Ask link in it to be clear. It is less of an issue in light mode than dark mode but I still think the legibility can be improved by the suggested changes.
I don't think it's hard to read, but it does feel a little condensed and I do think it looks better with a little more space. With the space, we may not need to make the adjustments to the link underlines.
If the text "looks better" chances are it "reads better". And yes, the line height should also help with the underline issue.


Question:
"Now, take a look at a do...while loop.", "
var ourArray = [];
var i = 5;
do {
  ourArray.push(i);
  i++;
} while (i < 5);
", "In this case, we initialize the value of i as 5, just like we did with the while loop. When we get to the next line, there is no check for the value of i, so we go to the code inside the curly braces and execute it. We will add one element to the array and increment i before we get to the condition check. Then, when we get to checking if i < 5 see that i is now 6, which fails the conditional check. So we exit the loop and are done. At the end of the above example, the value of ourArray is [5].",  "Essenially, a do...while loop ensures that the code inside the loop will run at least once.",   "Essentially, a do...while loop ensures that the code inside the loop will run at least once.",  "Let's try getting a do...while loop to work by pushing values to an array.", "
", "Change the while loop in the code to a do...while loop so that the loop will push the number 10 to myArray, and i will be equal to 11 when your code finishes running."

<!-- freeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- NOTE: If your issue is CodePen Project / Test Suite related, please open it using the below URL instead --<!-- --<!-- Insert link to challenge below --Basic JavaScript: Iterate with JavaScript Do...While Loops <!-- Describe below when the issue happens and how to reproduce it --Typo in the pre-last paragraph of the description of the challenge - 'Essenially' written instead of 'Essential'.
I'd like to take this if it's possible, i found the typo and it seems that only a change in the seed file is required
sure please go ahead. if you need assistance then hit us in the , and follow our for setup.


Question: "nameEs": "Elimina tus funciones jQuery", "descriptionEs": [ "Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",  "Elimina esas tres funciones de jQuery de tu función de documento listo, pero deja intacta la declaración de la función de documento listo."   "Elimina esas tres funciones jQuery de tu función de documento listo, pero deja intacta la declaración de la función de documento listo."  ] }, {

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


Question: assert(img?.previousElementSibling === null); ``` <del> Your `img` element should have a `class` set to logo. </del> <ins> Your `img` element should have a `class` set to `logo`. </ins> ```js const img = document.querySelector('img');

in step 21 of building a piano project, the hint in line 30 is missing code blocks This should be changed to 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 believe I did all this right. This is my first time contributing to open source. Very exciting :))


Question: border-bottom-color: var(--gray-45) !important; } <ins> .fill-in-the-blank-input:focus { z-index: 2; } </ins> .code-tag code { font-size: 100%; z-index: 0;

When the blanks in a fill in a blank challenge overlap vertically, the top selection box gets cut off: <img width="767" alt="Screenshot 2024-06-17 at 5 39 59 PM" src=""^ See the two blanks in the sentence are above and below one another. When you click the first blank, the blue selection box is cut off - presumably because the input below is in front of the first input. to on the first blank in the sentence the blank get cut off The box to be visible We could adjust the spacing so the input doesn't get cut off, or move the z-index of the input to the front when it's selected.
I think changing the z-index on select makes sense.
We might also consider increasing the . The lines are pretty close together. Not sure why we are using for the unit, usually is set using unitless values, which would make the we have on the elements work much better. Also, the font-size is set using for whatever reason (unlike most if not all other font styles I have seen in our CSS). Not that changing it to does anything (currently at least).


Question: "last-page": "Go to last page", "primary-nav": "primary", "breadcrumb-nav": "breadcrumb", <ins> "timeline-pagination-nav": "Timeline Pagination", </ins> "submit": "Use Ctrl + Enter to submit.", "running-tests": "Running tests", "hide-preview": "Hide the preview",

The is being hard-coded with an English string, we should change this to use a translation string instead. Additionally, the attribute is redundant as already has role implicitly. Replace the string with a translation string, something like (the string also needs to be to ) Remove


Question: prevChallengePath, showPrevNextBtns }) { <del> let icon = null; if (isCompleted) { icon = ( // TODO Use SVG here <i className='ion-checkmark text-primary' title='Completed' /> ); } </del> return ( <div className='challenge-title-wrap'> {showPrevNextBtns ? (

In the new beta (currently at ), it would be great if a challenge page indicated somehow when the challenge has already been completed. Currently, since user inputed code is not saved, there is no indication on a challenge page that it has already been completed.
We need a check mark in the title or a badge or to indicate the same?
The most elegant thing I can think of to have something like the little circular check mark next to the title like how it is on the learn homepage - only if it's been solved, and don't show anything if it hasn't.
That would be a nice way to handle it. Please go forth if you are interested in this?


Question: ] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Resumen", "descriptionEs": [ ", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ", ", Utiliza la documentación, incluso si nunca has leído documentación antes: developers.google.com/web/tools/chrome-devtools/ ", ", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort." ] </ins> } ] }

[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: Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! <ins> **Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS </ins> # --hints-- You should have a `header` element with an `id` of `header`

With the new format, a lot of people are not linking their css files to the HTML document. It is coming up a lot on the forum. Especially for those that are going through the Legacy curriculum. I think we should add a message underneath the sample projects, to remember to link the CSS file. Proposed change: Remember to link your CSS file in the HTML document. <img width="460" alt="Screen Shot 2022-05-14 at 8 57 10 AM" src="https://user-"
I had trouble fixing , because I didn't link To I hope this will be implemented
I think we should do this.


Question: // if ( //  isEqual({ ..._editor.getPosition() }, { lineNumber: 1, column: 1 }) // ) { <ins> const [top, bottom] = editableRegionBoundaries; </ins> editor.setPosition({ <del> lineNumber: editableRegionBoundaries[0] + 1, </del> <ins> lineNumber: top + 1, </ins> column: 1 }); <del> editor.revealLinesInCenter( editableRegionBoundaries[0], editableRegionBoundaries[1] ); </del> <ins> // To prevent descriptionWidget from being out of view editor.revealLinesInCenter(top, top === 0 ? 1 : bottom); </ins> // } }

Not applicable The editor fills the screen instead of showing the instructions. You have to scroll up o see the instructions, and it’s not obvious if you should scroll up or down. ! Step 55: ! Device: [Laptop] OS: [Windows 10] Browser: [brave] Version: [Version 1.33.106 Chromium: 96.0.4664.110 (Official Build) (64-bit)] What the 3 steps have in common is that the editor has on the 1st line of the CSS file. All other lessons show the previous row number above the instructions (see screenshots). I may have seen this in previous sections but I can’t be sure. If someone can query all the lessons in all the sections to find where the focus is at line 1, then I could check them. Although, that will happen for all the early lessons. You would probably need to do a condition for 10 or more lines of code in the CSS file. That's assuming you need someone to check it rather than seeing the issue and fixing it in the other sections. Also, I need a list of lessons to check because I don't know how to easily scroll through all the steps. I had to CTRL+click every step in the penguin section because I knew I missed one (Step 55).
Hello there, Thank you, for opening this. This bug is (documented here](), but I will leave this open as a specific issue to tackle. If I correctly recall, we did actually already fix this, but the bug appears to have made its way back
I searched to see if it was already reported but I guess I didn't search well enough. It looks like the example shows Step 55 in the Penguin section. BTW, I found 1 Step in the Ferris Wheel section that does the same thing.
Yes - as pointed out, this looks to be an issue with the editor and should probably fix there. If we want a quick or temporary fix, I found that adding an empty line in the seed code will make it so you don't have to scroll up. change css --fcc-editable-region--  A quick search shows that there's around 70 steps where this occurs: ! Not sure if we want to use this as a temporary fix or not.

Any thoughts
70 steps for just the English version or all languages? How did you perform the search? What makes the directions appear in the "correct" location for all the other lessons? Would you paste in links of all the steps where this happens? I had to search for Step 65 until I found it in the Quiz section. So far, it seems as if row 1 in the CSS file is the first row in the editor and that there is a full set of styles below it. That is what I noticed in the ones I mentioned above. I also looked at Step 20 Ferris Wheel and it also shows row 1. What is it about the top of that makes the directions move up?
That screen shot is VS Code. I have the repo opened in it. You can search for things. I searched for that pattern at the top (css|html) --fcc-editable-region-- ` Make sure the is checked at the top right there to enable regex searches.
I was not able to duplicate your search with the 2nd line having . I found the Toggle Search Details button and the Open New Search Editor button, but I could not find a way to ENTER onto a new line for the editable region line. Looks like there are 7 languages so that would be 10 Steps/Lessons where this happens. I found the 3 in my original message plus step 20 in Ferris Wheel. Your screenshot has 2 in the quiz section plus the last one in the screenshot step- (not sure of the section) - that's 7 - so there must be 3 more for 10 in each language.
We should definitely not use a temporary fix for this - resolve the issue at the editor
I did a search for and found some json and js files with that phrase in it. What are ? I have to leave but I wanted to look at ana . The first one sets as a , but I'm not sure exactly what these files do - just poking around. Where would you even begin to look for why these lessons are different?
For all the steps I looked at, they all have immediately following md I found 47 files (not 70) and they all have the same format with following the CSS codeblock: Accessibility Quiz: Steps 65, 66.

Cafe Menu: Steps 15, 19, 20, 22, 58, 73 Colored Markers: Steps 8, 37, 40 Photo Gallery: Step 7 Grid Magazine: Step 26 Penguin : Steps 2, 3, 4, 5, 54, 55, 82, 88 City Skyline: Steps 5, 6, 25, 27, 39, 50, 59, 68, 95 Registration Form: Steps 7, 8, 9, 37, 49 Balance Sheet: Steps 26, 27 Piano: Steps 9, 10 Rothko: Step 8 Nutrition Label: Steps 6, 11 Ferris Wheel: Steps 3, 4, 5, 20, 21 Steps with an asterisk () appear to display correctly because there are not a lot of lines outputted to the page. The suggested fix seems good: adding a line between the two lines*. However, I would like to know what the root cause is for that behavior. And I didn't realize that RWD Beta is only in English.
We have had this bug before, and we should not do a temporary fix of adding spacing between the ERMs and code blocks. The most likely place this will need fixing is:
I'll take a look at that. What does the extension stand for?
is the TypeScript extension with JSX. That is, the file contains both TypeScript and JSX.
Sorry, I should have searched that myself. I've never worked with TypeScript and only worked with React a few times. There is a constant name for an object that is repeated: . First on line 485, then again on line 516, both with the same properties but the values are different. I thought you can not overwrite a variable that is declared with the keyword. And isn't TypeScript "strict"? on line 484: on line 516: In the first occurrence you have , and on line 784 there is a comment about the function : I found that because I was looking for which only occurs in that object. Any chance declaring the const twice is the problem? Does the 2nd one overwrite the first one?

Yes, but they are in different scopes: I cannot see it declared twice
I said it was declared twice, meaning in the global scope - or at least that is what I thought. I didn't notice that. My mistake, let me keep poking around...
I can't figure that file out. There are so many variables and functions that I don't know where to start looking, plus I do not understand a lot of the code.
No worries. It is one of the largest files in our codebase. So, it takes a lot of time to read / get used to. I will spend some more time looking into it.


Question: Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button. <del> **Note:** The `span` element is an acceptable alternative to the `i` element for the directions below. </del> <ins> **Note:** You can use either `i` or `span` elements to complete this challenge. </ins> # --hints--

Course: Front End Development Libraries Certification Section: Bootstrap Lesson: Add Font Awesome Icons to all of our Buttons The wording is as follows: "Note: The span element is an acceptable alternative to the i element for the directions below." The word "below" is wrong. The instructions are above, not below. Switch word "below" with "above". None/ not applicable to issue. N/A, not applicable to issue Issue is found within the text of the instructions N/a, not applicable This is only a grammatical error found in the instructions for the challenge.
I think the directions mentioned here is the tests.
Yes, this is referring to the instructions in the test text, which is where the element is requested.
Maybe something like this would be clearer
The challenge will accept span elements.
Ahh. So we should probably say something more like
That one works for me. Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: You should update the instruction text to replace: With: 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.
I would like to work on this issue could you please assign it to me
We don't assign issues. We accept the first complete pull request that fully addresses the issue
Very excited


Question:
"assert($("a").text().match(/catsphotos/gi), 'Your a element should have the anchor text of "cat photos"')", "assert($("p") && $("p").length > 2, 'Create a new p element around your a element.')", "assert($("a[href="http://www.freecatphotoapp.com"]").parent().is("p"), 'Your a element should be nested within your new p element.')",  "assert($("p").text().match(/^Viewsmores/gi), 'Your p element should have the text "View more " (with a space after it).')",   "assert($("p").text().match(/^s*Viewsmores/gi), 'Your p element should have the text "View more " (with a space after it).')",  "assert(!$("a").text().match(/Viewsmore/gi), 'Your a element should not have the text "View more".')", "assert(editor.match(/
/g) && editor.match(/<p/g) && editor.match(/
/g).length === editor.match(/<p/g).length, 'Make sure each of your p elements has a closing tag.')", "assert(editor.match(//g) && editor.match(/<a/g) && editor.match(//g).length === editor.match(/<a/g).length, 'Make sure each of your a elements has a closing tag.')"

<img width="1298" alt="screen shot 2015-10-09 at 11 07 27 am" src=""Challenge has an issue. User Agent is: <codeMozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code:


Question: assert.equal(locations[5].name, 'lose'); ``` <del> Your sixth `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. </del> <ins> Your sixth `locations` value should have a `button text` array with three `REPLAY?` strings. </ins> ```js assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); ``` <del> Your sixth `locations` value should have a `button functions` property with the value an array with three `restart` variables. </del> <ins> Your sixth `locations` value should have a `button functions` array with three `restart` variables. </ins> ```js assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]);

reported sentence that looks weird, and I agree. it is used in 4 files here is the sentence I noticed in the last file, we are using deepEquel, should we mention that array's variables' respective position matter?
Can I be assigned to this? We can simply improve it as "property with the value of an array".
contribution isn't open for issues with label , you are more than welcome to discuss how to improve it
I would shorten them to just use ... e.g. "Your fifth value should have a array with three strings."
there is no one has provided a better option yet, so I am opening this for contribution, and when the JS is published, we can come back to this when campers are taking the course. You should follow Tom comment here because no one has answered this, I think it doesn't matter 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.
Hello Sir, can you assign me this issue? hacktoberfest
how does this sounds? "Your fifth locations value should have a with the value being an array consisting of three strings." I for one think we don't need to over explain this, as the values are described in order most people will put them in that exact order.
Although, we are trying to include everyone, you are right this is me trying to overtune something simple. It's good, but we should keep Tom suggestion. In HTML/CSS projects steps, we are using the same sentence structure that Tom mentioned, so there will be comfort, and subtle hints that is an object that carry variables.
you can open a PR, after reading our guideline. more info in this comment
Your fifth locations value should have a property and an array value with three strings. kept most of the original wordings.
Opened a PR for this issue!


Question: terms = [] for n, coefficient in self.coefficients.items(): if not coefficient: <del> coefficient </del> <ins> continue </ins> if n == 0: terms.append(f'{coefficient:+}') elif n == 1:

I have completed this, but noticed there is an error in the code which doesn't seem to cause any problems during the lessons. In lesson 20 we use an if statement (seen in the first code block below) and the action is . This stays the same in steps 21 through 25. However from steps 26 onwards has been replaced by as highlighted in the second code block below. (Please note that I did not change the code and have pressed Reset a number of times but the code stays the same) Please advise First code block: Second code block: I expect code that passed to stay the same and be correct - is the code in the second code block above correct? No response Device: HP Laptop OS: Windows 10 Browser: Firefox Version: 128.0.2 No response
Thanks for reporting this. The answer is no, that snippet of code is not correct and it should be fixed. Each occurrence of should be replaced with


Question: "id": "bad87fee1248bd9aedf08824", "title": "Add Different Margins to Each Side of an Element", "description": [  "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side.",  "Sometimes you will want to customize an element so that it has a different margin on each of its sides.",  "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties."   "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties.", "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side."  ], "tests": [ "assert($(".green-box").css("margin-top") === "40px", 'Your green-box class should give the top of elements 40px of margin.')",

The Waypoint description says: It seems to me that the first paragraph should be the last, i.e., the assignment was given before the Waypoint's description.


Question: .price { text-align: right; <del> width: 25% </del> <ins> width: 25%; </ins> } ```

.price { text-align: right; width: 25% } Line 156 of the file within the freeCodeCamp curriculum. Impact: While functionally harmless in modern browsers, adding the semicolon improves code consistency and maintainability. Discussion: The comments on the issue highlight: It's likely a typo since other CSS rules in the challenge have semicolons. While not strictly an error, adding the semicolon for consistency is recommended. to '' on 'Code Edit' down to 'Line 156' ; at last character The default code has not ; sign In css part It does look like a typo: ! ! Device: Laptop OS: Windows 11 Browser: edge Current Status: The issue is labeled as help wanted and type: bug. Multiple pull requests have been linked that might fix this issue: Update by sharabshrestha99 fix(curriculum): typo error on css file by brunades Additional Notes: A comment offers a reference for further details on semicolons in CSS:
it's not necessarily an error, the last rule doesn't need semicolon, but it could be for consistency yeah The list of files in which this is present is (44 files): I will open this for contribution.
Some additional context on last-rule semi-colons for those who might be interested: ! But I agree that omitting it is inconsistent with other steps and so it was likely a typo and we should fix it for consistency.
is this still open? I would like to contribute
hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labeled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: "set-certs-public": "Set your certification settings to public", "set-profile-public": "Set your profile settings to public", "set-claim": "Claim and view your certification" <ins> }, "forum-help": { "browser-info": "**Your browser information:**", "user-agent": "User Agent is: <code>{{userAgent}}</code>", "challenge": "**Challenge:** {{challengeTitle}}", "challenge-link": "**Link to the challenge:**", "whats-happening": "**Tell us what's happening:**", "describe": "Describe your issue in detail here.", "camper-project": "**Your project link(s)**", "camper-code": "**Your code so far**", "warning": "WARNING", "too-long-one": "The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.", "too-long-two": "You will need to take an additional step here so the code you wrote presents in an easy to read format.", "too-long-three": "Please copy/paste all the editor code showing in the challenge from where you just linked.", "add-code-one": "Replace these two sentences with your copied code.", "add-code-two": "Please leave the ``` line above and the ``` line below,", "add-code-three": "because they allow your code to properly format in the post." </ins> } }

We want to localize the Ask-To-Help template that pre-fills the post on the forum. ! The above button which takes you to the forum should render this template: ! In the localized version instead.
Should be able to tackle this today, I think.
Sure. Not a high priority, so take your time.


Question:
</Modal.Title> </Modal.Header> <Modal.Body className='help-modal-body text-center'>

  <Trans i18nKey='learn.tried-rsa'> <a href={RSA}

I was looking at and I wonder if we should improve the legibility of that heading text as well. The default Bootstrap isn't great here. The font used with makes it harder to read in my opinion. Here is the Modal with and the default for the heading. ! And here is the original ! Any challenge with "Get Help" Open the Modal Better legibility of the heading text. 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
! Isn't it already correct?
I don't know what you mean by correct. I'm suggesting changing the and to make it easier to read. I'm talking about the with the Read-Search-Ask link in it to be clear. It is less of an issue in light mode than dark mode but I still think the legibility can be improved by the suggested changes.
I don't think it's hard to read, but it does feel a little condensed and I do think it looks better with a little more space. With the space, we may not need to make the adjustments to the link underlines.
If the text "looks better" chances are it "reads better". And yes, the line height should also help with the underline issue.


Question: id: 567af2437cbaa8c51670a16c title: Testing Objects for Properties challengeType: 1 <del> videoUrl: 'https://scrimba.com/c/cm8Q7Ua' </del> <ins> videoUrl: 'https://scrimba.com/c/c6Wz4ySr' </ins> forumTopicId: 18324 ---

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: the "Get Help" button "Watch a video" The code used in the video is outdated. This has caused several campers to post for help on the forum because the answer they copied from the video does not pass the current tests. Here are three just from the past day: The current starter code is as follows: The starter code in the video is as follows: I suggest the video be removed in order to cut down on these forum posts. Add a Link to the page with the problem:
This is another topic of discussion, but based on those forum posts it seems that many people have directly copied the code from the video, possibly without even reading the instructions or looking at the starter code before overwriting it all. It makes me wonder if the help videos are actually that useful as an educational tool.
Just now:
Whilst, at one stage, the code in the videos did correspond to the correct solution, and users could just copy to pass, the videos are still quite helpful. In my opinion, with the code being slightly off, but still relevant, the videos are even more helpful, as it prevents users from just copying the answer, and they have to think for themselves. In my opinion, the videos should remain as is, unless something in them becomes deprecated, as the person in the video still goes through an explanation of what they are doing and why, which is invaluable as a user who wants to learn.
I get your point and agree with you that a slightly off video is more beneficial to those who want to learn, it's just that there are 30+ forum posts with people who have copied directly from the video in the past 3 weeks (since the problem was changed). If the video were removed, then those posts would never show up in the first place. Likewise, for learners who aren't able to solve the new problem on their own, they'll still be able to ask for help on the forum just like always. Only, instead of asking why the video code they copied doesn't pass "even though it should", they'll instead ask about about how to solve the problem as it's written.

Then the posters on the forum would be able to answer instead of In my opinion, the former is a much more valuable learning experience for all involved, both because it's more positive and it's actually about the topic.
Yes, fair enough. I guess we should be asking the questions: 1) Will the videos ever be updated? (I assume not, as the style of curriculum is changing) 2) If not, could a note explaining that the video code is not enough to pass the tests be to the introductory page? (just some way to make it clear to avoid the clogging of the forum)
are you still updating the videos for the old curriculum?
I have forwarded this to Beau for a response. Thanks for your patience. Meanwhile recommend linking to this thread from the forum and closing the topics while we arrive at a conclusion.
I'm working on this. I'll update the video.


Question: import React from 'react'; <del> import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; </del> <ins> import { faWindowRestore } from '@fortawesome/free-solid-svg-icons'; </ins> import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useTranslation } from 'react-i18next'; import EditorTabs from './editor-tabs';

A camper mentioned in his comment, that this icon below indicate to them that it's an external link not a popup. ! We can change it to clearer icon that show, that it's a popup. The original comment for context:
I found it interesting, that say you should use ellipsis (…) when there is some additional action required after the action (popup, dialog, confirmation) and it isn't clear by the action itself. This doesn't mean you should use an ellipsis whenever an action displays another window only when additional information is required to perform the action. Consequently, any command button whose implicit verb is to "show another window" doesn't take an ellipsis, such as with the commands About, Advanced, Help (or any other command linking to a Help topic), Options, Properties, or Settings. So maybe an ellipsis of some kind: in button's label or in the icon? More so, it's a part of too. If we were to stick with keeping an icon regardless, this regular feels like a better choice, with the arrow denoting there would be some kind of external interface but the enclosed square representing that it is not an external redirection, thus denoting some kind of popup or modal.
I think these guides are saying that the ellipses should be when the button opens a window that requires the user to enter more information or perform another action. This isn't the case here, so I don't think they are warranted in this instance. If we want to use a new icon then I would suggest we use one that has . I'm not suggesting that we use this exact icon. This is just an example of what I'm suggesting.
I second the use of some kind of variation of that icon. There's a small issue though, there's no such icon in the font awesome library for this so we'll have to find a different way to implement this.
Font awesome has an icon that could have the same meaning: Alternatively Material Icons has a specific preview icon if these can be used?
can you assign me this task?
issues with label, aren't open for contribution yet. You can however browse the label help wanted for open issues
allright sir
Both and both are plausible.
I'd suggest we should move forward to replace the icon with the icon. Should I move ahead and send over a PR? This is the output - !
Sure. Just make sure we don't need to add other dependencies to get that icon.


Question: assert.equal(locations[7].name, "easter egg"); ``` <del> Your eighth `locations` value should have a `button text` property with the value an array with the strings `2`, `8`, and `Go to town square?`. </del> <ins> Your eighth `locations` value should have a `button text` array with the strings `2`, `8`, and `Go to town square?`. </ins> ```js assert.deepEqual(locations[7]["button text"], ["2", "8", "Go to town square?"]); ``` <del> Your eighth `locations` value should have a `button functions` property with the value an array with the variables `pickTwo`, `pickEight`, and `goTown`. </del> <ins> Your eighth `locations` value should have a `button functions` an array with the variables `pickTwo`, `pickEight`, and `goTown`. </ins> ```js assert.deepEqual(locations[7]["button functions"], [pickTwo, pickEight, goTown]);

reported sentence that looks weird, and I agree. it is used in 4 files here is the sentence I noticed in the last file, we are using deepEquel, should we mention that array's variables' respective position matter?
Can I be assigned to this? We can simply improve it as "property with the value of an array".
contribution isn't open for issues with label , you are more than welcome to discuss how to improve it
I would shorten them to just use ... e.g. "Your fifth value should have a array with three strings."
there is no one has provided a better option yet, so I am opening this for contribution, and when the JS is published, we can come back to this when campers are taking the course. You should follow Tom comment here because no one has answered this, I think it doesn't matter 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.
Hello Sir, can you assign me this issue? hacktoberfest
how does this sounds? "Your fifth locations value should have a with the value being an array consisting of three strings." I for one think we don't need to over explain this, as the values are described in order most people will put them in that exact order.
Although, we are trying to include everyone, you are right this is me trying to overtune something simple. It's good, but we should keep Tom suggestion. In HTML/CSS projects steps, we are using the same sentence structure that Tom mentioned, so there will be comfort, and subtle hints that is an object that carry variables.
you can open a PR, after reading our guideline. more info in this comment
Your fifth locations value should have a property and an array value with three strings. kept most of the original wordings.
Opened a PR for this issue!


Question: #supporter-progress-wrapper .progress { height: 38px; margin-bottom: 0px; <ins> background-color: var(--quaternary-background); </ins> } #supporter-progress-wrapper .progress-bar { padding-top: 8px; <ins> background-color: var(--secondary-color); </ins> }

When you sign in, you get sent to the "welcome" page where it shows the number of donators. The progress bar there is still green. I'm assuming we want to make it some shade of blue or something. <img width="652" alt="Screen Shot 2019-08-21 at 9 17 21 AM" src="https://user-"


Question: Your `sum` function should return the result of calling `.reduce()` on `nums`. ```js <del> assert.match(code, /consts*sums*=(?s*numss*)?s*=>s*nums.reduce(/); </del> <ins> assert.match(code, /consts*sums*=s*(?s*numss*)?s*=>s*nums.reduce(/); </ins> ``` Your `sum` function should return the sum of all numbers in `nums`.

The solution requires that parenthesis do not surround the parameter for the sum function. This is a bit inconsistent since previous projects and steps have either required the parenthesis or has accepted both. Both code answers should be correct. No response Device: [Laptop] OS: [ Windows 11] Browser: [Edge] Version: [120.0.2210.91] No response
Issue is actually with optional space, that's not in regex, as this passes:


Question: - Playwright test files are always with a `.spec.ts` extension. <del> ## Best Practices for writing e2e tests </del> <ins> ## Best Practices for writing E2E tests </ins> <del> This section will explain in detail about best practices for writing and documenting E2E tests based on playwright documentation and our community code-style. </del> <ins> This section will explain in detail about best practices for writing and documenting E2E tests based on Playwright documentation and our community code-style. </ins> ### - Identifying a DOM element <del> Always use the `data-playwright-test-label` attribute to identify DOM elements. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose. </del> <ins> Playwright comes with [multiple built-in locators](https://playwright.dev/docs/locators#quick-guide), but we recommend priritizing the following locators: - `getByRole` for querying semantic elements, whose role is important and allows assistive technology to perceive the page correctly. - `getByText` for querying non-semantic elements such as `div`, `span`, or `p`. </ins> <del> For example: </del> <ins> For example: ```ts await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible(); await expect(page.getByText('Hello World')).toBeVisible(); ``` In cases where the elements cannot be queried using the above-mentioned locators, you can use the `data-playwright-test-label` attribute as the last resort. This attribute is used to identify elements in the DOM for testing with playwright only. It is not used for styling or any other purpose. </ins> <del> ```html <div data-playwright-test-label="landing-page-figure"> <img src="..." alt="..." /> </div> ``` </del> <ins> For example: ```html <div data-playwright-test-label="landing-page-figure"> <img src="..." alt="..." /> </div> ``` </ins> <del> Make sure you use the getByTestId method to identify the element in the test file. </del> <ins> In the test file, you can use the `getByTestId` method to identify the element. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts const landingPageFigure = page.getByTestId('landing-page-figure'); ``` </del> <ins> ```ts await expect(page.getByTestId('landing-page-figure')).toBeVisible(); ``` </ins> ### - Imports <del> Always start with necessary imports at the beginning of the file. </del> <ins> Always start with necessary imports at the beginning of the file. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts import { test, expect, type Page } from '@playwright/test'; ``` </del> <ins> ```ts import { test, expect, type Page } from '@playwright/test'; ``` </ins> ### - Constants <del> Define any constant elements, data sets, or configurations used throughout your tests for easy reference. </del> <ins> Define any constant elements, data sets, or configurations used throughout your tests for easy reference. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts const landingPageElements = { ... }; const superBlocks = [ ... ]; ``` </del> <ins> ```ts const landingPageElements = { ... }; const superBlocks = [ ... ]; ``` </ins> ### - Shared Context <del> If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context. </del> <ins> If tests depend on a shared context (like a loaded web page), use beforeAll and afterAll hooks to set up and tear down that context. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts let page: Page; </del> <ins> ```ts let page: Page; </ins> <del> beforeAll(async ({ browser }) => { page = await browser.newPage(); }); </del> <ins> beforeAll(async ({ browser }) => { page = await browser.newPage(); }); </ins> <del> afterAll(async () => { await page.close(); }); ``` </del> <ins> afterAll(async () => { await page.close(); }); ``` </ins> ### - Descriptive test names <del> Each test block should have a clear and concise name describing exactly what it's testing. </del> <ins> Each test block should have a clear and concise name describing exactly what it's testing. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts test('The component landing-top renders correctly', async ({ page }) => { ... }); ``` </del> <ins> ```ts test('The component landing-top renders correctly', async ({ page }) => { // ... }); ``` </ins> ### - Human readable assertions <del> Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting. </del> <ins> Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it's expecting. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts await expect(landingHeading1).toHaveText('Learn to code — for free.'); ``` </del> <ins> ```ts await expect(landingHeading1).toHaveText('Learn to code — for free.'); ``` </ins> ### - Keep it DRY <del> Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function. </del> <ins> Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts for (const logo of await logos.all()) { await expect(logo).toBeVisible(); } ``` </del> <ins> ```ts for (const logo of await logos.all()) { await expect(logo).toBeVisible(); } ``` </ins> ### - Tests for mobile screens <del> Use the 'isMobile' argument to run tests that incude logic that varies for mobile screens. </del> <ins> Use the `isMobile` argument to run tests that incude logic that varies for mobile screens. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) => { const landingPageImage = page.getByTestId('landing-page-figure'); </del> <ins> ```ts test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({ isMobile }) => { const landingPageImage = page.getByTestId('landing-page-figure'); </ins> <del> if (isMobile) { await expect(landingPageImage).toBeHidden(); } else { await expect(landingPageImage).toBeVisible(); } }); </del> <ins> if (isMobile) { await expect(landingPageImage).toBeHidden(); } else { await expect(landingPageImage).toBeVisible(); } }); </ins> ``` ### - Group related tests <del> Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing. </del> <ins> Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they're testing. </ins> <del> For example: </del> <ins> For example: </ins> <del> ```ts describe('The campers landing page', () => { test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({isMobile}) => { ... }); test('The campers landing page figure has the correct image', async () => { ... }); </del> <ins> ```ts describe('The campers landing page', () => { test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({ isMobile }) => { // ... </ins> }); <del> ``` </del> <ins> test('The campers landing page figure has the correct image', async () => { // ... }); }); ``` </ins> ## How to Run Tests

In the , we say that: But IMHO, test IDs should be used sparingly in cases where we can't use any other locators as an alternative. The issue with test IDs is that it doesn't guarantee the page has the correct text or the page / section of the page has proper element usages (which is important to ensure that our pages are accessible). Here is an example, let's pretend we have the following HTML: If our test only checks for the test ID, the test would pass while this is not a valid implementation of a button and will cause a severe accessibility issue: But if we write the assertion with , the test would fail, which enables us to ensure the validity of the DOM: https://testing- N/A Update the guide and recommend using and instead of . We can also add the link to the for other recommended locators. No response
I agree. Recently, I've opened two PRs with E2E tests, and although I followed the guide and used , it just doesn't feel right to do it this way.
can you assign to me
I've created to update the guide with the new recommendation. For Hacktoberfest PRs that have already been using test IDs, I think we should still respect the authors' efforts and accept their code addition, and we can always improve the tests later on.


Question: عربى 	  中文 	  Português 	   русский 	    Русский 	   Español 	  Ελληνικά

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


Question: - text: Your code should set the font-size property for the h5 tag to 21 pixels. testString: assert($('h5').css('font-size') == '21px'); - text: Your code should set the font-size property for the h6 tag to 14 pixels.  testString: assert($('h6').css('font-size') == '14px');   testString: const regex = /h6s*{s*font-sizes*:s*14pxs*(;s*}|})/i; assert.strictEqual(true, regex.test(code));  ```

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --This is a problem I found in the "Applied Visual Design: Set the font-size for Multiple Heading Elements".Even though the styling of headers in this challenge may be correct,the console gives an error stating that "h6" is not properly styled. I figured this may be due to the minimum-font-size issue of the browsers usually set to 15 or 16px(In Google Chrome and Firefox). Just wondered if we can put a note on the left pane where the question is present. Link Browser Name: Google Chrome Browser Version: 80.0.3987.116 Operating System: Linux
Yes, I believe this has come up before. I would rather see the use regex I think.
But this issue comes up every now and then in the forum. How is it possible for a beginner to use regex in this challenge ocnsidering that they may be only a few days into the course
I meant to use regex to test that users entered "14px". Not that users should use regex at all. Right now the test is checking the value of the as it is rendered by the browser. If we check the input from the user, it wouldn't matter what size the browser gave the element.
I am new to Open Source Contributions,can you guide me on fixing this issue?
I would recommend following the . After that you need to fix the file I linked above and make a pull request. You can also reach out to us in our
Hi How would you target the element inside the tag, as it's inside HTML?
I don't understand. You want to check the CSS of the . Right?
The first part, , isolates the styles for the class. Then you can more easily find if the correct styles are in there.
Thanks It was the variable that I was missing


Question: const oldLog = self.console.log.bind(self.console); self.console.log = function proxyConsole(...args) { <del> logs.push(args.map(arg => JSON.stringify(arg)).join(' ')); </del> <ins> logs.push(args.map(arg => '' + JSON.stringify(arg)).join(' ')); </ins> if (logs.join('n').length > MAX_LOGS_SIZE) { flushLogs(); }

Describe the bug Because the log calls and that returns , just outputs an empty line. This is in contrast to which outputs . To Reproduce Steps to reproduce the behavior: to into the editor. the tests Expected behavior


Question: Your `userData` object should have a `songs` key set to `[...allSongs]`. ```js <del> assert.match(code, /songss*:s*[...allSongs],?/); </del> <ins> assert.match(code, /songss*:s*[s*...allSongss*],?/); </ins> ``` # --seed--

While doing the exercise I observed an inconsistency in the code test of the spread operator when applied to the array. An error occurs when attempting to spread on the next line within the object literal while the test passes when the spread operation is conducted inline. Also in the exercise statement, it is not being mentioned to spread inline Error Received: Spreading both inline and on next line is correct. So, We should probably make test pass for both the cases We should probably make test pass for spreading both inline or on next line. <img width="774" alt="Screenshot 2024-01-07 at 9 05 09 PM" src=""- Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I am Working on this issue
Sorry, I forgot to mention that I was working on this. Also, I didn't see that you were working on this


Question: # --description-- <del> Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat that regex. There is a better way to specify when you have multiple repeat substrings in your string. </del> <ins> Say you want to match a word that occurs multiple times like below. </ins> <del> You can search for repeat substrings using <dfn>capture groups</dfn>. Parentheses, `(` and `)`, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses. </del> <ins> ```js let repeatStr = "row row row your boat"; ``` You could use `/row row row/`, but what if you don't know the specific word repeated? <dfn>Capture groups</dfn> can be used to find repeated substrings. Capture groups are constructed by enclosing the regex pattern to be captured in parentheses. In this case, the goal is to capture a word consisting of alphanumeric characters so the capture group will be `w+` enclosed by parentheses: `/(w+)/`. </ins> <del> To specify where that repeat string will appear, you use a backslash (``) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be `1` to match the first group. </del> <ins> The substring matched by the group is saved to a temporary "variable", which can be accessed within the same regex using a backslash and the number of the capture group (e.g. `1`). Capture groups are automatically numbered by the position of their opening parentheses (left to right), starting at 1. </ins> <del> The example below matches any word that occurs twice separated by a space: </del> <ins> The example below matches a word that occurs thrice separated by spaces: </ins> ```js <del> let repeatStr = "regex regex"; let repeatRegex = /(w+)s1/; repeatRegex.test(repeatStr); repeatStr.match(repeatRegex); </del> <ins> let repeatRegex = /(w+) 1 1/; repeatRegex.test(repeatStr); // Returns true repeatStr.match(repeatRegex); // Returns ["row row row", "row"] </ins> ``` <del> The `test` call would return `true`, and the `match` call would return `["regex regex", "regex"]`. </del> <ins> Using the `.match()` method on a string will return an array with the matched substring, along with its captured groups. </ins> <del> Using the `.match()` method on a string will return an array with the string it matches, along with its capture group. </del> # --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: I found the challenge Regular Expressions: Reuse Patterns Using Capture Groups does not give an adequate description of what capture groups do, I would suggest firstly: restructuring the description so that it gives an adequate introduction, e.g. likening them to variables in that they are references to a portion of the Regex. Showing that we can reference them with and depending on whether it's used outside the regex or within it, respectively. AND ONLY THEN describing that "Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat ..." Add a Link to the page with the problem: Regular Expressions: Reuse Patterns Using Capture Groups Tell us about your browser and operating system: Browser Name: Browser Version: Operating System: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
I don't see a huge problem with how it is now. Certainly things could always be better. If you or someone else wants to give it a slight rewrite and make a PR, I wouldn't object - there are a number of forum posts on this challenge.
I agree with some criticisms that were raised. Thanks for sharing. Here is my suggested changes.


Question: stack exec my-project-exe ``` <del> Слово осторожное, постарайтесь не использовать установку стека даже если он будет устанавливать пакет по всему миру, это не рекомендуется, так как разные версии пакетов совместимы с различными версиями GHC. Следовательно, использование локальной копии пакета с использованием сборки стека - лучший способ следовать. </del> <ins> ## Внимание Постарайтесь не использовать `stack install`, т.к. эта команда будет устанавливать пакет глобально, что не рекомендуется, так как разные версии пакетов могут быть не совместимы с разными версиями GHC. Поэтому лучшим вариантов является локальная установка с использованием `stack`. </ins> <del> ## Привет мир </del> <ins> ## Hellow, world! </ins> ```haskell main :: IO () main = print "Hello Haskell :)" ``` <del> Сохраните код выше в файле с именем «hello.hs» и сохраните. </del> <ins> Сохраните код в файле с названием «hello.hs». </ins> <del> Чтобы скомпилировать пример Hello World, это преобразует наш код haskell в машинные понятные байт-коды. </del> <ins> Чтобы скомпилировать его и запустить, наберите </ins> ```shell stack ghc hello.hs

We need your help in translating the contributing documentations for Arabic, Chinese, Portuguese, Russian and Spanish. There are the individual issues that you can help on, if you speak any of these: [x] Arabic: [ ] Chinese: [ ] Portuguese: [ ] Russian: [ ] Spanish: Please reach out to us in or for any queries. Happy contributing. There is still work pending on this. When you make a PR for this particular issue, do not tag it with instead just reference it with
i want to help you to translate in spanish, but i cannot see the issue
Hi I have updated the post, thanks.
Hi! I want to help you translate the contributing documentations into Chinese.
you did a great job translating the Guide README to French . Maybe you could help us translate the Contributing Doc to French if you have some time?
Hey ! I'd love to help with translating the Contributing Doc to French, I'm going to start working on it.
I'd love to help with translating the FreeCodeCamp Curriculum in Italian and Romanian, Do you know when we can start working on it and when it will be open to work on?
Hi, and thanks a lot for taking the time to contribute to At the minute we are focused to have translations only in the 5 additional languages as you see on the contributing doc. This is primarily because of the operational logistics involved in maintaining the separate platforms. We want these languages to be ready and stable before going firth with other languages. We will definitely consider additional languages in future, however we do not have any timeline on these. We will make an announcement when that happens. Thanks.
Hi Mrugesh, Thank you for getting back to me. I didn't know all of this and I just sent 2 pull requests for Creating the Romanian and Italian translation for the Contribution Guidelines. Mostly I did it after I read Quincy's article "I just got my free Hacktoberfest shirt. Here’s a quick way you can get yours.". At this point, I don't know if I should continue up to 5 pull requests as it says in the article and you just put it on the side until you are ready to go with the Romanian and Italian versions or I should try other modifications for the pull requests.I'm new myself to all of this stuff and I'm trying to learn as fast as possible.

Please let me know how you like me to proceed or what works best in your interest. Thank you. Linda Kovacs
Hi you should close those PRs. Do not worry, they will still count as valid contributions. And you should proceed with working on other areas. We apologise if this were not clarified in due time, and you had to spend your efforts on this. Thanks once again for all your contributions.
I just closed my PR and . Thank you for your help.
I can help with Arabic translation but I have a problem with Document Direction as Arabic is RTL Language. Is there a solution for this issue ?
I have some problems with my pull request for Created Italian translation for the freeCodeCamp README.MD file. Something went wrong. Could you please help me? Here is the link of the file on Github: Thank you.
I have some problems with my pull request for . Something went wrong. Could you please help me? Thank you.
I don't have any translation skills, but I fixed the links in the READMEs to go to the correct language documents that everyone is doing such an awesome job translating.
Thanks for working on the translations for the "Contributing to freeCodeCamp". Here on we are making contributing to translations for contribution docs ad hoc. You are free to make pull-requests for improving these translations. We are closing the issue as these do not need tracking per se. You can raise a fresh issue if you find something incorrect in the existing docs.


Question: import { canFocusEditorSelector, executeChallenge, <ins> inAccessibilityModeSelector, </ins> setEditorFocusability, <ins> setAccessibilityMode, </ins> updateFile } from '../redux'; import { userSelector, isDonationModalOpenSelector } from '../../../redux';

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 A clear and concise description of what the bug is. The Monaco editor contains features for accessibility, specifically a mode for screen reader users which helps in navigating and using the editor effectively. This feature, as of now, must be enabled at the start of each lesson, even after enabling it once at the beginning of the session. To Reproduce Steps to reproduce the behavior: to any lesson in the curriculum. the code editor, set focus to it. alt+f1 to show accessibility help for the editor, and choose to enable the screen reader mode the lesson, advance to the next, and repeat steps two and three Expected behavior A clear and concise description of what you expected to happen. The screen reader mode should have stayed enabled across lessons. Screenshots If applicable, add screenshots to help explain your problem. Desktop (please complete the following information): OS: [e.g. iOS] Windows Browser [e.g. chrome, safari] Chrome Version [e.g. 22] 69.0.3497.100 (Official Build) (64-bit) Smartphone (please complete the following information): Device: [e.g. iPhone6] OS: [e.g. iOS8.1] Browser [e.g. stock browser, safari] Version [e.g. 22] Additional context Add any other context about the problem here. Tested screen reader: NVDA version 2018.3.2 from
Hey, As a part of hacktoberfest, I would like to work on this issue. Can I expect mentorship on this?
I'm new on this too. But if you need help, I would like to work on this issue too.
Can you reproduce this issue?
A group of us are working on this issue for a class project in university. We aim to address this in the next couple of days. We will try and at least present the community with a first iteration of our proposed solution. Just a heads up. If the current developers have any advice or tips, feel free to contact me. Thank you. is the primary developer in the team, working alongside me.
Any updates on this ?
This looks to be fixed, the editor is focused on load.

Can you confirm that this is fixed If so, this can probably be closed.
I don't think it is fixed. It focuses on load by default, but I think that turning on the screen reader mode is separate from just focusing. I don't have a screen reader installed, but if I follow the steps above I keep having to re-enable that mode each time I go to a new challenge.
Sorry, I don’t think the editor should be focused on load, as that means the screen reader user most unfocus it, move back to the heading to read the challenge, then focus it again to write code. Also, I still have to enable accessibility mode on each challenge.
I see now. And I can say that the built in screen reader on osx doesn't do anything with the editor. Is this something we can control? Or is it just part of the monaco editor and we are at their mercy?
VoiceOver on MacOS is… not the best, sadly, when it comes to web apps. If possible, you can send technical info about this to <mailto: is Microsoft’s editor, which seems to be VSCode stripped down to the editor. Perhaps you could contact Microsoft and see if they could add a way to make accessibility states persistent across loads, if this isn’t possible already.
That is annoying. For now you should be able to focus the description by pressing escape (at the moment, it's still in a state of flux), but I'll see about making screen-reader mode something that persists between challenges.
Seeing as how this issue is beyond our control, should we close this and make a new issue about the editor being focused on load? You can feel free to email apple or microsoft if you want Thanks for the advice though.
no need to close this. I think I can fix it.
Yes, we can close this issue.
Quick update. Both the auto-focusing and the persistence of accessibility mode should be fixable. I think I'm about 90% of the way there, but for some reason it stops letting you toggle the accessibility support after a couple of toggles. This, obviously, isn't ideal, but most of the functionality is there.


Question: BackEnd.displayName = 'BackEnd'; BackEnd.propTypes = propTypes; <del> export default reduxForm( { form: 'BackEndChallenge', fields, validate: createFormValidator(fieldValidators) }, </del> <ins> export default connect( </ins> mapStateToProps, mapDispatchToActions )(BackEnd);

Describe the bug Submitting the solution link as "" produces an error. Submitting "" does not. Whenever we submit a solution link "" it is appended with "/api/" so resultant solution gives "Not Found/Timeout error" and the same link submitted without "/" like "" gives solution as accepted. To Reproduce Steps to reproduce the behavior: to on 'solution input box' "https://freecodecamp-" solution gets accepted. "https://freecodecamp-" error Expected behavior This should be tackled as Chrome appends "/" by default to any domain URL you copy, so people who would copy URL from search bars will get URLs appended with "/" hence producing wrong results. This file shows the testString is directly appended with "/api" without checking if the input URL contains "/" at the end or not. Screenshots ! Desktop (please complete the following information): OS: Ubuntu 18 Browser: Google Chrome Version 73.0.3683.75
I am not having this problem - my project will pass the tests with or without the trailing https://fcc-manage-npm- and https://fcc-manage-npm- both pass for me in chrome Can you share a share a screen shot of the error?
Updated
hmm, it's strange that my project will give a good response when that string is appended but not yours https://fcc-manage-npm- - package as response https://freecodecamp- - not found as response not sure what is causing this - the only difference seems to be that I'm using glitch and you're using heroku in fact mine will work like this... https://fcc-manage-npm- so maybe how the two websites process a route or something? can they do that? glitch strips out the extra or something? weird Either way - I think a solution like you suggested would probably work - check if the submitted URL ends in a and remove it if it's there. This same problem probably occurs throughout the whole backend area all over the place.
Weird, would u check with an alternative hosting if the problem persists? If the problem persists the last solution would be stripping the las from input url
Did you try this Above is the actual link processed in the test with an appended , It gives a response with the same as it is shown in the screenshot I posted. So I guess the problem is with the routing of Heroku.


Question: "Add them as a new contact in Screen Hero, then click the monitor-looking button to attempt to share your screen with them.", "Once the Screen Hero session starts, your screen's margins will glow orange. You are now sharing your screen.", "Your pair will have their own cursor, and will be able to type text on his or her and keyboard.",  "Now it's time to tackle our Bonfires.", "Go to http://freecodecamp.com/bonfires and start working through our Bonfire challenges.",   "Now it's time to tackle our Bonfires. You can begin them by advancing to the next challenge.",  "Once you you finish pair programming, end the session in Screen Hero session.", "Congratulations! You have completed your first pair programming session.", "Pair program as much as possible with different campers until you've completed all the Bonfire challenges. This is a big time investment, but the JavaScript practice you get will be well worth it!",

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: "Many HTML elements have children which inherit their properties from their parent HTML elements.", "For example, every HTML element is a child of your body element, and your "jQuery Playground" h3 element is a child of your <div class="container-fluid"&#62 element.", "jQuery has a function called children() that allows you to access the children of whichever element you've selected.",  "Here's an example of how you would use the children() function to give the children of your left-well element the background color of blue: $("#left-well").children().css("color", "blue")",   "Here's an example of how you would use the children() function to give the children of your left-well element the color of blue: $("#left-well").children().css("color", "blue")",  "Give all the children of your #right-well element a color of green." ], "tests": [

On "Here's an example of how you would use the children() function to give the children of your left-well element the background color of blue : $("#left-well").children().css("color", "blue")" Shouldn't it just be color of blue instead of background color of blue?
thank you for pointing this out!!


Question: ); ``` <del> All elements from the first array should be added to the second array in their original order. </del> <ins> All elements from the first array should be added to the second array in their original order. `frankenSplice([1, 2, 3, 4], [], 0)` should return `[1, 2, 3, 4]`. </ins> ```js assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);

Continuing from This is a challenges with the function call used in the test not being visible in the test text. There may be others. The test text should include the function call used.
I'm not sure I understand here Are you referring to this test: How it doesn't say what exactly is being tested? The text should be more specific? edit: This challenge should definitely be renamed to
Sorry, it's this one: All elements from the first array should be to the second array in their original order. assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]); it happens that users use ways that don't agree with an empty array, but fail to understand why it is failing, and the only way for them to see that it was an empty array was to use inside the function and rely on the test logs
So to add, I think the test text should be something like The original text could be changed to be this, or the two could be combined in some way
A suggestion to try to make the description a little clearer: "You are given two arrays and an index. Copy each element of the first array into the second array, in order. Write a function called <codefrankenSplice</codethat receives the two arrays and an integer as the index <coden</codeon the second array where you start inserting the elements of the first array. The <codefrankenSplice</codefunction will return another array with the elements of the first array inserted in the second array starting on the index <coden</code. The input arrays should remain the same after the function runs." Also, to add to the idea expressed on "The first array should remain the same after the function runs.", I would suggest adding the following to that test text saying "In case the second array is empty and n is 0, frankenSplice would return a copy of the first array."


Question: "learn-how-to-ask-and-share-about-educational-and-professional-background": { "title": "Learn How to Ask and Share About Educational and Professional Background", "intro": [ <del> "In this course, you'll learn how to ask about another person's educational and professional backgrouns and you'll learn how to share information about your background as well." </del> <ins> "In this course, you'll learn how to ask about another person's educational and professional backgrounds and you'll learn how to share information about your background as well." </ins> ] }, "learn-how-to-talk-about-hobbies-and-interests": {

There is a typo in this file on this line: This is the ONLY file that needs to be changed. PLEASE READ THE CONTRIBUTOR DOCS BEFORE OPENING A PULL REQUEST 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: If you have any issues with contributing, be sure to join us on the , or on the


Question: } from './utils/env'; import { userRoutes } from './routes/user'; import { donateRoutes } from './routes/donate'; <ins> import { statusRoute } from './routes/status'; </ins> export type FastifyInstanceWithTypeProvider = FastifyInstance< RawServerDefault,

This is a a health check endpoint
Check the issue of internet ping, connect with network [ ]way run of tickettttttttt....... thank


Question: ## --text-- <del> What does Bob want to know about lisa? </del> <ins> What does Bob want to know about Lisa? </ins> ## --answers--

Lisa's name is not capitalized in the question. The question is: The question should be No response Device: all OS: all Browser: all Version: all No response
Thanks for reporting the issue. It's a nice catch! This issue is open to first-time code contributors to this repository. The file that you should be updating is Please make sure you read our as well as our from a pull request, 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: inputVal: 1, marginTop: -200, addElDelay: 2000, <del> msg: 'decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.' </del> <ins> msg: "decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack." </ins> } --fcc-editable-region-- ];

in step 99 of the decimal to binary project (js beta), the instructions are: Set the value of the msg property to the following string: Example Code "decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack." Note that, since the string itself contains double quotation marks, you'll need to escape them with a backslash, or use single quotation marks for your string value. The remarks at the end say we need to escape the 'double quotation marks' in the string, but the string doesn't have any double quotation marks and I'm able to copy the string as-is and submit it with success to move onto step 100. However, in step 100, the string suddenly changes in the code and becomes: 'decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.' And now we can see the double quotes that step 99 was referring to. I'm not sure what happened between step 99 and 100 but I think it is confusing and some fix (to one or the other of these steps) is needed. The above is what I have in the editor in step 99 when I click submit and successfully move forward to step 100. N/A No response N/A No response
As I can see, in the step 99, it shows how to use single quotation marks instead of double so that the string works. And in the 100th step it makes a swap in the use of single and double quotation marks. Is there a need to make the swap in the quotation marks in step 99? As the note would then become useless and would need to be changed also
How do you explain the note? I didn’t see double quotation marks in the string that need a backlash , did you?
All I can infer from the note is that to emphasize that 1 by either "1" or '1' a backlash is required or the need to change the quotation so that it does't count that string as ending at that point. The message has chosen the latter solution.
That is not how you should interpret the note. It clearly uses present tense when it says “the string itself contains quotation marks”. This is undeniable and needs an appropriate fix.

But it's indirectly stating to use whichever method to print the required message right? Possibility1: "decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack." Possibility2: "decimalToBinary(1) returns "1 " (base case) and gives that value to the stack below. Then it pops off the stack." I just made the msg same as step 100
And for that double quotation mark, the note says as the string starts with ", it should end with ", and thus it can't use simply " for "1" and need to use '1' instead. Backlash would be another method to amend this issue as I stated in the message above.
Specifying why it's bad would be a little helpful rather than thumbs down, no?
It's a bit odd that step 100 uses single quotes for the string, while other strings in the file use double quotes instead. To simplify things, I think we could: Remove the note from step 99 Swap the quotation marks of the string from step 100 onward: -
thanks. Incorporated both of your suggestions in the linked PR.


Question: button.btn.btn-primary(type='submit') i.fa.fa-key | Reset Password

Error thrown: The issue seems to be with the dependencies and/or NumPy. Not really sure if it is a peer dependency or if PIL is part of the docker image. Forum post for context The Gitpod boilerplate not to throw errors. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I updgraded with : It installed version. After that was giving errors, and after upgrading it: To the version project appears to work fine. might need updating to these versions.

The use of the term "Gender" as an objective feature variable type with a categorical code value type seems to be an outdated understanding of gender and can be potentially offensive or insulting to those who would identify with the LQBT+ community as there are potentially too many genders to possibly categorize I would suggest the use of the term "Sex" as opposed to "Gender" as this will not effect the overall behavior of the project while also ensuring a safe and inclusive environment for those who identify as genders other than man or woman

A file was create. A file was created. I have the first timers only label. Carefully read through the and the section on working with . After you have read through the contributing docs and fixed the typo, then you will make a PR in this . After you make the PR, someone from the team will review it. If you need help, then please ask on the or . 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!

In lesson 10 of Learn Bash Scripting by Building Five Programs, the directions tell you to use this command: . But the command has an extra in questionnaire. The correct command should be !
I'm going to mark this issue for first-time contributors. Here is the file you should be looking at to work on a fix: Please make sure you have read . 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!
Hello, I have worked on that issue and solved it. Also made the PR , please refer it.
please link this issue in the PR, otherwise they are not linked
Hello, I am following guidelines created a new branch installed coderoad v0.9.3 committed changes on file now running command and getting error Please can anyone give any suggestions
The latest version branch from the repository needs to exist locally:
Mentioned PR.
I see this has been solved multiple times but I'm going to add to that as I complete my first contribution. Great documentation by the way! Super easy to setup my local environment!

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: The requirement "You should set the content security policies to only allow loading of scripts and CSS from your server." breaks the front end page, if it is implemented properly. The helmet security middleware should be at the top of the chain in order to provide maximum benefit to the application. However, if you do this, then the front end page is broken because it relies on jquery to be downloaded from This can be worked around and pass the requirement with a couple of methods, the first is to use the helmet middleware after the route for '/' and before any other routes are defined. The second method is to download a copy of jquery, place it in the project and change to reference the copy. Of the two methods, the second one is more secure as all of your routes have the content security policy and you are controlling the script that is being loaded. This does come at the cost of more disk space and if this was a real world application building a process to watch for updates and/or security fixes to jquery and getting those fixes pushed to the application. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Mozilla Firefox Browser Version: 86.0 Operating System: Windows 10 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): This screenshot shows the network activity without a CSP. Both the favicon from freeCodeCamp and jquery are loaded. The get request is initiated by jquery. ! This screen shot shows the activity when the CSP policy for scripts is set to self. Neither the favicon or jquery are loaded and submitting the form just causes the page to refresh without a call to /api/stock-prices. !
If that's not a part of the task (I'm not sure if it is), then the most convenient might be changing it to not require jquery at all.
Now that I've completed the project and submitted it, I went and looked at the code in demo-projects. The example app, removed the dependency on jquery and hosted its own file with the jquery functionality required rewritten in plain Javascript.

Since the front end piece is not part of the project requirements, I would just update the boilerplate project to use and from the demo-project app.
I made a to the repository to fix this issue. I removed the dependency on jquery and the file from the demo-projects.

Challenge has an issue. User Agent is: <codeMozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/ Firefox/41.0</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code:
Hi, The anchor a you are using should be <a href=""cat photos</arather than <a href=""cat photos </aYou're missing www in the url. Change it and it should work.
The tests are failing because you need to have your set to
, Thank you so much for your help! :+1:


Question:
## Instructions
  The navigation bar in the code is labeled with an id of navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. Notice the (lack of) impact to the h1 position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.   The navigation bar in the code is labeled with an id of navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. After you have added the code, scroll the preview window to see how the navigation stays in place.
 ## Tests

Describe your problem and how to reproduce it: We were in the middle of a meetup that was oriented at beginners, and a camper that was doing this challenge asked me: what does do? I feel like it works exactly as I showed them that it kept the element in place when the page scrolled. The description says it One key difference between the and positions is that an element with a fixed position won't move when the user scrolls. However, it doesn't provide a visible example where the user can scroll and see that for themselves. Add text and styles to invite campers to scroll the content and see how differs from . Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Google Chrome Browser Version: Version 77.0.3865.90 Operating System: Elementary OS Loki 0.4.1 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): ! As you can see, the content isn't scrollable


Question: ```yml tests: - text: Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console. <del> testString: assert(code.match(/(?:json[2].codeNames[1]|json[2][('|")codeNames1][1])/g)); </del> <ins> testString: assert(code.match(/consoles*.s*logs*(s*jsons*[2]s*(.s*codeNames|[s*('|`|")codeNames2s*])s*[s*1s*]s*)/g)); </ins> ```

Not all of the challenges listed in were fixed by . This issue is for the remaining challenges that the aforementioned PR did not modify. The tests for various challenges are too strict about line breaks before method calls. E.g. something like this passes: But this causes the tests to fail: :: Browser Name: Firefox Developer Edition Browser Version: 66.0b9 Operating System: Antergos Linux
I am looking into it
Hi Randel, Do you think something like would help? My concern is, that it would remove spaces in actual strings (if any inside of the code). Shall we move in this direction (means ) or different?
Yes, that is more like what I am thinking. You have valid concerns concerning removing spaces in actual strings. In challenges that do not have specific code strings in the element, we should be fine, so for these specific challenges we could maybe use a helper function like: Then we could use it in the like the following for the or better yet, move the helper function into a special within the with id="html-teardown" like: html <scriptwindow.removeWhiteSpace = str =str.replace(/s/g, ''); </script` and then the test would look cleaner: Lastly, most of the challenges are missing a valid full working solution in the section of the challenge file. The solutions are used to validate the tests still allow a valid solution to pass.
Shall I create PR with changes based on your suggestion for these two specific challenges? Shall we consider to apply the same fix for other challenges? Do you think putting a helper function into section is robust enough at the current moment?
After thinking even more about this, I am going to check with a few other collaborators to see if we already have access to a minifier library we could use instead. If that is the case, then I will let you know how we can use it instead. Then we would not have to worry about accidentally removing white space from code which actually needs to be a part of a string or something. Again, this is not an issue for these particular challenges, but I would rather use something that could be a model for how to best write tests for these types of challenges in the future. Give me a day to get back with you.
I agree. Thanks for the updates.

Looking forward to hearing from you
I have asked who has a very solid understanding of what helper utilities to which we have access.
Any updates on this or shall we use approach described above?
We have concluded for now, we will have to write our own as they do not want to add another package to the library. I think we should actually consider how we can test these types of challenges without resorting to using regex. For example, we should be validating that the code written actual returns the correct JSON response. That is the true test. We might look for a few key methods with regex, but not complete lines of code.