Question: **Desktop (please complete the following information):** - OS: [e.g. iOS] <del> - Browser [e.g. chrome, safari] - Version [e.g. 22] </del> <ins> - Browser: [e.g. chrome, safari] - Version: [e.g. 22] </ins> **Smartphone (please complete the following information):** - Device: [e.g. iPhone6] - OS: [e.g. iOS8.1] <del> - Browser [e.g. stock browser, safari] - Version [e.g. 22] </del> <ins> - Browser: [e.g. stock browser, safari] - Version: [e.g. 22] </ins> **Additional context** Add any other context about the problem here.

Describe the bug There's some formatting inconsistency in the issue templates. To Reproduce Steps to reproduce the behavior: to create an issue the issue template and you'll find the formatting inconsistency Screenshots !
Good catch Also want to thank you for helping a new contributor with the process of submitting a pull request.


Question:
"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Cambia texto con eventos de pulsación", "descriptionEs": [ "Cuando nuestro evento de pulsación ocurre, podemos utilizar Ajax para actualizar un elemento HTML.", "Hagamos que cuando un usuario pulse el botón "Get Message", el texto del elemento con la clase message cambie para decir "Here is the message".", "Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:", "  $(".message").html("Here is the message");" ]  }, { "id": "bb000000000000000000002",

[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: # --instructions-- <del> Create a function that returns the $ n^{th} $ member of the sequence using the method outlined above. </del> <ins> Create a function that returns the position in the Stern-Brocot sequence at which $ n $ is first encountered, where the sequence is generated with the method outlined above. Note that this sequence uses 1 based indexing. </ins> # --hints--

Describe your problem and how to reproduce it: Challenge description gives slightly different task, to what needs to be done to pass tests. Challenge is about , which looks at the beginning like (skipping zero at start): Challenge description asks to create function returning n-th member of the sequence. However expected values in tests, and sample solution don't match that. sternBrocot(2) should return 3. sternBrocot(3) should return 5. sternBrocot(5) should return 11. sternBrocot(7) should return 19. sternBrocot(10) should return 39. Function matching tests would be one returning at which position in sequence number is encountered for first time. Original challenge on Rosetta Code - have both these variations as a part of task, so that's most likely how it sneaked in. Add a Link to the page with the problem:
I vote to have the function return the position in the sequence of the argument. We wouldn't need to change the tests, just the description.
I'm in favour of that approach as well.


Question: **Examples** ```js <del> 1 !=  2 1 != "1" 1 != '1' 1 != true 0 != false </del> <ins> 1 !=  2    // true 1 != "1"   // false 1 != '1'   // false 1 != true  // false 0 != false // false </ins> ``` <del> In order, these expressions would evaluate to `true`, `false`, `false`, `false`, and `false`. </del> # --instructions-- Add the inequality operator `!=` in the `if` statement so that the function will return the string `Not Equal` when `val` is not equivalent to `99`.

The student has to go all the way down up to the explanation "In order, these expressions would evaluate to true, false, true, and true." to realize what the result of the operations is. My suggestion is that the second section of the code should look like this: 1 == 1 // true 1 == 2 // false 1 == '1' // true "3" == 3 // true instead of the screenshot attached. <!-- Add a link to the coding challenge with the problem. -- <!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. --!
I would be fine with this change. Any interest in making a PR for it
, Can I? I don't know how to do it and I have never done it in my life, but besides that, I would like to do it by myself using some guide you could give me. I have never used GitHub in the past. And this will help me to contribute even more to this awesome project.
We have some . It may look a little intimidating, but if you follow the instructions it's not bad. The file where this needs to be fixed is Technically, you can edit the file on github and make a PR from there - which can work for some simple fixes, but you can't see and test your changes. I think we would accept those if you want to do that, but I would recommend setting the project up locally at some point if you want to contribute regularly. To be clear, we usually like to get second opinion before making changes like this - since we don't have that, I can't guarantee a PR would be merged - but I think others would be fine with the change so if you want to make a PR, go ahead.
This change seems good. For context, we got rid of a lot of comments since we'd need to translate them. However, these are keywords and don't need translation.
shall I take this up?
Could you clarify if this is actually what we wanted, because this is exactly what we removed 12 months ago in:
Yes, this is okay because these instances specifically are only keywords that don't get translated anyway.


Question: ## The `dashedName` Property <del> The `dashedName` property is used to generate the URL path for the superblock, block, or challenge. These should generally match what the `/utils/dasherize.js` helper would output for the file name. </del> <ins> The `dashedName` property is used to generate the URL path for the superblock, block, or challenge. These should generally match what the `/utils/slugs.js` helper would output for the file name. </ins>

In the The Property section of Curriculum File Structure documentation there's reference to file. That file no longer exists, and the relevant helper function is now in file. It's needed to point to the correct file and/or adjust the wording in the section. Here are the files that you should be looking at to work on a fix: 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: assert.match(code, /checkMessageButton.addEventListener(s*('|"|`)click1s*,s*(s*)s*=>s*{s*ifs*(s*messageInput.values*===s*('|"|`)2s*)s*{s*alert(s*('|"|`)Please enter a message.3s*);?s*returns*;?s*}s*result.textContents*=s*isSpam(s*messageInput.values*)s*?s*('|"|`)Oh no! This looks like a spam message.4s*:s*('|"|`)This message does not seem to contain any spam.5;?s*/); ``` <del> After your ternary, set the `value` of `messageInput` to an empty string. </del> <ins> After your ternary, set the `value` property on the `messageInput` element to an empty string. </ins> ```js <del> assert.match(code, /checkMessageButton.addEventListener(s*('|"|`)click1s*,s*(s*)s*=>s*{s*ifs*(s*messageInput.values*===s*('|"|`)2s*)s*{s*alert(s*('|"|`)Please enter a message.3s*);?s*returns*;?s*}s*result.textContents*=s*isSpam(s*messageInput.values*)s*?s*('|"|`)Oh no! This looks like a spam message.4s*:s*('|"|`)This message does not seem to contain any spam.5;?s*messageInput.values*=s*('|"|`)6;?s*}/) </del> <ins> assert.match(code, /checkMessageButton.addEventListener(s*('|"|`)click1s*,s*(s*)s*=>s*{s*ifs*(s*messageInput.values*===s*('|"|`)2s*)s*{s*alert(s*('|"|`)Please enter a message.3s*);?s*returns*;?s*}s*result.textContents*=s*isSpam(s*messageInput.values*)s*?s*('|"|`)Oh no! This looks like a spam message.4s*:s*('|"|`)This message does not seem to contain any spam.5s*;?s*messageInput.values*=s*('|"|`)6;?s*}/) </ins> ``` # --seed--

We are not assigning the function call to anything. Not 100% sure what the expected error in the code is that we are testing for here. It might be its position. Also, if you forget to use the property on the you are passing to you will get this assert message, which is confusing. I don't think this test should care about the argument to , only the function call position (if that is what we are testing for here). tests: As an aside. We have all the elements and event listeners ready to be used, can't the test use them for at least the last three tests? Give the correct assert messages. 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
We could use this wording for the hint text I believe so. It looks we are testing for and then the next few tests are for the ternary I feel like we still need to check for the actual user message here because if the camper does something like this then they might be missing the point of the challenge. So I think we should update the tests to better check for that. But also, I think the description could be updated to better explain why they need to make these changes. Something like this could work Maybe? It would be nice to cut down on the regex here
"the result of the function call" makes it sound like the element will be assigned the function return value. We are not assigning the result of the function call. We are assigning the expression the ternary condition evaluates to based on what returns. For test 2, if we only care about the position of the function then: Because the regex includes the argument it will cause a false positive where the position can be correct but if you do not use the correct argument you get this assert message. The assert message should be about the function position without making it sound like its return value is being assigned to the element. We check the argument in test 3 and the hint shows the function call with the expected argument.


Question: `<a href="http://freecodecamp.org"> ... </a>` <del> The text, `link to freecodecamp.org`, within the `a` element is called `anchor text`, and will display the link to click: </del> <ins> The text, `link to freecodecamp.org`, within the `a` element is called <dfn>anchor text</dfn>, and will display the link to click: </ins> `<a href=" ... ">link to freecodecamp.org</a>`

Within the the text which reads: is incorrectly formatted - "anchor text" is within backticks and is thus untranslatable on Crowdin. The text in the English file should be updated to use tags instead: This issue is open to first time contributors for this repository. If you are interested in contributing, we recommend you start by reading our . And if you run in to any issues or have any questions, you can reach us in our .
Hi . I would like to work on this.
Hey there Thank you for your interest in contributing. Note that we do not typically assign issues except to long-term contributors. Instead, we generally review and merge the first pull request which comprehensively resolves the issue. Feel free to let us know if you have any questions.


Question: --- title: Cooling Systems --- <del> Your computer contains many parts that generate heat. Heat can cause premature failure and erratic behaviors. The more you overclock the graphics or the CPU, the hotter the computer will run. Cooling systems assure that your computer is stable and you extend the life of your investment. </del> <ins> Your computer contains many parts that generate heat. Heat can cause premature failure and erratic behaviors. The more you overclock the graphics or the CPU, the hotter the computer will run. Cooling systems assure that your computer is stable and help you extend the life of your investment. </ins> ## Case Cooling <del> Case cooling can be a combination of a well ventilated case and the use of fans to circulate air within the case. Most cases come with at least one fan. This is the minimum configuration. For best results, there be at least two fans in the case. One is as an intake to draw in cold air while the other is an exhaust to expel hot air. There are many different types of fans and configurations. Cable management also plays a huge part in cooling the system. Bad cable management and tangled wires disrupt airflow and cause dust to accumulate inside the case. </del> <ins> Case cooling can be a combination of a well ventilated case and the use of fans to circulate air within the case. Most cases come with at least one fan. This is the minimum configuration. For best results, there should be at least two fans in the case. One should be used as an intake to draw in cold air while the other should be an exhaust to expel hot air. There are many different types of fans and configurations. Cable management also plays a huge part in cooling the system. Bad cable management and tangled wires disrupt airflow and cause dust to accumulate inside the case. </ins> ## Components Cooling Cooling devices are available for individual parts on the computer. The two most common are coolers for CPU's and graphics cards. There are generally two types of component cooling systems, active and passive. <del> * Passive Systems - Usually consist of a heat sink or a heat conductive metal attached to the component. Passive cooling works by providing a larger surface to adsorb and dissipate the heat. </del> <ins> * Passive Systems - Usually consist of a heat sink or a heat conductive metal attached to the component. Passive cooling works by providing a larger surface to absorb and dissipate the heat. </ins> * Active Systems - Add a fan to the heat sink and you are actively removing heat. The cooling fan can be dynamically adjusted to the load of the CPU or graphics card on most motherboards. * Liquid Cooling - High performance computers can benefit from a liquid cooled system. These types of systems circulate a liquid between the hot components and a cooling radiator.

<!-- 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 page with the problem: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
I'm taking this


Question: background-color: #c9d2fc; } <ins> --fcc-editable-region-- </ins> .cat-head { width: 205px; height: 180px; border: 1px solid #000; border-radius: 46%; <del> --fcc-editable-region-- --fcc-editable-region-- </del> } <ins> --fcc-editable-region-- </ins> ```

I've run into this several times in the forum in the past week. The active editor is placed within the existing rule set and apparently people don't notice that and instead create a new rule set and add the there. This is what I'm seeing in the forum: I think the active editor should include the entire existing rule set so that it is clear it already exists and that that is where the property should be . We can add an empty line at the bottom of the rule set to indicate where the property should go. No response N/A No response
I definitely agree. I went ahead and made a PR that moves the editable region to include the full selector.


Question:
## Description
  Objective: Build a full stack JavaScript app that is functionally similar to this: https://whatsgoinontonight.herokuapp.com/.   Objective: Build a full stack JavaScript app that is functionally similar to this: https://yoyo44.herokuapp.com/.  Here are the specific user stories you should implement for this project: User Story: As an unauthenticated user, I can view all bars in my area. User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight.

Describe your problem and how to reproduce it: The recipe box demo website does not work because it is using a deprecated yelp api. Add a Link to the page with the problem: (view network log when searching) Tell us about your browser and operating system: Browser Name: Chrome Browser Version: N/A, server side issue Operating System: Ubuntu 18.04 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
I think you are looking at the - and not the recipe box.
Just to clarify, the recipe box demo is here: However, it's true that the nightlife coordination project is currently broken due to the Yelp v2 API being discontinued in favor of . Is this another project we should get working before the release of Next,
Yes - we should find a nightlife coordination project built by someone that uses Yelp Fusion and link to that instead. Could you look around and see if you can find such a project? If not, we may need to retrofit the existing code to use Yelp Fusion.
Bump.


Question: "type": "Waypoint", "challengeType": 7, "isRequired": false, <del> "nameEs": "Prepárate para los Basejumps", </del> <ins> "nameEs": "Prepárate para nuestros Proyectos de Desarrollo al lado del servidor", </ins> "descriptionEs": [ [ "http://i.imgur.com/4IZjWZ3.gif",

[x] Get Set for our Back End Development Projects [x] Timestamp Microservice [x] Request Header Parser Microservice [x] URL Shortener Microservice [x] Image Search Abstraction Layer [x] File Metadata Microservice
Currently working on this.
I just used part of the PR that you closed. Thank you. Blessings.


Question: var challengeType = !{JSON.stringify(challengeType)}; var _ = R; var dashed = !{JSON.stringify(dashedName)}; <del> .col-xs-12.col-sm-12.col-md-8 </del> <ins> .col-md-8.col-lg-9 </ins> .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") #mainEditorPanel form.code

A camper relayed this to me: There is some problem with the first challenge ending button on android with firefox browser. And in this moment I tried in chrome too, the issue is the same, the button is not active after the challenge is done. Xperia Z1 compact, android: 5.0.2, firefox: 39.0 Chrome: 43.0.2357.93
This is an issue whenever the screen size is small. It will also happen on a desktop if you resize the window to half screen or less.


Question:
], "nameEs": "Usa el API JSON de Twitch.tv", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/adBpOw.",   "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/adBpOw.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo verificar si Free Code Camp está transmitiendo en Twitch.tv", "Historia de usuario: Como usuario, puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp's en Twitch.tv.", "Historia de usuario: Como usuario, si Free Code Camp está transmitiendo, puedo ver detalles adicionales acerca del contenido que están pasando.", "Historia de usuario opcional: Como usuario, puedo buscar entre los canales listados.", "Historia de usuario opcional: Como usuario, puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch. Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.", "Pista: Puedes ver un ejemplo de una llamada al API JSONP de Twitch.tv en https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API.", "Pista: La documentación relevante para esta llamada al API se encuentra aquí: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", "Pista: Aquí te mostramos un vector de usuarios de Twitch.tv de gente que transmite programación a menudo: ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"]", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv", "Historia de usuario: Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.", "Historia de usuario: Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.", "Historia de usuario: Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.", "Pista: Obseva una llamada de ejemplo al API JSONP de Twitch.tv en https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API.", "Pista: La documentación relevante sobre esta llamada al API está aquí: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", "Pista: Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"]", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true } ]  }   No newline at end of file  }

[x] Show the Local Weather [x] Stylize Stories on Camper News [x] Build a Wikipedia Viewer [x] Use the JSON API [x] Build a Tic Tac Toe Game [x] Build a Simon Game
Working on this one


Question: import Flash from '../Flash'; import Header from '../Header'; import Footer from '../Footer'; <ins> // preload common fonts import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff'; import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff'; import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff'; // eslint-disable-next-line max-len import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff'; // eslint-disable-next-line max-len import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff'; // eslint-disable-next-line max-len import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff'; </ins> import './fonts.css'; import './global.css';

Describe the bug When you reload a page two style issues appear. The placeholder text moves slightly once the page has fully loaded. The search hits are briefly bold To Reproduce Steps to reproduce the behavior: to (or any page with search) the placeholder text move on the search bar anything the result appear briefly as bold, then change to a normal weight Expected behavior The page should start with the styles it ends up getting. Screenshots !
Hey, I wanna help with it. Where can I find the code for it? (First time contributing)
I'm not 100% sure where the problem is, but the , and components are all involved to some degree. Somehow the are not getting the right classes when first rendered I think. I'm planning to take a closer look myself, tomorrow, but you're welcome to submit a PR/share any insight. As you wish!
It turns out it wasn't anything to do with those components. The problem is that the font doesn't get loaded until it's needed - in this case when the search results appear. That causes a brief flash of and that's the cause of the problem. I'm going to look into pre-loading the fonts and clear this up.


Question: - text: The watchList variable should not change. testString: assert(watchList[0].Title === "Inception" && watchList[4].Director == "James Cameron"); - text: Your code should not use a for loop.  testString: assert(!removeJSComments(code).match(/fors*?(.*?)/));   testString: assert(!removeJSComments(code).match(/fors*?([sS]*?)/));  - text: Your code should use the map method. testString: assert(code.match(/.map/g)); - text: ratings should equal [{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}].

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: I identified three challenges where the for loop validation does not work if newlines are used in the arguments. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Google Chrome Browser Version: 79.0.3945.88 Operating System: Ubuntu 18.04 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): ! ! !


Question: # --description-- <del> For now, remove your first console log and your `rows[2]` assignment. Leave the second `rows` log statement for later. </del> <ins> For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later. </ins> # --hints--

in step 20 of the JS building a pyramid generator project, the step refers to the " rows[2] assignment" but should instead refer to the "rows[ - 1]" assignment as that is the line in the code at that moment (not the "rows[2]" line. As the step begins with the code as given above, the instructions shouldn't say "rows[2]" to refer to the line "rows[ - 1]" (therefore a small correction to the correct line of code is needed) ! Device: laptop OS: windows Browser: chrome Version: No response
Second test also will need to be changed accordingly.


Question: const state$ = { value: { challenge: { challengeMeta: { challengeType: 0 } }, <del> app: { user: { username: 'test' } } </del> <ins> app: { user: { username: 'test' }, allChallengesInfo: { challengeEdges: [], certificateNodes: [] } } </ins> } };

Opening for visibility. I have not seen this happen myself, but I also haven't spent much time in the editor. Link to threads reporting this. Unknown, I guess usage over time. Performance not degrading over time. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I've experienced this issue multiple times. After the donation pop-up appears, the performance of the website becomes laggy. Even after refreshing the page, it returns to normal temporarily, but the lag returns once the donation pop-up reappears. ! Note: the lag doesn't occur immediately after the pop-up, it becomes noticeable as you continue solving challenges, with delays in typing and overall slowness.
I have not noticed this in the dev environment, even if the pop-up is present there too (python course)
I thought I was crazy or that my machine was "too old" for this, but I have experienced this too. In my experience, it has happened after working a while on the editor or just doing a little bit of work on the editor, leaving it open, and then coming back. It becomes really slow and the only workaround that I have found is closing my browser completely and opening it again. Note: As a current donor, the pop-up doesn't show up in my account and I don't think is related to that component itself.
Commenting to add I experience this every single time I use the editor for more than maybe 20 minutes. It doesn't just happen suddenly. It starts with a slight delay then gets worse and worse. I just opened up Incognito with no extensions enabled, and I noticed the delay after around 15 minutes. Then by 25 minutes it was definitely worse. It isn't unusable, but if you type relatively quickly it is very noticeable that words on screen are being completed maybe 100ms after you actually type them, then gets a little worse from there. Info: Chrome/124.0.6367.158 (no extensions) macOS Ventura Responsive Web Design Certification (I have had delays throughout this entire course)
I'm able to get the slowdown both in production and in development.

Reproducing it a bit loosely: Go through multiple steps (around 20?). At some point writing few characters in a row will start feel delayed/lagged. In console start appearing warnings, something like [Violation] 'input' handler took 1123ms. Recorded performance showed then longer times of redux updates coming from (if I didn't mix up anything) the editor's :
Thanks, that's really helpful! Just so I'm on the same page: how did you record the performance and did you have campfire mode on while you were testing this? Also, did you complete and submit 20 steps or just navigate through them?
Hey It was the Performance tab in the browser's developer tools. Not the profiler from react developer tools. Once I noticed the lagging, I turned on recording and did couple more steps. Then stopped recording, and tried to make heads or tails out of it :eyes: It doesn't seem to be related to campfire mode. I actually have campfire mode on in production, but when I was checking in development I believe it was off. Steps were completed/submitted. I haven't tried just navigating them.
It's not easy to read, but it does seem to be that's taking the time, which makes sense. That's what I see even when the editor is working normally. I've yet to see the slowdown from having the editor open for a long time typing a lot in a single page navigating through 80+ challenges I'll try completing a lot of challenges next and see if I see what you saw, Regardless, it seems like either the amount of typing you need to do to complete a bunch of challenges OR the completion/submission process is the problem. That's my current guess.
I'm seeing the same code editor latency after about 5 to 10 minutes of usage. I see it both in Chrome and Firefox browsers when testing in Windows 11 and Linux Fedora 40. The best solution I have is to do a of the page when it starts happening. Is the code editor overloading the cache to cause a slow down?
I'm on Windows Chrome browser and the editor is super slow for me. I type and I can't see what I've typed in till seconds later (good thing I'm a good typist) and I click Submit and it takes a long pause to respond.

I tried clearing cache but it fixes the issue for maybe a couple of steps max then back to the slow performance. Definitely something I didn't experience back in early 2023 when I last used the curriculum. If there's some data I can collect to help debug, let me know. (Edit: i switched to MS Edge which I didn't use for fcc work before and the issue disappeared for the first 10 steps i tried). I may continue here for a bit before retrying chrome again at some point.) 2nd Edit: the performance improvement didn't last. Same issue occurred after a few more steps and I persisted for a couple more of these slow steps just to see if anything would change, but nothing did. So I logged off and switched back to Chrome. First few steps are back to normal performance at this point. Perhaps the pattern will repeat (and things will slow down momentarily at which point I will try another browser switch).
Hi all, thank you for reporting the issue. We are trying to reproduce the issue, but no luck yet. From what I gather, the issue can happen: On any OS (so far we have reports on MacOS, Windows, and Linux) On any browser (so far we have reports on Chrome, Firefox, and MS Edge) In both incognito and normal browsing modes With or without browser extensions To both donor and non-donor users With both campfire mode enabled and disabled I guess what's left is the challenge pages that you are on when you experience the issue. I personally have tried going through 50+ Python challenges of the , and I haven't experienced the lag. We have one user experienced the issue with the Responsive Web Design challenges (), so maybe this is where I'd try next. But we would love to get more information from everyone else: which page / course you were on when you experienced the issue. Thanks again for reporting.
The lag happens consistently to me on the Role Playing Game project (js beta) pages. Everytime I recycle my browser the issue goes away temporarily. (Or if I close the tab on edge and reopen it)
As I have , I experienced this throughout the responsive web design cert, but I have since finished that course and moved onto the JavaScript one, and can confirm I am having the exact same issue on there.

The easiest way I've found to get rid of the delay is to reload page while ignoring cache.
It might be needed for user to be logged in. I've tried to reproduce it on Firefox. I've went from last steps of to about 30 step of the - without being logged in, no issues. Then after logging in, I started at the first step of , passing code was still in browser, so was just submitting it for the most part. By the 20th step writing was again slowing down. Edit: although Firefox doesn't display warning in console.
I also see it when logged in. It literally became so bad that is spiked the CPU if I held down a key and just let it repeat. It might somehow be related to the completion modal in the lower jaw, but I'm really not certain. That is at least also different depending on if you are signed in or not. The problem is, it didn't seem as bad in dev mode for me, so I'm not confident. But I removed the progress component and did twice as many steps, and it didn't happen. But as said, I'm really not sure if I trust it in dev mode. In the Performance log, looking at the bottom-up tab, was the first one.
Thanks everyone. I've finally reproduced it by doing ~20 responsive web design lessons while signed in. It does seem like is part of the problem, thanks I'm not sure it's the root of the problem, but it's definitely getting called far too often. My plan is to create a quick PR to stop the unnecessary calls and/or memoize the function. Hopefully that fixes it, but we'll have to see.
I was briefly looking at the Progress component and saw ProgressInner  Something about that code doesn't sit right with me. The and variable names seems a little like something that wasn't fully checked and tested. If I just log when the component renders, it does so on every keystroke, and even just left-clicking inside the active editor section logs a re-render. This is after you have completed at least one challenge step. ! Might not be related, but it doesn't seem right considering it isn't even shown. I'm a little skeptical of the Intersection observer and useEffect. I know this isn't very constructive, but that's all I've got for now.

I agree about the naming, it's a little sloppy. And, yes, something is going wrong meaning that it's getting re-rendered after challenge completion. makes it a lot better, though. It's still rendering when you start a new challenge (and it shouldn't), but it no longer renders in response to, well, everything.
I have unpinned the issue, considering it is closed as completed.
Hi Guys i am still experiencing this on two separate machines both running windows 11 and Chrome Browser extension installed , ublock origin and Ghostery this is whilst going through the responsive web design curriculum, in both building a balance sheet and the cat painting projects. I have experienced this behaviour both before and after i became a supported, and most recently experienced it about 5mins ago
Thank you for mentioning. However, the potential fix for this has not been deployed to production yet. So, until that is deployed, you can expect the issue to be present.
Hi everyone, the potential fix has been deployed, please report back if you're still experiencing the issue. Thank you for your patience, and happy coding.
hi , I've been using the JS beta curriculum all day from a single tab today. I did end up running into the performance issue again but it took a -lot- longer to run into it, and it was not lagging as bad as it used to when I would type (one of the issues I saw was that I would type and it would take a bit of time for the editor to display what I typed). Now when it slows down, the lag is not nearly as long (and as I said, I ran through a lot of steps today before seeing the slow-down). This is just to let you know what I have observed as you've asked us to report back. Thanks for the fix(es) already done.
Thanks for the follow-up, Some slowdown is expected, since the 'fix' was to make rendering considerably more efficient. This delays and mitigates the slowdown, but clearly something is getting less efficient over time. Since it's not too bad at the moment and it's hard to pin down the ultimate cause, I think we can leave this for now. We do plan to give the client some love before too long and that will give us another chance to squash the bug.

Hi Guys I am still running in to this issue, im currently working my way through learn-basic-javascript-by-building-a-role-playing-game. and after about 10 mins the typing of text starts to lag, im having to refresh the page and it seems to make it go away for a while
Other reports of slow performance
Thanks I'll give this another look.
should be another decent perf boost. Same deal as last time: while I expect this to be a lot better, there may still be deeper problems.
Tentatively closing again, since has been merged and should help considerably.


Question: challengeType helpCategory superBlock <ins> block </ins> translationPending fields { blockName

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


Question: ```js assert.strictEqual( (function () { <del> bob.setFullName('Haskell Curry'); return bob.getFirstName(); </del> <ins> _test_bob.setFullName('Haskell Curry'); return _test_bob.getFirstName(); </ins> })(), 'Haskell' );

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


Question: ] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Perfiles", "descriptionEs": [ "El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ", "Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ", "Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.", "Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ", "Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/rendering-tools/js-execution" ] </ins> }, { "id": "56b15f15632298c12f31517f",

[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: }; export const canFocusEditorSelector = state => state[ns].canFocusEditor; <ins> export const inAccessibilityModeSelector = state => state[ns].inAccessibilityMode; </ins> const MAX_LOGS_SIZE = 64 * 1024;

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

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


Question: Your `.map()` method should take an empty callback function. ```js <del> assert.match(code, /arr.map(s*(s*)s*=>s*{s*}s*)/); </del> <ins> assert.match(code, /arr.map(s*((s*)s*=>|functions*(s*))s*{s*}s*)/); </ins> ``` You should use the `+=` operator on `playerCards.innerHTML`.

A camper on the forum ran into an issue here They wanted to know why they couldn't pass with a regular function for the callback. the directions don't specify it should be an arrow function instead. but both answers should pass. So the tests should be updated. 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
Hi, Can I work on fixing this issue ? I would need some help in locally setting up so that I can test my code changes.


Question: "}", "Note that it is important to use the new keyword when calling a constructor. This is how javascript knows to create a new object and that all the references to this inside the constructor should be referring to this new object.", "Now, once the myCar instance is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example:",  "var myCar.turboType = "twin";",   "myCar.turboType = "twin";",  "Our myCar variable now has a property turboType with a value of "twin".", "In the editor, use the Car constructor to create a new instance and assign it to myCar.", "Then give myCar a nickname property with a string value."

Hi, Now, once the myCar instance is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example: var myCar.turboType = "twin"; we don't need var it should be myCar.turboType = "twin";
Wow, I can't believe I missed this in the proofreading pass! Thanks for pointing this out!


Question: <meta content='https://cdn.freecodecamp.org/platform/universal/fcc-twitter-1120X600-social-green.png' name='twitter:image:src' /> <meta content='freeCodeCamp.org' name='twitter:title' /> <del> <meta content='Learn to code. Build projects. Earn certifications.' </del> <ins> <meta content='Learn to code at home. Build projects. Earn certifications.' </ins> + 'Since 2015, 40,000 graduates have gotten jobs at tech ' + 'companies including Google, Apple, Amazon, and Microsoft.' name='twitter:description' />

Is your feature request related to a problem? Please describe. I noticed that there is a difference between the headers in and . Describe the solution you'd like Everything else is consistent except for the header. A solution would be to have it consistent throughout. Have it display "Learn to code at home" in both links. On the second line. Additional context Add any other context or screenshots about the feature request here. <img width="1095" alt="without home" src="https://user-"<img width="1093" alt="with home" src="https://user-"


Question: # --description-- <del> So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front it, like this: </del> <ins> So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this: </ins> ```css .class-name {

! I "of" It is missing orginally. there is no code, just lesson typo for the text to read "front of it" No response Device: Omen Desktop OS: Windows 10 Browser: Chrome Version: version of? Sry if the System section isnt very clear, its just a typo so i assume it doesnt matter all to much.
Thanks for opening this issue. It looks like this issue is something that "first-time" code contributors to this repository can fix. Here are the files that you should be looking at to work on: List of files:  Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We prioritize accepting the most quality contribution, followed by the earliest request. Happy contributing.
i it to my pull request it took me a while to find it lol
No clue what to do to help with files or fixing stuff tbh, I'm still pretty new to all this GitHub stuff. Someone might be much better for this than I. But hopefully ill have the experience in the future to help with things like this, big or small.
I see that it's a perfect start for beginners like me, however using repo or GitHub is not easy that much :D. For this issue, finding correct challenge on my local files and fixing it is an achievement for me. I am excited for more. :)
Contributing to open-source is a rewarding experience. You get to learn so much, things like coding practices, collaboration skills, and most critically, working with folks you have never met (or most likely never will) in person. We encourage you to participate, not just in this community but in many different open-source projects out there. You got this! If you need help, we are here to help you help us. All you need to do is get started. As I mentioned earlier, if you are interested, head over to the contributing docs and jump right in. Cheers & happy coding.


Question: Currently, you cannot determine who is connected to your web socket. While `req.user` contains the user object, that's only when your user interacts with the web server, and with web sockets you have no `req` (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple! <del> Add `passport.socketio`, `connect-mongo@~3.2.0`, and `cookie-parser` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: </del> <ins> Add `passport.socketio@~3.7.0`, `connect-mongo@~3.2.0`, and `cookie-parser@~1.4.5` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: </ins> ```js const MongoStore = require('connect-mongo')(session);

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: "name": "Sum All Odd Fibonacci Numbers", "difficulty": "2.09", "description": [ <del> "Return the sum of all odd fibonacci numbers up to and including the passed number if it is a fibonacci number.", </del> <ins> "Return the sum of all odd Fibonacci numbers up to and including the passed number if it is a Fibonacci number.", </ins> "The first few numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8, and each subsequent number is the sum of the previous two numbers.", <del> "As an example, passing 4 to the function should return 5 because all the odd fibonacci numbers under 4 are 1, 1, and 3." </del> <ins> "As an example, passing 4 to the function should return 5 because all the odd Fibonacci numbers under 4 are 1, 1, and 3." </ins> ], "challengeEntryPoint": "sumFibs(4);", "challengeSeed": "function sumFibs(num) {n  return num;rn}",

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: const { t } = useTranslation(); return ( <div <del> className={`tool-panel-group button-group ${ </del> <ins> className={`tool-panel-group ${ </ins> isMobile ? 'tool-panel-group-mobile' : '' }`} >

The class is used in : The class doesn't have any effect because there isn't any in : That means it's safe to remove the class now. Remove the selector from Remove the class from
This issue is open for contribution. Please make sure you read our as well as our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: # --description-- <del> In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you. </del> <ins> In this project, you will build a set of football team cards and learn about nested objects, object destructuring, and default parameters. All of the HTML and CSS for this project has been provided for you. </ins> Start by accessing the `id` called `"team"` from the HTML document and storing it in a `const` variable called `teamName`.

The description of the project to build football team cards in the js beta curriculum says: In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. But switch statements were introduced in the date formatter project (step 16, 17). I think the description should be modified therefore to not mention learning switch statements. I haven't actually done this project, so I don't actually know if it re-teaches switch statements or not. (it would be nice if the date formatter description mentioned learning about switch statements though) N/A N/A No response N/A No response
I don't really get the title of this challenge, what "modern javascript methods" is it referring to, is it just the ? Because surely both map and filter has already been taught at this point. I'm also not sure the switch is really needed. It seems a little verbose and a lot of boilerplate. Compared to say:
Let's go ahead and remove switch statements from the description and the first step.
I feel like the switch used in the code is because the idea of the challenge, among other things, was to teach it. It takes up a lot of the total code. Not mentioning it, doesn't really change that fact. Not unless, we remove the switch from the code as well.
That's a fair point. I'd be fine rewriting the challenge to use the example you shared earlier.
Hi! I am a new, first time contributor. Can I put up a PR for this issue? Seems like a simple fix, just removing 'switch statements' from description and first step
It could be seen as reinforcement. I'm not saying we have to remove it, I'm just saying it seems like part of the point of this challenge was to teach the switch, which is why it is in the description and the code. Not sure how often we use switch statements, but this project is definitely reinforcing it. So we might want to keep it just for that reason. This also isn't the first time we teach and it is in the description as well. Maybe that could be it, reinforcement. Or something like that?
changing the description slightly seems like an easy way to fix the issue
I like this copy, yeah.


Question: > [!NOTE] > If you are using Apple Devices with M1 Chip to run the application locally, it is suggested to use Node v14.7 or above. You might run into issues with dependencies like Sharp otherwise. <ins> ## Working With Other Languages To see how the client renders in another language go to [testing the client app in a world language.](how-to-work-on-localized-client-webapp.md#Testing-the-Client-App-in-a-World-Language) </ins> ## Getting Help If you are stuck and need help, feel free to ask questions in the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [the contributors chat room](https://discord.gg/PRyKn3Vbay).

Looking forward for reporting a security issue: Please report security issues by following our security policy: Describe the bug A clear and concise description of what the bug is. To Reproduce Steps to reproduce the behavior: The real url for spanish is so i expect that when running locally I could click on globe icon and then choose spanish to go to: http://localhost:8000/espanol/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator But instead i get gatsby dev 404 page. Expected behavior I expect to be able to get to spanish version page. Screenshots If applicable, add screenshots to help explain your problem. <img width="1429" alt="image" src=""Additional context Add any other context about the problem here.
This is actually because the app doesn't build every language at once. It builds a single language - our internationalised sites are separate instances of the application. The language selector does not work locally because there is, in fact, nothing at the endpoint.
We could add a note to: like To see how the client renders in another language go to I think that should be enough.


Question: "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Christopher Nolan", <del> "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy", </del> <ins> "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy", </ins> "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.", "Language": "English, Japanese, French", "Country": "USA, UK",

JavaScript Algorithms and Data Structures Functional Programming Use the filter Method to Extract Data from an Array The variable watchList[0]["Actors"] contains the name of a former actress who is now an actor, having transitioned gender and changed his name to Elliot Page. Many people describe it as mortally offensive or even endangering to use the former names of trans people in this way, so this should probably be changed. (It appears to be standard entertainment industry practice now to retroactively change credits in this circumstance, so that is what I would suggest.)
The current site has updated the actors' names section. Since this is the source of the data for 3 challenges, I think it is reasonable to make the same change on our site. The name appears twice in each of the following challenge files: - I am opening this issue up to "first timers only" as this is an easy change. To resolve this issue, you will need to replace the name with in all relevant places in the above challenges.
I know it is more work, but would we not be better off changing all names/(personal info) to random/unrelated names/words?
Yes, I agree with this as then we wouldn't have to worry about backlash or criticism if a mistake/error is made.
Just changed the name where necessary. I wasn't too sure what you meant by changing all the names/(personal info) to random/unrelated names/words in the context of movie information. Hope I helped :)
The list of real movies gives the 3 challenges a more "real-life" purpose. Changing the actor names to be random names would make the data not as interesting, not to mention inaccurate. My proposal for changing the name will not happen often, so I do not think it is going to become a high maintenance issue. If it were to ever become a high maintenance issue, we could adjust the challenges accordingly to be more generic in nature. Your PR only contains changes to one challenges. To close this issue, you need to make the change across all 3 challenges referenced in the issue body. Also, you should read through our as related to creating PR titles.
But we would also remove the need to check if facts change (like in this issue) or some moral stuff like if these folks become criminals or do other shady stuff. (Weinstein, Polanksi, Depp etc.).

I thought about using just animated movies, e.g. Toy Story, Finding Nemo, but then the whole lesson would need some changes.
What if the name of the voice actor changes? It is the same situation.
What if the name of the voice actor changes? I think meant use the character names, instead.
We can do whatever, I still think the easiest solution for now is to just change the name in the 3 challenges.
Is this still open? I am a newbie would like to start with something simple
Yes, this is still open. Feel free to create a PR. An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. 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
Just to confirm, we are to replace all the instances of Ellen Page to Elliot Page?


Question: ol for step, index in description .row.checklist-element(id="#{dashedName + index}") <del> .col-xs-3.col-sm-1.col-md-2.padded-ionic-icon.text-center </del> <ins> .col-xs-2.col-sm-1.col-md-2.padded-ionic-icon.text-right </ins> input(type='checkbox' class='challenge-list-checkbox') <del> .col-xs-9.col-sm-11.col-md-10 </del> <ins> .col-xs-10.col-sm-11.col-md-10 </ins> li.step-text.wrappable!= step .col-xs-12.col-sm-12.col-md-8 .embed-responsive.embed-responsive-16by9

Anywhere from 1000px width to when the UI goes into responsive mode the numbers on the check list move into it's respective check box. Image posted bellow <img width="1109" alt="screen shot 2015-12-17 at 9 08 15 pm" src=""
Confirmed, although this is a pretty marginal corner case. There is maybe a 200px wide zone where there is overlap.
It happens quite a bit for me. Regardless I just want a softball for my first issue :) , Rex Schrader wrote: * |
This really isn't the issue with new UI (width < 760px). However, now checkboxes are awkwardly too far. !


Question: <Spacer /> {isOpen ? ( <ProjectModal <del> files={challengeFiles} </del> <ins> files={files} </ins> handleSolutionModalHide={handleSolutionModalHide} isOpen={isOpen} projectTitle={projectTitle}

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


Question: # --description-- <del> Now create an image tag and give it the `class` `"user-img"`. Use template interpolation to set the `src` attribute to `image` you destructured earlier. Set the `alt` attribute to `author` followed by the text `"avatar"`. Make sure there is a space between the `author` variable and the word `"avatar"`, for example, `"Quincy Larson avatar"`. </del> <ins> Now create an image tag and give it the `class` `"user-img"`. Use string interpolation to set the `src` attribute to `image` you destructured earlier. Set the `alt` attribute to `author` followed by the text `"avatar"`. Make sure there is a space between the `author` variable and the word `"avatar"`, for example, `"Quincy Larson avatar"`. </ins> # --hints--

When talking about template literals sometimes we use "template interpolation", I have not been able to find good documentation on this wording. It should be changed to "string interpolation" or "template literal" as needed. The changes needed are as follow: template interpolation -string interpolation use template interpolation -use string interpolation Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: - text: The anchor tag color should remain black, only add CSS rules for the :hover state. testString: assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color should remain black, only add CSS rules for the :hover state.'); - text: The anchor tag should have a color of blue on hover.  testString: assert(code.match(/a:hovers*?{s*?color:s*?blue;s*?}/gi), 'The anchor tag should have a color of blue on hover.');   testString: assert(code.match(/a:hovers*?{s*?color:s*?(blue|rgba(s*?0s*?,s*?0s*?,s*?255s*?,s*?1s*?)|#00F|rgb(s*?0s*?,s*?0s*?,s*?255s*?))s*?;s*?}/gi), 'The anchor tag should have a color of blue on hover.');  ```

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


Question: "assert.isFalse((//gi).test($("h3").html()), 'message: Do not alter any other text.');" ], "type": "waypoint",  "challengeType": 0   "challengeType": 0, "nameEs": "Cambia el texto de un elemento usando jQuery", "descriptionEs": [ "Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento.  Incluso puedes cambiar marcado HTML.", "jQuery tiene una función llamada .html() que te permite añadir etiquetas HTML y texto dentro de un elemento.  Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.", "He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:", "$("h3").html("<i>jQuery Playground</i>");", "jQuery también tiene una función similar llamada .text() que sólo altera el texto sin añadir etiquetas.", "Cambia el botón con identificación target4 de forma que su texto quede en itálicas." ]  }, { "id": "bad87fee1348bd9aed708826",

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


Question: const testStr1 = 'one^|uno||three^^^^|four^^^|^cuatro|'; const res1 = ['one|uno', '', 'three^^', 'four^|cuatro', '']; <del> // TODO add more tests </del> const testStr2 = 'a@&bcd&ef&&@@hi'; const res2 = ['a&bcd', 'ef', '', '@hi']; <ins> const testStr3 = 'hello^|world|how^are^you^|'; const res3 = ['hello|world', 'howareyou|']; </ins> ``` ## --seed-contents--

Hey any more context on this issue? Seems pretty empty to be already opened with the label.
the challenge needs more tests, it's not a high priority thing, that comment has been there for a few years already


Question: # --description-- <del> The data you get from a `GET` request is not usable at first. To make the data usable, you can use the `.json()` method on the `Response` object to parse it into JSON. If you expand the `Prototype` of the `Response` object in the console, you will see the `.json()` method there. </del> <ins> The data you get from a `GET` request is not usable at first. To make the data usable, you can use the `.json()` method on the `Response` object to parse it into JSON. If you expand the `Prototype` of the `Response` object in the browser console, you will see the `.json()` method there. </ins> Remove `console.log(res)` and implicitly return `res.json()` instead.

in step 3 of the fcc authors project (js beta), they mention that we should " Open your console and expand the Response object to see what it contains." but it doesn't actually say that this means we should open the browser's console. It would be best to explicitly say "Open your browser's console and ..." instead. (Also step 4 mentions the console too but if we fix step 3, then hopefully people will remember which console was being referred to when they move to step 4) N/A specific reference to the browser's console is needed so as not to be confused with the fcc console No response N/A No response
I think we should apply the change to both step 3 and step 4 as campers might lose the context if they stop at step 3 and start step 4 some time later. I'm opening this issue to first-time code contributors to this repository. The changes you need to make are: Change "Open your console" to "Open the browser console" in Change "in the console" to "in the browser console" in 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.
I have created a PR


Question: editor.setSize("100%", "auto"); <ins> var attempts = 0; if (attempts) { attempts = 0; } </ins> // Default value for editor if one isn't provided in (i.e. a challenge) var nonChallengeValue = '/*Welcome to Bonfire, Free Code Camp's future CoderByte replacement.n' + 'Please feel free to use Bonfire as an in-browser playground and linting tool.n' +

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --In the challenge CSS Flexbox: Use the flex-wrap Property to Wrap a Row or Column, the value wrap-reverse is defined: wrap-reverse: "wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column." This definition is not correct. Actually wrap-reverse wrap content changing de cross-axis direction, bottom to top in a row, and left to right in a column. Browser Name: Browser Version: Operating System:
I'd like to take on this issue please
Since the curriculum content is in the repo, I submitted the PR there.
Ok, thanks Simon.


Question: run: npm run seed - name: Cypress run <del> uses: cypress-io/github-action@v1 </del> <ins> uses: cypress-io/github-action@v2 </ins> with: record: ${{ env.CYPRESS_RECORD_KEY != 0 }} build: npm run build

GitHub yesterday (November 16) which our Cypress CI depended. So, currently all Cypress tests in CI are failing. Just using the latest version of the Cypress GitHub action should do the trick. (We are currently running the outdated action.) !


Question: function createDescription(editor: editor.IStandaloneCodeEditor) { if (dataRef.current.descriptionNode) return dataRef.current.descriptionNode; <del> const { description, title } = props; const jawHeading = document.createElement('h1'); jawHeading.innerText = title; </del> <ins> const { description, title, isChallengeCompleted } = props; const jawHeading = isChallengeCompleted ? document.createElement('div') : document.createElement('h1'); if (isChallengeCompleted) { jawHeading.classList.add('challenge-description-header'); const challengeTitle = document.createElement('h1'); challengeTitle.innerText = title; jawHeading.appendChild(challengeTitle); const checkmark = ReactDOMServer.renderToStaticMarkup( <GreenPass style={{ height: '15px', width: '15px', marginLeft: '7px' }} /> ); const completedChallengeHeader = document.createElement('div'); completedChallengeHeader.innerHTML = checkmark; jawHeading.appendChild(completedChallengeHeader); } else { jawHeading.innerText = title; } </ins> const domNode = document.createElement('div'); const desc = document.createElement('div'); const descContainer = document.createElement('div');

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

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


Question: # --description-- <del> The inequality operator (`!=`) is the opposite of the equality operator. It means not equal and returns `false` where equality would return `true` and *vice versa*. Like the equality operator, the inequality operator will convert data types of values while comparing. </del> <ins> The inequality operator (`!=`) is the opposite of the equality operator. Inequality means not equal. The inequality operator returns `false` when the equality operator would return `true` and *vice versa*. Like the equality operator, the inequality operator will convert data types of values while comparing. </ins> **Examples**

There is a typo in the explanation of the inequality operator (!=). The current sentence is: "It means not equal and returns false where equality would return true and vice versa." This explanation is incorrect because the inequality operator (!=) should return true when two values are not equal and false when they are equal. Suggested correction: "It means not equal and returns true when two values are not equal, and false when they are equal." This adjustment correctly explains the behavior of the inequality operator (!=). The explanation of the inequality operator (!=) should clearly state that it returns true when two values are not equal and false when they are equal. ! Device: Laptop OS: Windows 10 This is a minor issue but could potentially confuse new learners. Correcting this would improve clarity for those studying JavaScript comparison operators.
I would like to work on this issue, please assign this issue to me
Hi , , could you please assign this issue to me? I'd like to work on it. Thanks!
This issue has not been triaged or opened for contributions. Also, we don't typically assign issue. Please consult the contributing guide.
Thank you for the clarification, . I appreciate your guidance on the contribution process. I will review the contributing guide to understand the triaging process better. If possible, could you provide more details on how I can contribute to this issue? Thanks again!
The sentence seems correct to me, where the equality operator would return true, the inequality operator would return false and vice versa
Yeah, seems accurate to me
Thank you for your feedback! I understand how the sentence might seem correct at first glance. However, the issue lies in the explanation of the inequality operator (). The sentence currently says: "The inequality operator means not equal and returns false where equality would return true and vice versa." This could be confusing because when two values are not equal, the inequality operator () should return true, not false. So, it would be clearer to state that the inequality operator returns true when the values are not equal. Would you agree that updating the sentence to reflect this distinction would make the explanation more accurate? Thanks again for your input!
That looks like GPT? Anyways, the sentence does in fact say that the inequality operator return the opposite of the equality operator.

The inequality operator ... returns false where equality would return true and vice versa. The sentence is correct in a literal sense. It may be clearer to split the sentence, but it is not incorrect. If we want to change it to make the current meaning more clear, I would say
A/C to me ..... The term "inequality" refers to the condition of not being equal, particularly in the context of comparing two values. When the two values do not match, or in other words, are not equal, we can say they are unequal. As a result, the != operator will return TRUE because the values are indeed not equal. Conversely, when the values match, the != operator will return FALSE, indicating that both values are equal....It's simple. Conclusion: Where equality fails, the != operator will yield TRUE as output. Conversely, where equality holds, the != operator will yield FALSE as output.
Yep, and that's what the current text says. But I don't love the compound sentence as it is written. The curriculum should generally favor simpler grammatical constructions.
it's on the legacy curriculum, if someone wants to propose a change and make a PR, go for it, but it will be low priority
If someone makes a PR, this is what I'd say
With this JavaScript issue, I learn English too. Thank you.
Can I work on this issue?


Question: display: block } <del> } </del>  No newline at end of file <ins> } </ins>

The hover animation of map button overlaps the ending of the search bar.  Browser Name, Version: Chrome (latest release) & Firefox (57.0.2). Operating System: Windows 10 Pro 32 bit. Mobile, Desktop, or Tablet: Desktop.
I would like to take on this issue if it still exists
I've already submitted a PR for it.


Question:
role='menu' >
  <Link external={true} to='/news'>   <Link external={true} sameTab={true} to='/news'>  /news </Link>

  <Link external={true} to='/forum'>   <Link external={true} sameTab={true} to='/forum'>  /forum </Link>

The top nav items on the forum and news does not open in a new tab. We would like the same functionality on learn for consistency.
Do we want all external links to navigate without opening a tab? A quick search suggests that all the links in the footer open new tabs, as do a couple in . I think it's better UX to leave tab opening to the user, but I thought I'd check.
If you decide to go ahead with this, I'd like to have a go at this
I think we want this to remain as is except for the navigation links up top on the navbar, which are the most used links on the platform. This is to make it consistent with the behaviour on forum and news. can you proceed and make the changes. This will likely affect some of the routing. I would like to test this before working on the client app for chinese curriculum.


Question: You should have a boolean expression that checks if the player's `y` position plus the player's height is greater than or equal to the platform's `y` position. ```js <del> assert.match(code, /consts+platformDetectionRuless*=s*[s*player.position.xs*>=s*platform.position.xs*-s*player.widths*/s*2s*,s*player.position.xs*<=s*platform.position.xs*+s*platform.widths*-s*player.widths*/s*3s*,s*player.position.ys*+s*player.heights*>=s*platform.position.ys*,s*.*s*]s*;?/) </del> <ins> assert.match(code, /consts+platformDetectionRuless*=s*[s*player.position.xs*>=s*platform.position.xs*-s*player.widths*/s*2s*,s*player.position.xs*<=s*platform.position.xs*+s*platform.widths*-s*player.widths*/s*3s*,s*(?:player.position.ys*+s*player.height|player.heights*+s*player.position.y)s*>=s*platform.position.ys*,s*.*s*]s*;?/) </ins> ``` You should have a boolean expression that checks if the player's `y` position is less than or equal to the sum of the platform's `y` position plus the platform's height. ```js <del> assert.match(code, /consts+platformDetectionRuless*=s*[s*player.position.xs*>=s*platform.position.xs*-s*player.widths*/s*2s*,s*player.position.xs*<=s*platform.position.xs*+s*platform.widths*-s*player.widths*/s*3s*,s*player.position.ys*+s*player.heights*>=s*platform.position.ys*,s*player.position.ys*<=s*platform.position.ys*+s*platform.heights*,?s*]s*;?/) </del> <ins> assert.match(code, /consts+platformDetectionRuless*=s*[s*player.position.xs*>=s*platform.position.xs*-s*player.widths*/s*2s*,s*player.position.xs*<=s*platform.position.xs*+s*platform.widths*-s*player.widths*/s*3s*,s*(?:player.position.ys*+s*player.height|player.heights*+s*player.position.y)s*>=s*platform.position.ys*,s*(?:player.position.ys*<=s*platform.position.ys*+s*platform.height|player.position.ys*<=s*platform.heights*+s*platform.position.y)s*,?s*]s*;?/) </ins> ```

There is an error in the code provided in Step 90 regarding the collision detection logic for platforms. The problem is: The fourth condition contains a syntax error (the unnecessary before ) and will not correctly evaluate the player's vertical position relative to the platform. Recommendation: Please update the course materials to reflect the correct condition in the collision detection logic. Thank you! ! ! 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
Hey can u assign this issue to me!
Hello there This is the starting (seed) code: The third and fourth conditions are by YOU. So, if there is an unnecessary , only you can remove it. Also, your issue description and screenshot do not match. So, I am unsure what problem you are referring to. As such, I am going to close this issue. If you can explain where the problem in the content is, then we will reopen this issue. Thank you.
Hi , The test seems to fail because the expected order isn't being followed, even though both are equivalent. 1+2 = 3 2+1 != 3 ?
Ah. Ok, I understand what you mean now. Thank you for explaining further. The current tests are too strict with the expected input: The solution should probably be to test the value of with mocked data.
Opening for contribution, the test should be updated to at least accept both orders Optional the part of testing with mocked data instead of regex, but it would make the test more robust for sure


Question: assert.equal(weapons[0].power, 5); ``` <del> Your second `weapons` object should have the `name` set to `dagger` and the `power` set to 30`. </del> <ins> Your second `weapons` object should have the `name` set to `dagger` and the `power` set to `30`. </ins> ```js assert.equal(weapons[1].name, 'dagger'); assert.equal(weapons[1].power, 30); ``` <del> Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to 50. </del> <ins> Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to `50`. </ins> ```js assert.equal(weapons[2].name, 'claw hammer'); assert.equal(weapons[2].power, 50); ``` <del> Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to 100. </del> <ins> Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to `100`. </ins> ```js assert.equal(weapons[3].name, 'sword');

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


Question: assert(labelElem.hasAttribute('for')); ``` <del> The new `label` element should have a `for` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. </del> <ins> The new `label` element should have a `for` attribute with the value `loving`.  Expected `--fcc-expected--`, but found `--fcc-actual--`. </ins> ```js const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; <del> assert(labelElem.getAttribute('for').match(/^loving$/)); </del> <ins> assert.equal(labelElem.getAttribute('for'), 'loving'); </ins> ``` The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo.

This is a common error on this Step - we should modify the hint to point out the capitalization User should receive hint that helps them see the capitalization error 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
The current hint is: "The new element should have a attribute with the value . You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks." Technically, the attribute value doesn't need to be wrapped in quotes since there are no spaces in the value. Also, it will pass if you don't use quotes for the value, so this part of the hint seems unneeded and should probably be removed. Are you thinking that we should have a separate test just to check whether the value has been capitalized? Or do you think we just add a warning to the current hint reminding them that capitalization (or lack thereof) matters?
I'm not quite sure what the best way forward would be. I just know what most questions for this step on the forum are related to Loving vs loving.
We do have dynamic hints we can use:


Question: color: #7ec699; } <ins> /* CSS code block strings have low contrast in night mode. This attempts to increase contrast above 4.5:1 */ .night .language-css .token.string, .night .style .token.string { color: #ec9126; background: hsl(0 0% 100% / 0.12); } </ins> .night .token.operator, .night .token.entity, .night .token.url {

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: The exercise “Divide the Grid Into an Area Template” has a section where code is displayed. However, it is in a dull yellow font on a black background, and is difficult to read. I would like to request that the font color be changed to a higher contrast color. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 86.0.4240.75 (Official Build) (64-bit) Operating System: Windows 10 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): See the text below “grid-template-areas:” !
Thanks for pointing this out it is incredibly hard to read. How about the following? ! cc:
Looks a lot better! Does it conform to the 4.5:1 contrast ratio suggested in a previous FCC lesson?
Good question and no, it's not quite enough. I tweaked it a bit further to which looks like this: ! That passes.
Now, It looks a lot better.
I am opening this issue up to . The changes mentioned by are what is expected.
For first timers, this appears to be the lines of code you want to focus on to change based on what is mentioned in
I would like to take this if it's open for grabbing. It will be my first time contributing to an open source project.
HELLO I WOULD LIKE TO WORK IF ITS OK . ITS MY FIRST TIME ,SO PLEASE GUIDE ME THROUGH
I have been attempting to fix this issue. My first attempt to modify the code suggested by was rejected because the file in that location is being removed. My new approach is to use the prism- file. Here is my proposed addition: However, I have some questions. I only noticed the issue with the css code block, but I suspect it may be a problem for other languages as well. I'm not sure how to tell which other languages may have this issue, or which classes to target (do I need to add ?)

I also only noticed this issue for , but the css rule that currently applies to this block also targets , , and . I'm not sure if the problem exists for these classes as well, or how to check. Could someone with experience please comment on whether I should go ahead with my proposed changes, or make modifications?
Hi my best guess is that your proposed change is a good one. Reason being, the change hits both the font's colour and the background. So, anywhere that was suffering from poor contrast will be fixed by your change, which is exactly what we want. If you could make that change in your PR, we can QA it there.
I have made the changes here: See lines 49 through 57. How does QA work? Are you able to preview the website directly from GitHub?
Thanks, that looks good. Could you push them onto your PR? Almost, yeah. When you create a PR we can open a version of the site (including the PR's changes) in GitPod and preview it using that. It's neat.
I was able to figure out how to use GitPod. It looks like the changes work. ! I noticed that in prism-, there is already a rule for , , and . None of the others have a background. I tried viewing the string without a background, too, and it looks fine to me. Is there a reason for the background in the first place? My preference would be to remove it for consistency. !
You can see the PR commits here I recommend taking a look at the contribution docs, they cover this sort of thing:
Ah, I see, you mean on FCC. Here it is:
thank you for your interest in contributing to freecodecamp as our contributing docs say: you don't need to ask for permission, the first comprehensive PR is the one reviewed. You could start reading the contributing docs, if you have not yet:


Question: ```js /** <del> Backend challenges don't need solutions, because they would need to be tested against a full working project. </del> <ins> Backend challenges don't need solutions, because they would need to be tested against a full working project. </ins> Please check our contributing guidelines to learn more. */ ```

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Affected page Add a link to the coding challenge with the problem. Your code Copy and paste the code from the editor that you used in between the back-ticks below: Expected behavior Given that this is the Replit starter project and the GET route has no code, I expected test no. 3 to fail. Screenshots If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. System (please complete the following information): Device: [PC] OS: [Windows 10] Browser: [chrome] Version: Version 91.0.4472.77 (Official Build) (64-bit) Additional context Add any other context about the problem here. I am working through this project and found test 3 passes even before I had written any code. I made a new copy of the Replit starter project and ran the tests to see if I could replicate the issue. Test 3 still passes. The github personal- file shows that it supposedly makes several post requests and a get request, but somehow it passes without GET or POST routes.
It seems asserts are not even run, because promises are not fulfilled. Not sure if this is to be expected, but I'm surprised there isn't timeout like in other tests. I guess internally that doesn't make test not finished, so there's nothing to timeout...? Adding before or each post request in , , , would make it timeout as expected.


Question: # --hints-- <del> You could have `card_number = '4111-1111-4555-1141'` within the main function. </del> <ins> You should have `card_number = '4111-1111-4555-1141'` within the main function. </ins> ```js ({

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