Question: <ins> require('dotenv').config({ path: `${__dirname}/../../.env` }); const core = require('@actions/core'); const { getFiles } = require('../../utils/files'); const { getStrings, changeHiddenStatus } = require('../../utils/strings'); const filename = core.getInput('filename'); const stringContent = core.getInput('string-content'); const hideString = async (projectId, fileName, string) => { const fileResponse = await getFiles(projectId); const targetFile = fileResponse.find(el => el.path.endsWith(filename)); if (!targetFile) { core.setFailed(`${fileName} was not found.`); return; } const stringResponse = await getStrings({ projectId, fileId: targetFile.fileId }); const targetString = stringResponse.find(el => el.data.text === string); if (!targetString) { core.setFailed(`${string} was not found.`); return; } await changeHiddenStatus(projectId, targetString.data.id, false); console.log('string unhidden!'); }; const projectId = process.env.CROWDIN_PROJECT_ID; hideString(projectId, filename, stringContent); </ins>

The challenge title of challenge Use && for a More Concise Conditional is not translatable on Crowdin ! (the greyed out text is for not translatable strings) An other challenge where the title is translatable ! this is the link for crowdin file: markdown file for the challenge:
mind taking a look?
I have manually marked the string as translatable today. After our workflows run tomorrow, I will confirm the string is still translatable - if it is not, I will investigate further.
Reopen if still and issue.
this actually happened again with last update
Just to add that this is also happening in pt-BR. The entry is blocked for translation. I suspect this has to do with the double ampersand.
Hello, we are a group of researchers developing machine learning techniques to locate issues suitable for newcomers, and our model consider this issue as likely a "good first issue". May we recommend you to label it as "good first issue" so newcomers know where to choose? Thank you!
thanks but it is not - this needs to be done through Crowdin pipeline, will need to do it, again


Question: # --description-- <del> Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `datetime` attribute is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text. </del> <ins> Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `time` element is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text. </ins> Here's an example:

<!-- NOTE: If you want to become an author on freeCodeCamp, you can find everything here: --The sidebar text on "Standardize Times with the HTML5 datetime Attribute" says "The datetime attribute is an inline element that can wrap a date or time on a page." The attribute cannot be an inline element. Change it to: "The element is an inline element that can wrap a date or time on a page. " or "The is an inline element that can wrap a date or time on a page.". !
Hey good spot there I'll sort this


Question: ); }; <del> const MainFormControl = Object.assign(FormControl, { Feedback, Static }); </del> <ins> FormControl.Feedback = FormControlFeedback; FormControl.Static = FormControlStatic; </ins> <del> export { MainFormControl as FormControl }; </del> <ins> export { FormControl }; </ins>

onChange: func value?: string componentClass?: string placeholder?: string name?: string required?: string rows?: 4 type?: 'text' 'url'FormControl FormControl.Feedback
Form control for chapter: Need to alter the props to account for chapter needs, here is the link to the chakira component
Which prop is being used in the chapter that we are not passing in the component library? Since chapter views are limited, it might be easier to create the components with learn specifications and use those props to control the component. does that make senes?
Instead of checking the chaikra library and comparing it with the current component, I am better off checking chapter itself for prop it's using. for example, in this file we are using and , so I note these down and check if these 2 props are different from the props we are using. depend on how different they are, I may do from the follow: Add new value to existing prop. Add new prop to the component. Do nothing.
Here is what I propose we do. We could continue building the components with the learn spec and ship them. For the second sprint, we collect the Chapter requirements and update the components accordingly.


Question: "update-email": "Update my Email", "verify-email": "Verify Email", "submit-and-go": "Submit and go to next challenge", <ins> "submit-and-go-2": "Submit and go to next challenge (Ctrl + Enter)", "submit-and-go-3": "Submit and go to next challenge (Command + Enter)", </ins> "go-to-next": "Go to next challenge", <ins> "go-to-next-2": "Go to next challenge (Ctrl + Enter)", "go-to-next-3": "Go to next challenge (Command + Enter)", </ins> "ask-later": "Ask me later", "start-coding": "Start coding!", "go-to-settings": "Go to settings to claim your certification",

We are using the class to conditionally hide some text on mobile screens: This class comes from Bootstrap, which is something we are going to remove (). So instead of using the class, we can use an check, like this (which is also a little more consistent with how we've handled this kind of conditional rendering): Update the file to replace the class with an check. I noticed that we are using multiple methods for mobile device detection, so I think the check should be standardized, and there should be a shared util for this check. But I'm leaving this out of the scope of this issue, and will create a separate issue for it.
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.
I already have a pull request that technically resolves this. While it is done the same way we did the lower-jaw i.e checks for a desktop instead of being mobile , it does solve the problem and pass the tests.


Question: # --description-- <del> Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. </del> <ins> Give each `fieldset` an adequate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. </ins> Finally, use the `legend` to caption the content of the `fieldset` by placing a true/false question as the text content. # --hints-- <del> You should give the first `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-one`_ </del> <ins> You should give the first `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-one`_ </ins> ```js assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);

Should be adequate <!-- Please complete the following information. --- Device: [Laptop] OS: [openSUSE Tumbleweed] Browser: [Vivaldi] Version: 5.0]
Thank you for reporting this issue. This is a standard message notifying you that the problem you mentioned here is present in production, but that it has already been fixed in staging (PR ). This means that the next time we push our staging branch to production, this problem should be fixed. Because of this, we're closing this issue. If you think we're wrong in closing this issue, please request for it to be reopened and add further clarification. Thank you and happy coding.
Wait, sorry, there are more adequates to fix. And it seems is doing it


Question: # --description-- <del> Your `output.innerHTML` string will need a `span` element. Create that, and give it a `class` attribute set to the `surplusOrDeficit` variable, but lowercased. </del> <ins> When you need to lower case a string, you can use the <dfn>toLowerCase()</dfn> method. This method returns the calling string value converted to lower case. </ins> <del> Strings have a `.toLowerCase()` method that can help you with this. Do not give your `span` any text yet. </del> <ins> ```js const firstName = 'JESSICA'; console.log(firstName.toLowerCase()); // Output: jessica ``` Your `output.innerHTML` string will need a `span` element. Create that, and give it a `class` attribute set to the `surplusOrDeficit` variable. Your `surplusOrDeficit` variable should be converted to lower case using the `toLowerCase()` method. Do not give your `span` any text yet. </ins> # --hints--

We introduce the method in step 79, but do not provide a code example. For consistency, we should provide code examples for these methods when they are first introduced. js const firstName = 'JESSICA'; (firstName.toLowerCase()); // Output: jessica ` see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the Happy coding
Hello :) newbie here, I am going to tackle this task. PR will be published soon.


Question:
 Директива @if в Sass полезна для проверки конкретного случая - она работает так же, как и оператор if в JavaScript.
 @mixin make-bold ($ bool) {
 @if $ bool == true {
 font-weight: bold;
 }
 }
 И так же, как в JavaScript, @else if и @else test для получения дополнительных условий:
 @mixin text-effect ($ val) {
 @if $ val == опасность {
 красный цвет;
 }
 @else, если $ val == alert {
 цвет: желтый;
 }
 @else, если $ val == success {
 цвет: зеленый;
 }
 @else {
 черный цвет;
 }
 }

 ## Instructions
 Создайте mixin называемый border-stroke который принимает параметр $val . mixin должен проверить следующие условия, используя @if , @else if и @else :
 свет - 1px сплошной черный
 средний - 3px сплошной черный
 тяжелый - 6px сплошной черный
 none - нет границы

 Создайте mixin называемый border-stroke который принимает параметр $val . mixin должен проверить следующие условия, используя @if , @else if и @else :
свет - 1px сплошной черный
средний - 3px сплошной черный
тяжелый - 6px сплошной черный
 Если $val не является light, medium, или heavy, для границы должно быть установлено значение none.
  ## Tests

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Issue Description Following the given instructions. The test will fail for the border-stroke($val) { $val === light { border: 1px solid black; } if $val === medium { border: 3px solid black; } if $val === heavy { border: 6px solid black; } { border: none; } } The checkmark at the bottom left says: "Your mixin should have an statement to set the border to none." and it will pass if using "none" but not "no border" as suggested. My suggestion is to replace "no border" from the instructions with "none" Link to the page with the problem: browser and operating system: Browser Name: Chrome Browser Version: Version 71.0.3578.98 (Official Build) (64-bit) Operating System: MacOs Sierra Version 10.12.6
Are you still facing this problem because on my end the code is working fine?
Hi yes. I still have the same issue. Following the instructions, the last test doesnt pass ! If I put 'border: none' in the statement it passes !
I believe the instruction is little misleading. It should have been 'no border - none' instead of 'none - border' as border doesn't doesn't have a property called "no border" but does have a property called "none". I could change the description of it to reduce confusion. Please let me know if this clarifies your concern or if it is a completely different issue.
yes, it has clarified my issue. Thank you for your help.


Question: return str.match(regex); } <del> --fcc-editable-region-- </del> function addEntry() { const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`); const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length; <del> const HTMLString = ``; </del> <ins> const HTMLString = ` --fcc-editable-region-- --fcc-editable-region-- `; </ins> } <del> --fcc-editable-region-- </del> ```

The test for Step 44 does not pass as it should when the user creates a newline with a newline literal, and not by pressing the enter key on their keyboard and making the string extend by a line. The challenge should report successful, as the created label has a newline before it. ! ! Device: Desktop, Arch linux, Firefox OS: 6.6.7-arch1-1 Browser: Firefox Version: 120.0.1 (64-bit) No response
Ran into this issue in the today.
Not sure I understand why we care if there is a new line. If this requirement is meant as a code formatting requirement we shouldn't allow the use of and instead change the text to be more precise. Simply changing "with" to "on" might be enough.
Yeah I would improve the instruction as well, instead of changing the tests. The starting code of the subsequent steps have this line on a new line, so I think we should guide campers to follow the same format here.
so it is not a parsing issue then but an instruction issue?
I would say so. I can't imagine the text "Start your with a new line" in any way referring to using . I think it just needs to be clarified.
I can easily imagine people interpreting that as using a at the beginning of the string. Also, this appears to be the first time a step uses multiple lines in a template literal, so it may not be obvious to the user that you can do that, and thus they might think that is their only option. I'm struggling to find a reason why we care whether they use or an actual hard return here? Maybe the point is to teach that template literals allow for multi-line strings? If that's the case then we need to explain that in the instructions. Otherwise, this restriction of not allowing seems rather capricious.
Which is why I said it should be clarified. As far as I'm concerned the new line asked for only serves as code formatting. It has no other importance. <sAllowing doesn't make sense as it does not produce the same code as going down on a new line before creating the element (also it doesn't do anything useful). </sEdit: never mind I thought they had a space as well. But as I said initially, I do not see the importance of testing for the new line.

It seems fairly irrelevant.
What about changing the seed code so the user does not need to do this at all? That seems like a good solution to me. Change the instructions to:
It looks like we are still getting users on the forum, getting stuck on this issue. I vote we move forward with 's suggestion of just updating the instructions and changing the editable regions to make it super clear where they need to write their code.
This is what I have and can't still move ahead: function addEntry() { const targetInputContainer = document.querySelector(); const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length; const HTMLString = `; HTMLString = <labelEntry ${entryNumber} Name</label`;
Hey Instead of asking for help here, please click the "Help" button on the challenge on freeCodeCamp, which will help you create a question in the right part of the forum. Volunteers on the forum usually respond to questions within a few hours and can help determine if there is an issue with your code or the challenge's tests. Thank you and happy coding.


Question: Inside the callback function, create a new `const` variable called `collisionDetectionRules` and assign it an empty array. <del> Inside that array, add a boolean expression that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </del> <ins> Inside that array, add a boolean expression that checks whether the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </ins> # --hints--

following task ask for : reading this line suggests/ indicates to me writing an "if" statement inside of the array although that could be my understanding of the sentence my suggestion would be to update the sentence to the following No response Device: [macBook pro] OS: [Ventura 13.4.1 ] Browser: [chrome ] Version: [121.0] No response
Hi ! Thank you for creating this issue. I think the re wording makes sense. The only thing, I would change would be the first part of that sentence. We should mention explicitly that they are adding to the array. I will go ahead and open this up for contribution for
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the Happy coding
I updated the instructions of step 78 and committed the changes. Please have a look at that Thank you
I am sorry but since I am new to open-source contributions, I accidentally closed the previous PR. I am making a new Pull Request please have a look at that.


Question: background-color: var(--theme-color); } <del> #universal-nav-logo img { </del> <ins> #universal-nav-logo svg { </ins> display: block; width: auto; height: 25px;

Nav logo should be served a react svg component in the codebase for reference. The alt text should read: ''
Removing the first timers, because it may not be very trivial.
I would love to get this done. Please assign it to me.
Issue assignment is not necessary, we accept the first valid PR, which follows our contribution guidelines.
Thanks for the heads up, I thought we still followed the assignment rule like in the past. I will submit a PR soon.
There you go, making an exception because of your interest :) Happy contributing!
Hi how is this coming along. Are you still working on this?
Hi I will be making a PR today hopefully. Was stuck in some other work.
Hi I ran into an Eslint issue, when I converted SVG to JSX the svg path code is so lengthy that I get Any hint on how I can manage this? tried running the but it doesn't work.
You should be able to wrap using the lines at 80 in your code editor if you happen to use VS Code? Let's make a PR or share a link to your repo/branch for more context. Thanks.
Created a PR with ESLint max-len disabled. I tried wrapping the code to multiple lines but some string blocks are very long and would break the svg if put on a new line.


Question: ```yml tests: <del> - text: Tu elemento <code>p</code> debe tener el <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px. testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");' </del> - text: Declara una consulta <code>@media</code> para dispositivos con una <code>height</code> menor o igual a 800px. <del> testString: 'assert(code.match(/@medias*?(s*?max-heights*?:s*?800pxs*?)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");' </del> <ins> testString: assert($("style").text().replace(/s/g ,'').match(/@media(max-height:800px)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");' - text: Tu elemento <code>p</code> debe tener el <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px. testString: 'assert($("style").text().replace(/s/g ,'').match(/@media(max-height:800px){p{font-size:10px;?}}/g), "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");' - text: Tu elemento <code>p</code> debe tener el inicial <code>font-size</code> de 20 px cuando la <code>height</code> del dispositivo sea maior a 800 px. testString: assert($("style").text().replace(/s/g ,'').replace(/@media.*}/g, '').match(/p{font-size:20px;?}/g), Your <code>p</code> element should have an initial <code>font-size</code> of 20px when the device <code>height</code> is more than 800px); </ins> ``` </section>

Challenge: I have seen issues with this challenge on the forum a number of times. The is using the computed properties but because you can set a minimum font size in the browser this may not work. In Chrome, you can use and set the minimum font size to be greater than 10px. If you then run the test it will fail. Changing the test to use a regex instead might be better. I'm not sure if this proposed change will fix all problem cases but it will at least take care of any minimum font size set in the browser. It should likely also fix any browser compatibility issues. I say that because this is one of the challenges where switching browsers often seem to help people pass the test.
Can I look at this issue? I was able to replicate the issue in my Chrome too.
I also want to point out that the following code passes even if it's incorrect because the way we test right now. <img width="565" alt="Screen Shot 2019-04-08 at 2 36 36 PM" src="https://user-"
I think one possible solution (avoiding regex) is just have the original style section as: and then have the camper change the font-size to 20px or 25px with the media query. The main reason people change this setting to something greater than 10px, is because the resolution on many screens is higher than it used to be, so 10px seems "small".
That is true. This will involve changing the tests.
That makes sense. Chaing the size will surely fix the original issue. Also, yes we do have to change the test for fixing the issue I pointed out above. Can I work fixing both of these issues? Also, do you want me to make a different new issue for the problem I pointed out or is it okay to have PR under this issue?
Actually, the more I think about this, we can not just look at the computed value regardless of the font-size we are looking for, because we don't have a way of mocking the user's screen height. We really need something like puppeteer to simulate the screen height at below and above 800px to validate the correct size is used. I guess we are stuck with using regex for both tests.

I suggest we also add a new test which validates the normal font-size for p elements is 20px, so the user does not change the seed code. Then, I suggest we rearrange the tests, so the current second test becomes the first. There is no need to modify the test below because we just want to make sure they are using a media query of any kind and this test does validate that. The second test (currently the first test) is where we will need to make sure the media query is used and that the font-size will be 10px when the height is less than or equal to 800px. This means the new second test's regex will be very similar to the first test's regex, but it will validate the exists inside the media query definition. Go ahead and take a shot at the tests using what I have described above. Also, go ahead and remove the assert message arguments from the s, as they are no longer needed. $('style').text().replace(/s/g ,''): In an effort to simplify both tests regex, I suggest targeting the element's text and removing all white space by using:
Thank you so much for providing me detail information on things that I should get started with. It is good that we no longer need message argument from the testString as it was just repetitive. I will get started with this.
Here is the order of the test: media query is declared right or not (currently the second test) font-size is set to 10px or not for screen size lower than 800px using media queries. (using regex). the normal font-size for p elements is 20px. For number 3, I can only think of a regex solution. Because we cannot test the normal font-size using the following (screen is usually below 800px). However, if we use regex to check if then the 3rd test will pass and second will fail if a person has the following code. Please let me know if this will be a problem. Should I just proceed with regex for the 3rd test as well?
To check number 3 above, you should strip out any media query (using regex with a replace) and then validate that you find:
That sounds like a valid test. I will work on it and push a PR.


Question: describe('request-authorization', () => { describe('isWhiteListedPath', () => { const authRE = /^/auth//; <ins> const confirmEmailRE = /^/confirm-email$/; </ins> const newsShortLinksRE = /^/n/|^/p//; <ins> const publicUserRE = /^/api/users/get-public-profile$/; const publicUsernameRE = /^/api/users/exists$/; </ins> const resubscribeRE = /^/resubscribe//; const showCertRE = /^/certificate/showCert//; // note: signin may not have a trailing slash const signinRE = /^/signin/; <ins> const statusRE = /^/status/ping$/; </ins> const unsubscribedRE = /^/unsubscribed//; const unsubscribeRE = /^/u/|^/unsubscribe/|^/ue//; const updatePaypalRE = /^/donate/update-paypal/; const whiteList = [ authRE, <ins> confirmEmailRE, </ins> newsShortLinksRE, <ins> publicUserRE, publicUsernameRE, </ins> resubscribeRE, showCertRE, signinRE, <ins> statusRE, </ins> unsubscribedRE, unsubscribeRE, updatePaypalRE

These should be available without any access tokens: [x] Used for public profile views. [x] Used for confirming and email. [x] Health Check


Question: return array; // Only change code above this line } <del> mergeSort([1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]); </del> ``` # --solutions--

The following challenges have an example function call in the seed code. These function calls should be removed and the related tests should be clarified to reflect the call instead. This sorting challenge is correct and could be used for reference.
Hi, nhcarrigan. I'd like to try to help and solve it. I'm still learning about the project so I would like to ask a question so I can understand the issue better. There is a function call in the file.. bubleSort([1,2,3....]) (example: implement-bubble-) ! And it should be removed from the seed section and transferred to here, similarly to implement-quick-sort: ! ! Is it correct or are there other files that I should be concerned about?
That is correct, yes - this same change should be completed on the four files I've linked. I would, however, recommend holding off on working on this until we receive additional consensus that this is the best way to proceed. If you run in to any questions, feel free to review our or ask in our or the .
Sounds great!! Thanks for the fast response. I will wait until further notice.
Hi MuriloMarquesSantos, are you still interested in fixing this issue?


Question: # --hints-- <del> You should use an `a` element selector. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('a')); ``` </del> You should give the `a` element a `color` of `#dfdfe2`. ```js <del> assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); </del> <ins> const linkElement = document.querySelector("a"); assert.equal(window.getComputedStyle(linkElement)?.color, 'rgb(223, 223, 226)'); </ins> ``` # --seed--

Multiple CSS selectors are valid for this challenge, but only passes the tests. My code passes the tests. No response Device: Laptop OS: Windows 11 Browser: Edge Version: 119 Related: ,
I think the best thing to do here would be to query the DOM for the element directly, check the resulting colour from the query, and assert it is the colour we expect.
Before : ! After Adding the CSS block : ! The color changes, but the cant proceed forward successfully. I wish to contribute
Umm, I'm having second thoughts about this issue. Is it by design that the challenges only check one or two answers? I've seen few other complaints so maybe the vast majority of campers don't have a problem. Don't fix what's not broken, as they say...
I've heard it said before here that valid code should always pass. Ya, you don't need all of those elements in the selector list to change this link color, but the instructions are ambiguous enough that they don't say you can't have them. Granted, most people aren't going to get that detailed, but I have seen more than a few times in the forum where people used or for this step and can't figure out why it isn't passing, even though the hint is telling them to just use . So I do think this step should be fixed and suggestion is right on. Unless we want to change the instructions to require that they only use the element in the selector list.
This issue is open for contribution. The file that you should be updating is Requirements: Remove the "You should use an element selector." test Replace with in the "You should give the element a color of ." test 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: The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. <del> Add `http` and `socket.io` as a dependency and require/instantiate them in your server defined as follows: </del> <ins> Add `socket.io@~2.3.0` as a dependency and require/instantiate it in your server defined as follows, with `http` (comes built-in with Nodejs): </ins> ```javascript const http = require('http').createServer(app);

Advanced Node and Express section needs package versions to the instructions, as discussed in: Example: " Add <codepassport.socketio</codeversion <codeX.X.X</code, <codeconnect-mongo</codeversion <codeX.X.X</code, and <codecookie-parser</codeversion <codeX.X.X</codeas dependencies and require them as <codepassportSocketIo</code, <codeMongoStore</code, and <codecookieParser</coderespectfully. " Before this is undertaken: [x] Wait for to be merged [ ] Discuss which versions to use and how to convey this ( or )
I am leaning more toward the requirement, myself. With the carat prefix, will install the latest minor version. In theory, updates to the minor version are backwards compatible and shouldn't create any issues with the tests or challenges. However, minor versions can include depreciation notices like . The feature will still work, but this could be confusing to a camper. Using the tilde prefix means will install the latest patch version, which includes bug fixes but shouldn't lead to any depreciation notices. I think this will offer the best long-term compatibility with our tests and challenge instructions.
Well, it has happened: Last versions which definitely work: I have tested this. Now, discussion: 1) Just ask for to be installed 2) Also change the lesson/code to work with this latest version?
Hey how is this show stopper coming along?
Ah yes... I have updated the label, because it should have been removed by . Can a PR automatically remove an issue's label? Otherwise, this issue is still open and help wanted , as there are many packages which need their versioning fixed. If no one else, I can slot in some time for this tomorrow.
No rush. Thanks for confirming, I have removed the assignment since this is no longer a showstopper.
thank you so much for the Thank you for the suggestion. It helped me alot


Question: As seen in the previous challenge, `const` declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function `Object.freeze` to prevent data mutation. <del> Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. </del> <ins> Any attempt at changing the object will be rejected, with an error thrown if the script is running in strict mode. </ins> ```js let obj = {

At the top, the challenge says, " Any attempt at changing the object will be rejected without an error." A few lines later it says, "The and obj.newProp assignments will result in errors". This seems to be conflicting information - will there be an error or not? Maybe the 2nd part should say "The and obj.newProp assignments will be rejected". !
Oddly, when I run the tests I can see an error in the log: [TypeError: Cannot assign to read only property 'PI' of object '#<Object'] But when I run the same code in jsFiddle there is no error in the console. Update: When I add "use strict" in jsFiddle I get an error. This challenge should definitely mention that you only get an error in strict mode! One of the previous challenges about "let" and "const" mention strict mode briefly, but it might be good to explain strict mode more. This page was helpful:
I do agree that some clarification here would be beneficial. Possibly changing that first line to `Any attempt at changing the object will be rejected, with an error thrown if the script is running in strict mode. And the second line being Thoughts?
That seems like a good solution Nich, I'll put a help wanted label on it!


Question:
"
", "
", "
",  "      The message will go here","
",   "      The message will go here", "
",  "
", "
", "
",

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


Question: You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. ```js <del> assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); </del> <ins> assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); </ins> ``` # --seed--

An issue was brought up in the forum where the user could not pass the challenge using firefox. They had the correct code and weren't using browser extensions. On google chrome and safari the test does pass. The test will only pass on Firefox using this code Correct answer not passing in firefox <img width="936" alt="Screen Shot 2022-01-25 at 8 44 56 AM" src="https://user-"Incorrect answer passing in firefox <img width="981" alt="Screen Shot 2022-01-25 at 8 45 31 AM" src="https://user-"- Device: [macbook pro] OS: [macOs Catalina] Browser: [Firefox] Version: [96.0.2]
Step 14 has the same issue. This is the correct code that passes in google chrome <img width="905" alt="Screen Shot 2022-01-25 at 8 57 21 AM" src="https://user-"Here is the same code but it doesn't pass with firefox <img width="915" alt="Screen Shot 2022-01-25 at 9 00 09 AM" src="https://user-"


Question: ] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Recursos", "descriptionEs": [ "El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.", "Puedes ver y editar toda esta información dentro del navegador.", "A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.", "Revisa documentación más detallada aquí: developers.google.com/web/tools/iterate/manage-data/index" ] </ins> }, { "id": "56b15f15632298c12f31517e",

[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: margin-top: 1.45rem; } <ins> .intro-layout p, .intro-layout li { font-family: 'Lato', sans-serif; } </ins> .intro-toc .list-group-item { margin: 5px auto; }

<!-- 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: Add a Link to the page with the problem: 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):


Question: extends ../layout-wide block content <del> .text-center h1 Challenge Map p Required challenges are marked with a * .row .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4 .btn.btn-primary.btn-block.active#showAll Collapse all challenges hr #accordion for superBlock, index in superBlocks h2 i.fa.fa-caret-down |   a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) | #{superBlock.name} div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") #nested for challengeBlock in superBlock.blocks h3 i.fa.fa-caret-down |   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(W)/gi, '').split(' ').join('-')) | #{challengeBlock.name} (#{challengeBlock.time}) div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition") .button-spacer for challenge in challengeBlock.challenges if challenge.completed p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title span.sr-only= " Complete" else if challenge.isRequired p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title span.sr-only= " Incomplete" if challenge.markNew span.text-success.small     strong em New if challengeBlock.isComingSoon span.text-success.small     strong em Coming Soon span.text-primary     strong * else p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title span.sr-only= " Incomplete" if challenge.markNew span.text-success.small     strong em New if challengeBlock.isComingSoon span.text-success.small     strong em Coming Soon .spacer </del> <ins> .map .map-fixed-header.text-center h1 Challenge Map p Required challenges are marked with a * .row .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4 .btn.btn-primary.btn-block.active#showAll Collapse all challenges hr #accordion.map-accordion for superBlock, index in superBlocks h2 i.fa.fa-caret-down |   a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) | #{superBlock.name} div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") #nested for challengeBlock in superBlock.blocks h3 i.fa.fa-caret-down |   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(W)/gi, '').split(' ').join('-')) | #{challengeBlock.name} (#{challengeBlock.time}) div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition") .button-spacer for challenge in challengeBlock.challenges if challenge.completed p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title span.sr-only= " Complete" else if challenge.isRequired p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title span.sr-only= " Incomplete" if challenge.markNew span.text-success.small     strong em New if challengeBlock.isComingSoon span.text-success.small     strong em Coming Soon span.text-primary     strong * else p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title span.sr-only= " Incomplete" if challenge.markNew span.text-success.small     strong em New if challengeBlock.isComingSoon span.text-success.small     strong em Coming Soon .spacer </ins>

I really do like the SideCar (I'm assuming that's what your using) Map menu! It gives really quick access to previous challenges. It would cool if the "collapse all challenges" area was fixed to top and everything would slide under it. That way, users wouldn't have to scroll all the way up or down if they're looking for something specific - they would just collapse everything and go to the specific component they're looking for.
I agree. Totally makes sense to have it fixed to the top somehow.
I'm going to start working on this now, should have a PR open shortly.


Question: ### --feedback-- <del> Places where you can buy and eat food. Don't forget the stress mark. </del> <ins> Places where you can buy and eat food. Don't forget the stress mark (`é`). </ins> # --scene--

Describe the bug Task 37 requires typing in one of the blanks. This can be problematic due to the letter, which might not be present in the used keyboard layout. Expected behavior I don't want to say to use completely different word for the fill the blank, as at some point there might be no other choice. There could be some kind way to ease up procuring of the letter in question, for example including it in the feedback, so it can be copied.
Hi I would love to work on this. If someone could point me in the right direction, that would be amazing!
Hi Thank you for being eager to contribute. This issue has not been triaged yet. Feel free to share your insights and ideas on the matter. However as far as the code contributing, take a look at the issues with label. 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. Thank you and happy coding.
Yes, I think in both of those challenges we can update the "Don't forget the stress mark." in the feedback to: "Don't forget the stress mark ()."
I will open the issue to contribution with this as the solution


Question: background-image: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); } <del> .btn-link { </del> <ins> .btn-link, .btn-link:focus, .btn-link:active { </ins> color: inherit; border: none; text-decoration: underline; background: transparent; <ins> padding: 0; outline: 0; </ins> } <del> .btn-link:hover { </del> <ins> .btn-link:hover, .btn-link:focus:active { </ins> background: var(--tertiary-background); text-decoration: none; color: inherit;

Describe the bug The 'Show other ways to donate' button looks like a link until you click on it, when it looks like a button. To Reproduce Steps to reproduce the behavior: to /donate on 'Show other ways to donate' : ! Expected behavior I think it should always look like a button, since clicking on it modifies the page rather than takes you to a new one.
I'll look into this.
Thanks If you could check with Ahmad as to what he wants here before submitting a PR (since he's worked on the formatting very recently), that would be great. I suspect he's a little busy right now, though, so I just put this issue here to keep track of it.
Yeap. I'll talk to him after a day or two.
Please assign this to me if possible.
i see your concern with consistency, and this button looks like a link by design. The behaviour is caused by the :focus state of the button. thanks for your interest. we could make the button behave identical to a link by targeting :hover and :focus:hover styles. Let's agree on the solution before the implementation. on a second thought this might not even be an issue. before the users click on the button, it looks like a link so they are not distracted from the main task. but when users click on it, the focus state keeps the button more visible. what do you think?
The other ways to donate should be an actual link and styled as such not a button.
if you are still interested in working on this issue, could please go ahead with replacing the 'Show other ways to donate' button with an actual link with onClick={this.toggleOtherOptions}.
Thanks! Going straight away to fix it.


Question: "g means that we want to search the entire string for this pattern.", "i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "Regular expressions are usually surrounded by / symbols.",  "Let's try selecting all the occurances of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the .+ part of our regular expression with the current regular expression with the word and."   "Let's try selecting all the occurrences of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the .+ part of our regular expression with the current regular expression with the word and."  ], "tests":[ "assert(test==2, 'Your regular expression should find two occurrences of the word and');",

In waypoint description there is a word with missing letter "r" and wrong letter - "a" instead "e" . I don't know English well, therefore this typo a slightly confused me:) !


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

to replicate. go to incognito do not sign in go to learn choose a challenge !
I can take a look at this
thank you. There might to be other inconsistencies with the theme. If you try different scenarios like switching the theme, logging in logging out, and visiting the challenge page. That should expose any related issues that needs fixing. let me know if I could be of any help.
in displaytheme is in charge of the code editor's theme. and in the theme colors get injected. we need night mode by default if not signed in
I haven't tested, but it does look like the cause. Hope you don't mind raising a PR, since I don't want to take your credit
I pointed it out for you. But yea, I have it ready.


Question: "difficulty": "1.06", "description": [ "Return an array consisting of the largest numbers in the provided array. The array will contain 4 sub-arrays.", <del> "Remember, you an iterate through an array with a simple for loop, and access each member with array syntax arr[i] .", </del> <ins> "Remember, you can iterate through an array with a simple for loop, and access each member with array syntax arr[i] .", </ins> "If you are writing your own Chai.js tests, be sure to use a deep equal statement instead of an equal statement when comparing arrays." ], "challengeEntryPoint": "largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);",

Need to document the rename challenge tool and the i18n sync tool. Sometime later this week. Not urgent.
I can take this on?
Go for it, Thanks!
I will start with the rename challenge tool, for the i18n sync, I will wait news if it works now


Question: In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.       When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:

There is a typo in the alt text: Fix the typo in the following files:
This issue is open to first-time code contributors to this repository. The files that you should be updating are linked in the original post. We typically do not assign issues. Instead, we accept the most quality contribution followed by the one that is made first. Please make sure you read our as well as our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Happy contributing.


Question: import { createExecuteChallengeSaga } from './execute-challenge-saga'; import { createCurrentChallengeSaga } from './current-challenge-saga'; import { challengeTypes } from '../../../../utils/challengeTypes'; <del> import { userSelector } from '../../../redux'; </del> export const ns = 'challenge'; export const backendNS = 'backendChallenge';

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

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


Question: "testString": "assert(code.match(/.penguins*?{[sS]*--penguin-skins*?:s*?grays*?;[sS]*}/gi), 'penguin class should declare the --penguin-skin variable and assign it to gray.');" }, {  "text": "penguin class should declare the --penguin-skin variable and assign it to white.", "testString": "assert(code.match(/.penguins*?{[sS]*--penguin-bellys*?:s*?whites*?;[sS]*}/gi), 'penguin class should declare the --penguin-skin variable and assign it to white.');"   "text": "penguin class should declare the --penguin-belly variable and assign it to white.", "testString": "assert(code.match(/.penguins*?{[sS]*--penguin-bellys*?:s*?whites*?;[sS]*}/gi), 'penguin class should declare the --penguin-belly variable and assign it to white.');"  }, {  "text": "penguin class should declare the --penguin-skin variable and assign it to orange.", "testString": "assert(code.match(/.penguins*?{[sS]*--penguin-beaks*?:s*?oranges*?;[sS]*}/gi), 'penguin class should declare the --penguin-skin variable and assign it to orange.');"   "text": "penguin class should declare the --penguin-beak variable and assign it to orange.", "testString": "assert(code.match(/.penguins*?{[sS]*--penguin-beaks*?:s*?oranges*?;[sS]*}/gi), 'penguin class should declare the --penguin-beak variable and assign it to orange.');"  } ], "solutions": [],

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --There is a type in the challenge "Basic CSS - Use CSS Variables to change several elements at once" The tests are asking the user to update the colours for three times, where it should be , and respectively Browser Name: Chrome Browser Version: 66.0.3359.181 Operating System: macOS Sierra 10.12.6 !
I'd be happy to make a pull request, but I don't know where to find the code
Hi I just ran into this issue too. I think you can found the code on . It's from line 4303.
Since it was a typo on the assignment why was it not changed simple penguin class should declare the --penguin-skin variable and assign it to gray. Passed penguin class should declare the --penguin-belly variable and assign it to white. Passed penguin class should declare the --penguin-beak variable and assign it to orange. Instead of all these plenty grammar and drama


Question: You should assign a list comprehension that iterates over `row` to the `row_str` variable. ```js <del> ({ test: () => assert(runPython(`_Node(_code).find_class("Board").find_function("__str__").find_for_loops()[0].find_bodies()[0].find_variable("row_str").find_comp_iters()[0].is_equivalent("row")`)) }) </del> <ins> ({ test: () => (runPython(` import ast var = _Node(_code).find_class("Board").find_function("__str__").find_for_loops()[0].find_bodies()[0].find_variable("row_str") assert var.find_comp_iters()[0].is_equivalent("row"), "You should iterate over row" assert isinstance(var.tree.value, ast.ListComp), "It's not a list comprehension" `)) }) </ins> ``` The list comprehension assigned to the `row_str` variable should use `i` as iteration variable.

The step asks for a list comprehension, but the following code is accepted as a solution (with parenthesis): I believe the step must only accept the list comprehension with square brackets []: No response Device: Laptop OS: Windows 11 Browser: Brave Version: 1.64.116 No response
Thank you for reporting this issue. I don't think this is a huge problem, since the code works well with a generator expression too. However, since the instructions are asking for a list comprehension, it makes sense to fix the test. The helpers do not discriminate between the various comprehension types, so I'd import the module and check if the value of the variable is an instance of . This additional check should take place within .


Question: - text: Your red-box class should have a padding property. testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px'); - text: Your red-box class should give elements 1.5em of padding.  testString: assert(code.match(/.red-boxs*?{(s|.)*?padding:s*?1.5em/gi));   testString: assert(code.match(/.red-boxs*?{[sS]*padding:s*?1.5em/gi));  ```

I'm doing some practice at the link below but when I pressed "Run The Test" button the webpage froze Browser Name: Firefox Browser Version: 70.0 Operating System: Linux Mint 18.3 (Sylvia) !
When it happens: The issue happens if the test isn't done correctly, that is, if the padding of .red-box is not equal to 1.5em. If you set the padding to anything other than 1.5em or don't set the padding at all, the page freezes with some process running on an infinite loop probably (my laptop's fan started to turn on full speed). Can be reproduced on the following browsers: Browser Name: Google Chrome Browser Version: 78.0.3904.70 (Official Build) (64-bit)Browser Name: Chromium Browser Browser Version: 78.0.3904.70 (Official Build) snap (64-bit)Browser Name: Brave Browser Browser Version: 0.69.135 Chromium: 77.0.3865.120 (Official Build) (64-bit)Browser Name: Firefox Browser Version: 70.0 (64-bit) Canonical Operating System: Ubuntu 19.10
Definitely a regex issue -- pasting it into results in catastrophic backtracking. My first guess is the capture group just goes to infinity, happy to take a closer look.
I already made sure I put the padding with 1.5em within the red-box css class
Then there might be another issue, but when I tested, the issue only happened when the padding wasn't equal to 1.5em. If it was equal to 1.5em, the test passed and the modal with the save progress and go to next challenge came up and worked correctly.
This could be helped with landing, but the current automated challenge test suite needs to be replaced for the PR to be accepted. A potential solution is coming, but time estimates are long.
How does PR close this issue?
Not sure, go give it a test. My browser crashed on production and didn't when looking at this PR.
fixes a bad capture group in the regex for the solution test that was capable of causing stack overflow


Question: savedChallenges, isChallengeCompleted, output, <del> executeChallenge </del> <ins> executeChallenge, previewMounted </ins> }: ShowClassicProps) { const { t } = useTranslation(); const [resizing, setResizing] = useState(false);

On the initial loading of a Step the preview is showing in the preview pane, but if you either open the preview in the pop-out window or toggle the preview pane off/on then the preview does not load again. All Steps in New RWD preview in pop-out window (preview does not load) page Preview button to toggle preview pane off/on (preview does not load) Preview should load in both pop-out window and after the preview pane has been toggled off/on. No response Verified with Chrome/Firefox on both Linux and Win11. Possibly related to issue , but I think this is newer and slightly different.
Just discovered that if you make any change in the editor (such as adding a single space) then the preview will refresh and display again. But you have to do that every time you either open the pop-out window or toggle the preview pane.
When the preview is blank the iframe attributes are not updated either (which makes sense I guess, it looks to be the default values). Blank before updating: After updating: It feels like a state issue.
The preview also disappears if you toggle the Instructions on any of the certification projects.
Yes, that's a separate issue. I dig around at this a bit, seems to have caused the problem. Before it, these issues aren't present.


Question: # --description-- <del> You have accessed elements (characters) of a string before, using the index operator `[]`. You can also use the index operator to access a range of characters in a string with `string[x:y:h]`: </del> <ins> You have accessed elements (characters) of a string before, using the index operator `[]`. You can also use the index operator to access a range of characters in a string with `string[start:stop:step]`: </ins> ```python my_string = 'camperbot' <del> camper = my_string[0:6] cp = my_string[0:6:3] </del> <ins> my_string[0:6] == 'camper' # True my_string[0:6:3] == 'cp' # True </ins> ``` <del> Where `x` is the starting index, `y` is the ending index, and `h` is the step (the amount of characters to skip over). </del> <ins> Where `start` is the starting index (inclusive), `stop` is the ending index (exclusive), and `step` is the amount of characters to skip over. If not specified, `step` is default to 1. </ins> Create a variable named `card_number_reversed` and assign it the value of the first 4 characters of `card_number`.

In step 10 of Luhn Algorithm, we teach campers how to create a substring using the operator. I think the explanation is a little short and could improved by: Adding comment next to each example, showing the result of each operation (we are currently communicating the value via the variable name, but I don't think it's clear enough) Mention that the starting index is inclusive, and the ending index is exclusive Additionally, I think we could: Change to to have the syntax more self-descriptive Mention that the default value of is 1 Perhaps the description should be changed to: python mystring = 'camperbot' mystring[0:6] == 'camper' # True my_string[0:6:3] == 'cp' # True `
Different project but same kind of example: I remember we decided not to use because of translations, but using them in the code example and then explain what they mean is fine :+1:
are we able to open this up for contribution?
Personally, I'd prefer to change the snippet into the following: I agree with all the rest.
I've updated the issue description with Dario's code snippet. This issue is open for contributions. We typically do not assign issues. Instead, we accept the most quality contribution followed by the one that is made first. Please make sure you read our as well as our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Happy contributing.
Whoops, sorry. I just noticed that Farhan is assigned to the issue. Are you working on this or could we mark this one up-for-grabs?
Yeah please mark this as up for grab


Question: ] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Variables y capitalizaciónCamello", "descriptionEs": [ "Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (camelCase).", "Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.", "Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.", "Tu 'declaras' variables por primera vez con var en frente de ella, pero después puedes referenciarla más adelante en tu programa.", "capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.", "Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre." ]  }, { "id": "56b15f15632298c12f31518a",

[ ] JavaScript Lingo: MDN and Documentation [ ] JavaScript Lingo: Value Types [ ] JavaScript Lingo: Variables & camelCase [ ] JavaScript Lingo: Arrays & Objects [ ] JavaScript Lingo: Finding and Indexing Data in Arays [ ] JavaScript Lingo: Manipulating Data [ ] JavaScript Lingo: Math [ ] JavaScript Lingo: Loops [ ] JavaScript Lingo: Regular Expressions
Working on this one


Question: **User Stories:** 1. You should have an `input` element with an `id` of `"search-input"` <del> 1. You should have a `button` element with an `id` of `"search-button` </del> <ins> 1. You should have a `button` element with an `id` of `"search-button"` </ins> 1. You should have an element with an `id` of `"pokemon-name"` 1. You should have an element with an `id` of `"pokemon-id"` 1. You should have an element with an `id` of `"weight"`

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


Question: }: FormControlProps): JSX.Element => { const { controlId } = useContext(FormContext); <del> const defaultClasses = 'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' + 'bg-background-primary bg-none rounded-none border-1 border-solid ' + 'border-background-quaternary shadow-none ' + 'transition ease-in-out duration-150 focus:border-foreground-tertiary'; </del> const Component = componentClass || 'input'; <del> let variantClass; </del> if (Component !== 'textarea') variantClass = ' h-8'; //row and componentClass

onChange: func value?: string componentClass?: string placeholder?: string name?: string required?: string rows?: 4 type?: 'text' 'url'FormControl FormControl.Feedback
Form control for chapter: Need to alter the props to account for chapter needs, here is the link to the chakira component
Which prop is being used in the chapter that we are not passing in the component library? Since chapter views are limited, it might be easier to create the components with learn specifications and use those props to control the component. does that make senes?
Instead of checking the chaikra library and comparing it with the current component, I am better off checking chapter itself for prop it's using. for example, in this file we are using and , so I note these down and check if these 2 props are different from the props we are using. depend on how different they are, I may do from the follow: Add new value to existing prop. Add new prop to the component. Do nothing.
Here is what I propose we do. We could continue building the components with the learn spec and ship them. For the second sprint, we collect the Chapter requirements and update the components accordingly.


Question: "difficulty": "2.10", "description": [ "Sum all the prime numbers up to and including the provided number.", <del> "A prime number is defined as having only two divisors, 1 and itself. For example, 2 is a prime number because it's only divisible by 1 and 2. 1 isn't a prime number, because it's only divisible  by itself.", </del> <ins> "A prime number is defined as having only two divisors, 1 and itself. For example, 2 is a prime number because it's only divisible by 1 and 2. 1 isn't a prime number, because it's only divisible by itself.", </ins> "The provided number may not be a prime." ], "challengeEntryPoint": "sumPrimes(10);",

Need to document the rename challenge tool and the i18n sync tool. Sometime later this week. Not urgent.
I can take this on?
Go for it, Thanks!
I will start with the rename challenge tool, for the i18n sync, I will wait news if it works now


Question: Your `HTMLString` should be an empty template literal. ```js <del> assert.match(code, /HTMLStrings*=s*``/); </del> <ins> assert.match(code, /HTMLStrings*=s*`n?s*`/); </ins> ``` # --seed--

The test for Step 44 does not pass as it should when the user creates a newline with a newline literal, and not by pressing the enter key on their keyboard and making the string extend by a line. The challenge should report successful, as the created label has a newline before it. ! ! Device: Desktop, Arch linux, Firefox OS: 6.6.7-arch1-1 Browser: Firefox Version: 120.0.1 (64-bit) No response
Ran into this issue in the today.
Not sure I understand why we care if there is a new line. If this requirement is meant as a code formatting requirement we shouldn't allow the use of and instead change the text to be more precise. Simply changing "with" to "on" might be enough.
Yeah I would improve the instruction as well, instead of changing the tests. The starting code of the subsequent steps have this line on a new line, so I think we should guide campers to follow the same format here.
so it is not a parsing issue then but an instruction issue?
I would say so. I can't imagine the text "Start your with a new line" in any way referring to using . I think it just needs to be clarified.
I can easily imagine people interpreting that as using a at the beginning of the string. Also, this appears to be the first time a step uses multiple lines in a template literal, so it may not be obvious to the user that you can do that, and thus they might think that is their only option. I'm struggling to find a reason why we care whether they use or an actual hard return here? Maybe the point is to teach that template literals allow for multi-line strings? If that's the case then we need to explain that in the instructions. Otherwise, this restriction of not allowing seems rather capricious.
Which is why I said it should be clarified. As far as I'm concerned the new line asked for only serves as code formatting. It has no other importance. <sAllowing doesn't make sense as it does not produce the same code as going down on a new line before creating the element (also it doesn't do anything useful). </sEdit: never mind I thought they had a space as well. But as I said initially, I do not see the importance of testing for the new line.

It seems fairly irrelevant.
What about changing the seed code so the user does not need to do this at all? That seems like a good solution to me. Change the instructions to:
It looks like we are still getting users on the forum, getting stuck on this issue. I vote we move forward with 's suggestion of just updating the instructions and changing the editable regions to make it super clear where they need to write their code.
This is what I have and can't still move ahead: function addEntry() { const targetInputContainer = document.querySelector(); const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length; const HTMLString = `; HTMLString = <labelEntry ${entryNumber} Name</label`;
Hey Instead of asking for help here, please click the "Help" button on the challenge on freeCodeCamp, which will help you create a question in the right part of the forum. Volunteers on the forum usually respond to questions within a few hours and can help determine if there is an issue with your code or the challenge's tests. Thank you and happy coding.


Question: # --description-- <del> You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your `form` element. </del> <ins> You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an `action` attribute on your `form` element. </ins> For example:

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: align-items: center; max-width: 960px; margin: 0 auto; <ins> padding: 0 20px; </ins> } @media screen and (max-width: 630px) { .learn-page-wrapper { <del> padding: 0 25px; </del> <ins> padding: 0 15px; </ins> } }

the text is touching the edges of the screen when the screen is between 650 and 750 pixels. Probably needs to wrapped in a grid container but not sure. <img width="706" alt="screen shot 2019-02-19 at 9 10 15 am" src="https://user-"
I have created PR to fix this. There was a media query that sets padding for small sizes (<630px device width). So I just padding for larger devices.


Question: projectFormValuesSelector(state) ); const endingText = dedent( <del> `**Your browser information:** User Agent is: <code>${userAgent}</code>. **Challenge:** ${challengeTitle} **Link to the challenge:** ${href}` </del> <ins> `${i18next.t('forum-help.browser-info')}nn${i18next.t( 'forum-help.user-agent', { userAgent } )}nn${i18next.t( 'forum-help.challenge' )} ${challengeTitle}nn${i18next.t( 'forum-help.challenge-link' )}n${href}` </ins> ); <del> let textMessage = dedent( `**Tell us what's happening:** Describe your issue in detail here. </del> <ins> let textMessage = dedent(`${i18next.t( 'forum-help.whats-happening' )}n${i18next.t('forum-help.describe')}nn </ins> ${ projectFormValues.length <del> ? `**Your project link(s)**n` : `**Your code so far**` </del> <ins> ? `${i18next.t('forum-help.camper-project')}n` : i18next.t('forum-help.camper-code') </ins> } ${ projectFormValues ?.map(([key, val]) => `${key}: ${transformEditorLink(val)}n`) ?.join('') || filesToMarkdown(files) <del> } ${endingText}` ); </del> <ins> }nn ${endingText}`); </ins> const altTextMessage = dedent( <del> `**Tell us what's happening:** **Your code so far** WARNING The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge. You will need to take an additional step here so the code you wrote presents in an easy to read format. Please copy/paste all the editor code showing in the challenge from where you just linked. ``` Replace these two sentences with your copied code. Please leave the ``` line above and the ``` line below, because they allow your code to properly format in the post. ```n${endingText}` </del> <ins> `${i18next.t('forum-help.whats-happening')}nnnn${i18next.t( 'forum-help.camper-code' )}nn${i18next.t('forum-help.warning')}nn${i18next.t( 'forum-help.too-long-one' )}nn${i18next.t('forum-help.too-long-two')}nn${i18next.t( 'forum-help.too-long-three' )}nn```n${i18next.t('forum-help.add-code-one')}n${i18next.t( 'forum-help.add-code-two' )}n${i18next.t('forum-help.add-code-three')}nn```n${endingText}` </ins> ); const category = window.encodeURIComponent(helpCategory || 'Help');

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: --- # --description-- <del> Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements. </del> <ins> Now that you have some basic understanding of `block` and `inline` elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements. </ins> # --question--

There are some small issues that need to be fixed in the following files: optionfor elementsinline"Check your code" String` This looks like something that can be fixed by "first-time" code contributors to this repository. The files you should look at to work on a fix are those linked above. Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi I'd like to work on this issue. Thanks
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: ## Byzantine Fault Tolerance Imagine the scenario where there is an empire and there are three generals with their respective armies at different positions. All of them must attack in order to win the fight or they can choose to retreat. Their only means of communications are through pigeon posts. But there is a problem, the generals can't trust each other or ensure that the message has not been corrupted along the way. How do they solve this problem? Blockchain essentially does so by listening to information broadcasted by other people, reaching to a consensus of which information is deemed true. As such, this model asssumes that the amount of "traitors" do not exceed more than 1/3 of the entire network. <ins> ## Modern Use Cases of Blockchain - Asset Tokenization : Using blockchain technology, previously illiquid assets can now be converted into its tokenized form and cheaply and efficiently fractionalized, traded and settled on chain (rather than go through the lengthy process of clearing and settlement process through third parties like clearing houses) - Supply Chain Management : Blockchains allow multiple parties to access a database to act as the single source of truth. Recorded transactions are immutable, are append only and provide a time stamped audit trail. - Digital Identity : A self sovereign ID can be used to verify identity without needing an individual to produce numerous documents and paperwork each time they need their identity verified. This could be done with a single key that can be matched against an immutable ledger. The digital ID can also collect other online information about a user’s identity like social security information, medical records and social media credentials and have that stored securely on the blockchain. - Energy Market : Blockchain technology can enable the smart metering of electricity generated through an individual’s solar panels to be recorded, traded and settled on a ledger. - Healthcare : Using blockchain technology to record patient information on a distributed ledger can allow different stakeholders conditional access to a single source of truth where each interaction with a patient’s health data can be recorded on a ledger as a transaction with a time stamped audit trail. </ins> ## Issues Whilst blockchain technology is undoubtedly elegant, there are several problems that its presence brings, the main one being use my malicious third parties. Due to the extremely secure nature of blockchain, its technologies are often used by criminals to carry out transactions, which are impossible for governments to track.

None of the FCC pages (logged in or out) has a footer bar or footer menu with relevant links for users to follow. Adding a footer bar with links to more info about FCC: Blog link (currently no link anywhere), Creative Commons/ Open Source License/ Copyright, Github and Social Media links, Privacy Policy, Forum and Chat links Not only will this make exploring FCC much easier but will be great for SEO as well.
I agree but only on the logged in page, we don't want any distractions from our conversions.
Good point
Closing this as the footer is now integrated, and all links can be found either there or in the header. Please open a new issue to suggest changes to those elements.


Question: # --hints-- <del> You should reassign and empty array to your `diceValuesArr` variable. </del> <ins> You should reassign an empty array to your `diceValuesArr` variable. </ins> ```js assert.match(code, /consts+rollDices*=s*(s*)s*=>s*{s*diceValuesArrs*=s*[s*]s*;?/);

There is a typo in the Hint Message of Step 15 of Building a Dice Game, as shown in the Screenshots area. I will raise a PR for it since it is just a typo. The hint message should display: "You should reassign an empty array to your diceValuesArr variable." ! Device: Laptop OS: Windows 11 Browser: FireFox Version: 125.0.2 (64-bit) No response


Question:
## Instructions
  The navigation bar on this site currently inherits its background-color from the header element. Starting with that color as a base, add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.   All elements have a default background-color of transparent. Our nav element currently appears have a cyan background, because the element behind it has a background-color set to cyan. Add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.
 ## Tests

Not really an issue but it threw me off. In the visual design challenge linked below, the second paragraph states that the navigation bar inherits its background from the header. Well I wondered so I set the position of the navigation to relative and the top to 20px (and the header text color black so you can see the white text against the white body) and clearly the background of the nav isn't cyan, it's white. Children have transparent backgrounds. That's why they seem cyan against a parent with a cyan background. Browser Name: Chrome Browser Version: Version 68.0.3440.106 (Official Build) (64-bit) Operating System: MacOS !
Interesting wording. It wouldn't be right to say the children of an element inherit its background color. The initial value of is The simplest solution to this would just be a change of wording
Fixed in
This was fixed in . / / please close it


Question: function LinkedList() { var length = 0; var head = null; <ins> var currentNode = null; </ins> var Node = function(element){ this.element = element; this.next = null;

Tests run with the error: "assignment to undeclared variable currentNode". It happens because a variable "currentNode" is not declared in the method in the challenge code (not in the student code). Link: Steps to reproduce: the challenge. the button "Run the Tests". The challenge code: = function(element){ var node = new Node(element); if(head === null){ head = node; } else { currentNode = head; ...
Closing this issue, because it was fixed by PR
perhaps there was a regression. This bug is still present. Visit the link above and click 'Run the Tests'. You will see I did a hard refresh in two browsers to be sure. I also, checked the master branch. And it appears the code is fixed there. Is this something that is still waiting for a release?


Question: "dashedName": "waypoint-add-two-numbers-with-javascript", "difficulty": "9.98141", "description": [  "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use +for addition",   "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use +for addition.",  "Replace the 0with correct number to achieve the result in the comment." ], "tests": [

Challenge has an issue. In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions <-- Let's try a few of the most commonly used ones now <-- We use - for subtraction <---
merged to

Challenge has an issue. In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions <-- Let's try a few of the most commonly used ones now <--- We use * for multiplication <---
merged to

Challenge has an issue. in JavaScript we can can work with decimal numbers <--- needs full stop.
merged to


Question: } }; <del> exports.createPages = function createPages({ graphql, actions }) { </del> <ins> exports.createPages = function createPages({ graphql, actions, reporter }) { if (!env.algoliaAPIKey || !env.algoliaAppId) { if (process.env.FREECODECAMP_NODE_ENV === 'production') { throw new Error( 'Algolia App id and API key are required to start the client!' ); } else { reporter.info( 'Algolia keys missing or invalid. Required for search to yield results.' ); } } </ins> const { createPage } = actions; return new Promise((resolve, reject) => {

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


Question: You should use the concatenation operator on your `result` variable. ```js <del> assert.match(code, /results*+/); </del> <ins> assert.match(code, /(?:results*+|+s*result)/); </ins> ``` You should concatenate `row` to your `result` variable. ```js <del> assert.match(code, /results*+s*row/); </del> <ins> assert.match(code, /results*+s*row|rows*+s*result/); </ins> ``` You should assign the result of your concatenation back to the `result` variable. ```js <del> assert.match(code, /results*=s*results*+s*row;?/) </del> <ins> assert.match(code, /results*=s*(results*+s*row|rows*+s*result);?/); </ins> ``` # --seed--

A camper on the forum had issues with passing step 37 of the pyramid project This was their code Their code is correct but the tests expect a certain order of The tests should be updated to expect either correct answer see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
const character = "#"; const count = 8; const rows = []; for (let i = 0; i < count; i = i + 1) { (i); } let result = "" for (const row of rows) { result = + ; (result); } This worked for me, it took a while but realized I needed to swap the result with the row... This was helpful thank you
Thank you for this,I was really stuck


Question: <img src="https://cdn.freecodecamp.org/platform/universal/fcc_secondary.svg"> ``` <del> Inside the existing `img` element, add an `src` attribute with this URL: </del> <ins> Inside the existing `img` element, add a `src` attribute with this URL: </ins> `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`

I noticed that we are using both "a attribute" and "an attribute" in challenge descriptions. And we even use both in the same challenge (): <img width="596" alt="Screenshot 2024-05-21 at 22 44 29" src=""I think both are acceptable, since the articles depend on how we pronounce "src" ("es-ar-see" vs "source"), but I think we should stick to one for consistency. I'll let native English speakers make the call
I always pronounce it as , so I vote
I'm with Jessica on this one. The second sentence should be changed to .
This issue is open to first-time code contributors to this repository. The files that you should be updating are: Please make sure you read our as well as our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi everyone. This is a great pick up! I am happy to help out there and will get a initial PR up for review today :)
I have reviewed the changes made in PR, all the related file have been fixed correctly and checked locally.
Hello, This is my first Open source contribution so if you guys can give me feedback on what i did wrong and how i should correct it please guide me. from the seven files mentioned above, I have created pull request for each one which is as below. sorry if i messed up, as it is my first try. I am actively looking for any advice, suggestion, criticism. Thank You.


Question:
Do you have any questions:

  <textarea id="css-question" name="css-question" rows="5" cols="24"> Who is flexbox... </textarea>   <textarea id="css-question" name="css-question" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --<!-- Add a link to the coding challenge with the problem. -- The final instructions for this step say: "Then, give the placeholder text describing an example answer." Since the instructions mention "placeholder" I think it is safe to assume that some people will think they should use the attribute on the to fulfill this requirement. But the code check test checks the of the : So using the attribute will result in the following hint: "You should give the placeholder text describing an example answer." Which does not make it clear that the example answer should be embedded in the instead of using the attribute. Based on the current instructions I think most users will assume that the attribute should be used to complete this step and the test should be updated accordingly. <!-- Please complete the following information. --- Device: Desktop OS: Linux/Fedora 34 Browser: Firefox Version: 95.0.2
On
I was going to fix this issue by updating the test in step 38 to check the placeholder attribute on the textarea but then I realized that if we make this change then the HTML in each step after 38 would also need to be updated to use the placeholder attribute as well. So the question is, do we want to use the placeholder attribute and update all of the remaining steps or do we want to reword the instructions in step 38 to make it clear that you should embed the question text in the textarea and not use the placeholder attribute?
That's a good question. The placeholder text matches wording from referring to the attribute. That would make me think, the intention is to use the attribute.
Agreed, this should probably be updated to use the placeholder attribute. Looks like I've got a lot of updates to include in the PR.
Thank you, for opening this. When I wrote this, I vaguely remember reading a resource mentioning using the attribute on was not the recommended approach. However, as I cannot find that, I agree using the attribute in this case seems like the better option. Yes, this will require a rewrite for all subsequent lessons. However, this usually is a simple Find and Replace.
Perfect. I'll submit a PR for this in just a bit.


Question: 'project.backEnd': submitProject }; <del> function shouldShowDonate(state) { return showDonationSelector(state) ? of(openDonationModal()) : empty(); } </del> export default function completionEpic(action$, state$) { return action$.pipe( ofType(types.submitChallenge), switchMap(({ type }) => { const state = state$.value; const meta = challengeMetaSelector(state); <del> const { isDonating } = userSelector(state); </del> const { nextChallengePath, introPath, challengeType } = meta; <del> const showDonate = isDonating ? empty() : shouldShowDonate(state); </del> const closeChallengeModal = of(closeModal('completion')); let submitter = () => of({ type: 'no-user-signed-in' }); if (

Donate modal is rendered/animated twice when invoked
Steps to reproduce. Complete at least 9 challenges. See modal once per session.
alternatively, change this line to true and get the modal after completion of each challenge.
Just in case someone tackle this before I get back to it. it seems like the app gets updated after the donate modal is up. so that might be causing the flashing. redux devtools actions order: <img width="338" alt="screen shot 2019-02-22 at 6 46 38 pm" src="https://user-"devtoolds error: <img width="642" alt="screen shot 2019-02-23 at 12 19 40 pm" src="https://user-"and here is where the modal is being called:


Question:
"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Presentar imágenes de fuentes de datos", "descriptionEs": [ "Tanto en el JSON que recibimos de la API de fotos de gato de Free Code Camp, como en ", "lo que hemos visto en las dos últimas lecciones, cada objeto en nuestro vector JSON contiene una llave imageLink con un valor que corresponde a la url de la imagen de un gato.", "Cuando estamos recorriendo estos objetos, usemos esta propiedad imageLink para visualizar la imagen en un elemento img.", "Aquí está el código que hace esto:", "  html += "<img src = '" + val.imageLink + "'>";" ]  }, { "id": "bb000000000000000000005",  "title":  "Prefilter JSON",   "title": "Prefilter JSON",  "description": [ "If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.", "Let's filter out the cat who's "id" key has a value of 1.",

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


Question: assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions'); ``` <del> You should use an `a` element to link to the terms and conditions. </del> <ins> You should use an `a` element to link to the terms and conditions. ```js assert.exists(document.querySelector('fieldset:nth-child(3) + label a')); ``` You should put the new text immediately after the `input` element in the `label`. </ins> ```js assert.exists(document.querySelector('fieldset:nth-child(3) + label > input + a'));

The current instructions say: But they don't specifically say where the new text should be within the . If you add the text before the (with the anchor correctly to the text) then you get the following hint: This creates even more confusion since the anchor was correctly. I think these instructions are relying on the fact that the text for the radio buttons was after the and thus the assumption is that the text for the check box should also be after the . And I agree that usually the text for radio buttons/check boxes is placed after the , but this is not a requirement. Also, in step 26 when we have them add the text for the radio buttons, we explicitly say "immediately after the element", so it seems like this is important information to add. N/A Change the instructions to: I should have done better testing :slightlysmilingface: The tests don't care if there is a space between the and the text. We might also want to update the tests so it gives a better hint if they put the text before the . No response N/A No response
I like the proposed change in wording.
Please let me know if there are any other changes needed.
the issue is not marked as ready for contribution yet.
This issue has been around for a while and I'm still seeing it come up in the forums. Do we need any more discussion on this? Two things to fix in this PR: Update instructions to make it clear that the text comes after the Fix the test that is erroneously telling the user they need to add an anchor element when it is already there.
I don't think so, no. The requirements are nice and clear, thanks!