Question: padding-top: 15px; } <del> .honesty-policy .agreed { display: flex; justify-content: center; align-items: center; background-color: var(--quaternary-color); color: #fff; } div .agreed p { color: white; } .honesty-policy .agreed p { </del> <ins> .honesty-policy .disabled-agreed p { </ins> margin-top: 0; margin-bottom: 0; }

Describe the bug When we accept the academic honesty policy and hover over the text, it feels like a button. The cursor should be auto. To Reproduce Steps to reproduce the behavior: to the settings page sure you have accepted academic honesty policy over "you have accepted academic honesty" button Desktop (please complete the following information): OS: Windows 10 Pro 32 Bit Pro Browser: Chrome Version: 77.0.3865.90
, we can make this button disabled, no? I tried it and it seems good, as it is a button but doesn't have to be clicked again..
Please feel free to make a PR.. Here are the lines that you probably need to touch: [ ] The panel can be a button and disabled. [ ] We would need some tests for these as well. Thanks.
Please follow our
Sure, I'll do it as soon as I can, after work.
I went ahead and created a PR for this, along with unit test. Hope it's fine.


Question: Editor.displayName = 'Editor'; Editor.propTypes = propTypes; <ins> // NOTE: withRef gets replaced by forwardRef in react-redux 6, // https://github.com/reduxjs/react-redux/releases/tag/v6.0.0 </ins> export default connect( mapStateToProps, <del> mapDispatchToProps </del> <ins> mapDispatchToProps, null, { withRef: true } </ins> )(Editor);

Is your feature request related to a problem? Please describe. It currently can take a several key presses to navigate to the editor if it does not have focus. Describe the solution you'd like It should be possible to focus on the editor with a hotkey, for example 'e'. The issue where this was mostly discussed will be closed soon, but some thoughts about implementing this appeared there:


Question: }; ``` <del> When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. Make sure the `#type` element content is cleared between searches. </del> <ins> When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. Make sure the `#types` element content is cleared between searches. </ins> ```js async () => {

There's typo in two hints. Instead of element it mentions . - - This is something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I was making a PR for a different issue and saw this, so I the fix to the PR.


Question: challengeFile && ( <Editor containerRef={this.containerRef} <ins> ref={this.editorRef} </ins> {...challengeFile} fileKey={challengeFile.key} />


Question: on: workflow_dispatch: schedule: <del> # runs every weekday at 12:00 noon UTC - cron: '0 12 * * 1-5' </del> <ins> # runs Monday and Wednesday at 12:15 PM UTC - cron: '15 12 * * 1,3' </ins> env: GITHUB_TOKEN: ${{ secrets.CROWDIN_CAMPERBOT_PAT }}

Uploads: Everyday Downloads: Twice a week This should suffice our deployment targets which are usually Tuesdays? and Thursdays (optional) at around UTC+3 We can shake it up so that PRs can be merged on Mondays and Wednesdays?
So downloads should be triggered on Mondays and Wednesdays?
Yes, or a day before, for all we care. As long as they are: a week only on Mondays and Wednesdays for deployments on Tuesdays and Thursdays


Question: export type Test = { pass?: boolean; err?: string; <ins> message?: string; </ins> } & (ChallengeTest | CertTest); export type ChallengeTest = {

and are not being replaced by their values in hints: ! While in the console the actual and expected values are visible: ! To reproduce, go to any challenge that uses and/or :
Happening for me in hints for step 76:
Thank you for mentioning, but the fix has not been deployed yet.


Question: }; ``` <del> When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. Make sure the `#type` element content is cleared between searches. </del> <ins> When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. Make sure the `#types` element content is cleared between searches. </ins> ```js async () => {


Question: .tool-panel-group-mobile button, .tool-panel-group-mobile a { <del> font-size: 16px; </del> <ins> font-size: 0.8rem; </ins> } .tool-panel-group-mobile {

This wasn't always the case, but right now the formatting for smaller screens isn't great: ! Smaller screens used to have tabs letting you switch between the instructions, editor and so on. You can see them briefly (in the gif) at medium screen sizes, but not for mobile. If we still want to support this, I can look into restoring it.
Looks like they're just hidden behind the search bar.
Thanks for reporting this, we are still figuring out the final state for the nav. Once that is settled, this issue will be resolved automatically.
This wasn't entirely resolved by , as the challenge tabs are still displaying incorrectly: !


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

The instructions are really confusing and could be rephrased. ! I don't think what is referred to as a conditional is a what people are going to think of as a conditional. It is just a Boolean expression that is being asked for. No action or assignment is being given depending on truthiness of the expression. It seems like it is looking for an if, switch, ternary or bare conditional, and I believe only ternary or a bare conditional can be placed inside of an array (Not being nested inside of IIFE) which is knowledge a novice probably won't have. The difference, although small, is that a condition takes an action based on the result of a Boolean expression. No conditional action is being taken, so it is just an expression. Might ask for the first element in the array to be a Boolean expression of the sum of the player's position, height and velocity greater than or equal to the platform's position. There are various steps that follow that refer to Boolean expressions as conditionals. The concern is people learning incorrect terminology and getting mixed up in the field.
Yes, you are correct we should update the terminology for steps 78-81 to say boolean expression instead of conditional statement. I have opened this up for contribution.
For each of the steps, make sure to make the change mentioned above in all of the descriptions. Also, go through and check all of the hint text to make sure the correct terminology is used as well
It is bigger than a few steps. I did not track all the steps but kept seeing it through to the end of the course. It happens everywhere that we later do conditional action based on the Booleans stored in arrays. For each array we made, (I think there were 3? player, platform and checkpoints), the instructions use the same wording.
Looks like we have a PR to address the few steps I mentioned earlier. We can review that and merge it in which will close this particular issue. But then I can audit the project to find the other steps and create a second PR to remove the rest
Did a search and replace for the english files and found five more files total where the change needed to be applied. Here is the PR to resolve that.


Question: /* eslint-disable @typescript-eslint/no-unsafe-member-access */ <del> import { setupServer, superRequest } from '../../jest.utils'; </del> <ins> import { setupServer, superRequest, createSuperRequest } from '../../jest.utils'; </ins> import { AUTH0_DOMAIN } from '../utils/env'; <ins> const mockedFetch = jest.fn(); jest.spyOn(globalThis, 'fetch').mockImplementation(mockedFetch); const newUserEmail = 'a.n.random@user.com'; const mockAuth0NotOk = () => ({ ok: false }); const mockAuth0InvalidEmail = () => ({ ok: true, json: () => ({ email: 'invalid-email' }) }); const mockAuth0ValidEmail = () => ({ ok: true, json: () => ({ email: newUserEmail }) }); </ins> jest.mock('../utils/env', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-return return {

This endpoint needs to use jwtaccesstoken in the same way that web login does.


Question: export const handleRequest = (makeRequest: () => Promise<Response>) => () => { makeRequest() <del> .then(res => res.json() as Promise<{ stdout: string; stderr: string }>) .then(data => alert(JSON.stringify(data))) </del> <ins> .then( res => res.json() as Promise<{ stdout?: string; stderr?: string; message?: string; }> ) .then(data => { if (data.message) { alert(data.message); } else { alert(JSON.stringify(data)); } }) </ins> .catch(err => console.error(err)); };

Looking forward for reporting a security issue: Please report security issues by following our security policy: Describe the bug When using the challenge editor, upon saving changes, the confirmation alert that pops up reads: . It should instead read simply: . Affected Pages Error will appear after saving on on any challenge editor challenge. For example: (http://localhost:3300/07-scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher). To Reproduce the challenge editor with to (http://localhost:3300) to any specific challenege. the save changes button will then produce the alert with the unformatted message. Expected behavior The alert should display: . Screenshots Currently, the alert displays like this: <img width="448" alt="broken" src=""When instead it should look like: <img width="452" alt="fixed" src=""System Device: Macbook Pro OS: Ventura 13.1 Browser: Chrome Version: 123.0.6312.59 (Official Build) (x86_64) Recommended fix or suggestions The code that handles requests for the challenge editor does not correctly handle saveRoute requests because it expects the incoming object to have the fields and . I propose a fix where we edit the route handler to check if the incoming objeect posses a field, and if so, the message directly instead of using . Additional context I will be monitoring this issue closely for the next few hours and I am ready and willing to fix this issue.
Sounds good I think we would accept this change. Feel free to make a PR.


Question: ], "tests": [ [ <del> "Algorithms expressed exponentially like O(N^2) can work well in certain situations, so you shouldn't avoid them completely.", </del> <ins> "Algorithms expressed exponentially like O(C^N), where C is a constant can work well in certain situations, so you shouldn't avoid them completely.", </ins> false, "While they can work in certain small scale situations, they aren't good practice because they will not work larger scale." ],

<!-- FreeCodeCamp Issue Template --<!-- NOTE: ISSUES ARE NOT FOR CODE HELP - Ask for Help at --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- Insert link to challenge below -- <!-- Describe below when the issue happens and how to reproduce it --In the discussion and questions concerning big-o notation, O(N^2) is referred to as "exponential time", which is wrong. O(N^C), where C is any constant greater than 1 (e.g. 2) is called "polynomial time". Exponential time looks like O(C^N), where the input variable (N) is in the exponent. Roughly speaking, the complexity class P (polynomial time solvable) is what we (or complexity theorists) consider "easy" - or at least solvable. Exponential time algorithms typically have no hope of being solved on large inputs (and therefore are good candidates for heuristics, or approximations). For a bit more intuition, an algorithm with O(N^2) complexity may not be a good candidate for real-time processing in your web app - but it may be perfectly suitable for less time critical tasks. With an algorithm like this, you might decide to pre-compute some solutions as a workaround. With an exponential time algorithm O(C^N), on the other hand, the sun may burn out before your computation ends. Concerning O(infinity) - notice the lack of an input variable (N), and that infinity isn't a number. It's probably best to replace that idea with a statement about non-terminating routines. This might lead into a discussion about the halting problem, for example.
To contributors, needs to be changed to
Hi, I would like to work on this issue.
I wonder if this lesson might need more done to it than just a simple one sentence fix. The lesson text and quiz questions map directly to the video lesson, so correcting them while the video is saying something different would probably be confusing. This text fix might need to wait until there's a video fix. Or maybe we could add an errata at the top or bottom of the lesson text until the video is corrected?
I can work on creating a new video tomorrow afternoon.


Question: <div class="spacer"  style="padding: 15px 0px; height: 1px;"   style="padding: 15px 0px;"  /> <div class="text-center row"

We have instances which is used to provide spacing for both side of the component to wrap it up in specific space Example: We can make the Spacer component smarter, and allow it to accept children, so the code be like. But in doing so, we need to: change the current values and how the padding is calculated, the old layout shouldn't change with the new spacers. change which padding has the new value, I think paddingBlock, which is paddingTop and paddingBottom, is the new padding property . I am requesting this because this will make live simpler, and we have to worry about less elements while controling the layout, and if we have specific cases, we can still use
There is an abstraction with , we need address, it's better if we can specify the direction of the padding. but this can be sorted in another issue, for now to solve this issue please allow to have children prop inside of it, but the current styles of the curriculum shouldn't change. 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 prolific contributors will guide you through this.
Hey I have few questions while looking into this issue are few files where we have used Spacer, so may I just change wrap the content where ever needed or it would be handled in new issue? (I guess it must be done in other issue, as it would be easy to maintain) have implemented the children props, so may I raise a PR? Will break this issue in 2 other issues as well. 1 for wrapping the places it has been used, and 2nd for specifying the direction. I was wrapping and trying it out, I found out that Spacer has been used at every 2nd-3rd line of code, so do we need such a wrapper which would give spacing to all components present inside it or only to the parent component? EG: If we have 2 divs wrapped inside Spacer, then does both div have the spacing around them or only the outmost div.


Question: <div class="spacer"  style="padding: 15px 0px; height: 1px;"   style="padding: 15px 0px;"  /> <div class="text-center row"

sorry for the delay, it was difficult to understand what you mean without looking at an example of code, so to answer you: yes the direction will be in a second issue, but the spacing and values should still be in this issue, so the pages won't look different Of course, please raise a PR after reading the guideline, nicely done . The Spacer shouldn't affect the children inside of it, think of it as creating a container with margin-block to space the area of the children inside of it from other areas
I guess we could close this issue
will be closed when the height is removed in the other PR


Question: }; this.containerRef = React.createRef(); <ins> this.editorRef = React.createRef(); </ins> } onResize() { this.setState({ resizing: true });


Question: <del> import React, { Fragment } from 'react'; </del> <ins> import React, { Fragment, Component } from 'react'; import Prism from 'prismjs'; </ins> import PropTypes from 'prop-types'; import './challenge-description.css';

Related to . Once that's done, the code blocks will be written in blocks of  into ! while the same code on the guide looks like ! I think this change would make the code blocks easier to read, make the guide and challenges feel more like parts of a unified whole and fit better with the code editor aesthetic discussed in the . I'd be happy to work on this, if this is useful feature What do you think?
You should look into for this sort of thing. Goodluck. this is something we would probably be needing and using across Guide and Learn. So, I'll let you chime in and guide on this.


Question: } const onChange = (editorValue: string) => { <del> const { updateFile, fileKey } = props; </del> <ins> const { updateFile, fileKey, isResetting } = props; if (isResetting) return; </ins> // TODO: now that we have getCurrentEditableRegion, should the overlays // follow that directly? We could subscribe to changes to that and redraw if // those imply that the positions have changed (i.e. if the content height

Originally reported by the editor region doesn't render when camper submits a challenge. https://user- This hide the instruction and lowerJaw, whenever this bug occurs
What browser/OS were you using to trigger this? I'm not able to replicate with either FF or Chrome on Windows/Linux. Or perhaps there is some trick to this that I'm not seeing in the video?
To be honest, I don't think this is a browser specific. she mentioned that chrome was used, my guess is that somewhere in the JavaScript files, it has if statement that stop editor region from rendering, because old PRs do account for this failing. The true solution is to findout, what changed and what isn't pleased. Otherwise, we can add , that fallback to a basic component with instruction and submit button. Or we can add another tab in the upperJaw, for instruction if editor region is It won't have editor region, but it's better than the current nothing. Sorry, I can't include all of it, but here is the discord discussion.
my user agent info (on Windows 11) User Agent is: <codeMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code
Here's a report on the forum with a similar issue (but on a different project) and the user had to move to their cell phone to complete the step and a recent one with the same issue but again, different project and step:
This should hopefully be fixed when gets in.
Here is a brand new report of someone having the same issue on the forum
Another report of this issue:
Usually, people can fix it by clearing the cache and closing and reopening the browser. Switching browsers also helps (likely for the same reason, fresh code). I get the feeling that this bug might not be reproducible in dev mode. It also seems like skipping steps and returning to them later is somehow involved. But I'm not sure what the exact steps are. Is there any information we can gather from people having this issue that can help debug it? Should we try sending people to this issue so we can collect information?
not reproducible. Feel free to open this issue again if it occurs.


Question: } const onChange = (editorValue: string) => { <del> const { updateFile, fileKey } = props; </del> <ins> const { updateFile, fileKey, isResetting } = props; if (isResetting) return; </ins> // TODO: now that we have getCurrentEditableRegion, should the overlays // follow that directly? We could subscribe to changes to that and redraw if // those imply that the positions have changed (i.e. if the content height

I don't think this is completed just because we can't reliably reproduce it. It still happens, I have had it happen recently in one of the Python curriculum steps. I still have the step in the bugged state. 'm not sure it is reproducible in dev mode. 'm almost positive skipping steps, going back using the browser history (back button), and other such actions are involved. only affects a single step at a time. It is not like it happens and all your steps are broken. The one before and the next are fine. the cache is not enough you have to clear the cookies and other site data (Chrome wording). The storage (, etc.) is cleared when doing so. localStorage: Chrome bugged - and are empty Chrome working - and have content. Is there anything else I should look at? I'm almost positive if I clear the localStorage the bug will go away. But before I confirm that I will keep it as is in case someone has a suggestion for anything I should post that might help debug this. Fairly sure, the order of the event was I skipped a step forward and used the back button. But I can't really remember and I don't know if I did anything else. I suggest we keep this open to acknowledge the issue. As I suggested, it might be helpful if we gather information from people to help debug it.
Weird, I just randomly reproduced it in my test browser. Clearing the fixed it. I can do it reliably. With the dev tools open, completed the challenge, reset it, and resized the window by dragging the border. Edit: it is on this step It looks like the same bug but it is triggered by the layout change which I hadn't seen before. I'm guessing the reload when going back to the previous challenge can trigger it as well.
without your reliable way to reproduce, none of this would be possible. My findings doesn't show that submitting is necessary for the problem to appear. It's all in resetting challenge, with a twist. It's possible this is still not the original problem, but looking the same and caused by something different. Reproducing: anything in the initial contents. challenge. and are empty - invalid. This is the point when error can appear. everything still looks okay.


Question: } const onChange = (editorValue: string) => { <del> const { updateFile, fileKey } = props; </del> <ins> const { updateFile, fileKey, isResetting } = props; if (isResetting) return; </ins> // TODO: now that we have getCurrentEditableRegion, should the overlays // follow that directly? We could subscribe to changes to that and redraw if // those imply that the positions have changed (i.e. if the content height

At this point: If anything is modified in editor contents - and are going back to normal. Crisis averted! Any action that makes editor reload (if that's right word here) results in missing editable region. This includes layout change as shown above. More code involved rundown: is reset. action is performed - and boundaries are filled from seed. prop is set to . of triggers effect is called. It changes the value (contents) of the editor , to the initial text contents. triggers of the Monaco editor. updates props of the challenge. Because the function uses the current state of the , which just had contents changed. There's no editable regions (decoration ranges) that are relevant for that at this time. Therefore is empty array. is performed, writing empty and to props for the challenge. 'm not entirely sure how's the timing for the other calls from the change effect. That effect triggers the change of . My tests suggests that is still when executes. is laying in wait.


Question: function createSuperBlockTitle(str) { return codingPrepRE.test(str) ? `${str} (Thousands of hours of challenges)` <del> : `${str} Certification (300 hours)`; </del> <ins> : `${str} Certification (300xa0hours)`; </ins> } export class SuperBlock extends Component {

Currently the map looks like this: ! I think it would look a lot better if we made more use of the available space. Something like this: !
I can fix the css in a separate PR, if you like. Unless you're already handling it, of course.
I think it is handled now in the PR already. I moved things into the Grid system
That PR still has the heavy indentation: !
You are correct, if you have something going please go ahead and push to the PR. I am done with the basic consolidation of the views that I was going for.


Question: # --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/KaNGNR.   **Objective:** Build an app that is functionally similar to this: https://treemap-diagram.freecodecamp.rocks.  Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.

All the data viz projects were created on our .rocks domain. We just need to replace the codepen URL's with the new addresses in the curriculum files of those five projects. Here's the URL's: https://bar- https://scatterplot- https://heat- https://choropleth- https://treemap- And the
Hey Just to make sure you want this replaced with https://bar- ?
I want to contribute to this project. Please assign me this task.
thank you for your interested in contributing, but this issue is not open for contributions, please look at issues with labels or


Question:
"assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', 'message: MagicEightBall's third child should be a button element.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', 'message: MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'message: When MagicEightBall is first mounted to the DOM, it should return an empty p element.');",  "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.'); "   "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.');}"  ], "solutions": [ "nconst inputStyle = {n  width: 235,n  margin: 5n}nnclass MagicEightBall extends React.Component {n  constructor(props) {n    super(props);n    this.state = {n      userInput: '',n      randomIndex: ''n    }n    this.ask = this.ask.bind(this);n    this.handleChange = this.handleChange.bind(this);n  }n  ask() {n    if (this.state.userInput) {n      this.setState({n        randomIndex: Math.floor(Math.random() * 20),n        userInput: ''n      });n    }n  }n  handleChange(event) {n    this.setState({n      userInput: event.target.valuen    });n  }n  render() {n    const possibleAnswers = [n      "It is certain", "It is decidedly so", "Without a doubt",n      "Yes, definitely", "You may rely on it", "As I see it, yes",n      "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again",n      "Ask again later", "Better not tell you now", "Cannot predict now",n      "Concentrate and ask again", "Don't count on it", "My reply is no",n      "My sources say no", "Outlook not so good","Very doubtful", "Most likely"n    ];n    const answer = possibleAnswers[this.state.randomIndex];n    return (n
n        <inputn          type="text"n          value={this.state.userInput}n          onChange={this.handleChange}n          style={inputStyle} />
n        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
n
Answer:
n
n          {answer}n
n
n    );n  }n};"

<!-- freeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- NOTE: If your issue is CodePen Project / Test Suite related, please open it using the below URL instead --<!-- --<!-- Insert link to challenge below -- <!-- Describe below when the issue happens and how to reproduce it --Correct solution doesn't pass. Maybe I am missing something but code does exactly what is asked in challenge description but last test doesn't pass. "When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array." - this test appears failed. <!-- Describe your workspace in which you are having issues--Browser Name, Version: Chrome, Version 64.0.3282.140 (Official Build) (64-bit) Operating System: Windows 10 Mobile, Desktop, or Tablet: Desktop <!-- If relevant, paste all of your challenge code in here --<!-- Add a screenshot of your issue --!
You have the correct solution. This should be an error with the challenge tests. I've reproduced this both in production and locally, on staging. I will start working on a fix—the PR should be opened tomorrow morning (Feb 4, EST).
I found the bug. Can I submit a PR?
customarily, you would give the original responder a day or two to propose his/her solution. I had made my intentions clear in my previous comment. Nevertheless, I've tested his solution locally and it works well.
Hey ! Thanks guys, for pitching in and reporting and fixing this. Sorry about the delay, we will review and merge soon. Happy coding!
seems fix solution doesn't pass for the challenge.
The fix has not been deployed yet, it may take us a while to get into the beta server.
Still a bug on main site. Its keeping me from passing this exercise.
I thought I was going crazy. I cannot pass this challenge even with the correct answer either.
It might be helpful for you guys so I'm reporting that the bug is still there when using safari (logged in and out). When I tried to test with Chrome it just passed.


Question:
"assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', 'message: MagicEightBall's third child should be a button element.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', 'message: MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'message: When MagicEightBall is first mounted to the DOM, it should return an empty p element.');",  "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.'); "   "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.');}"  ], "solutions": [ "nconst inputStyle = {n  width: 235,n  margin: 5n}nnclass MagicEightBall extends React.Component {n  constructor(props) {n    super(props);n    this.state = {n      userInput: '',n      randomIndex: ''n    }n    this.ask = this.ask.bind(this);n    this.handleChange = this.handleChange.bind(this);n  }n  ask() {n    if (this.state.userInput) {n      this.setState({n        randomIndex: Math.floor(Math.random() * 20),n        userInput: ''n      });n    }n  }n  handleChange(event) {n    this.setState({n      userInput: event.target.valuen    });n  }n  render() {n    const possibleAnswers = [n      "It is certain", "It is decidedly so", "Without a doubt",n      "Yes, definitely", "You may rely on it", "As I see it, yes",n      "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again",n      "Ask again later", "Better not tell you now", "Cannot predict now",n      "Concentrate and ask again", "Don't count on it", "My reply is no",n      "My sources say no", "Outlook not so good","Very doubtful", "Most likely"n    ];n    const answer = possibleAnswers[this.state.randomIndex];n    return (n
n        <inputn          type="text"n          value={this.state.userInput}n          onChange={this.handleChange}n          style={inputStyle} />
n        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
n
Answer:
n
n          {answer}n
n
n    );n  }n};"

Same with this challenge: Browser User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15
You used the solution shows above? If so, can you confirm this? I just tested this on production and seems to work fine (at least in Chrome, Edge, and Firefox).
safari is not passing with the code in the OP, firefox does pass. It only fails the last test
Any guess why?
I'm not sure what's happening here, I tried taking a closer look at the last test (the one that always fails). And when logging the info used in the assert, it looks like it should pass.... ! ! The two conditions in the assert are true, and it still fails. The test is complex and difficult to pinpoint what the problem is, or why it only seems to be failing in safari. By lowering the timeout at the beginning of the test from 250ms to 50ms it will pass some of the time, but still fail sometimes as well. I don't know, that's where I'm at.


Question: // Change code above this line } } <del> const newBookList = add(bookList, 'A Brief History of Time'); const newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies'); const newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies'); console.log(bookList); </del> ``` # --solutions--

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. -- This is the starter code: The starter code for this challenge is strange. 1) Why the space between the function name and the ()s for the arguments? 2) I get that the idea is to have the learners change the function signature, but it is a bit strange having a mismatch between the function signatures and the function calls in the starter code.
The linked PR in this issue. For , we could probably move away from having variables in the seed code and instead assert the function returns the expected value


Question: <ins> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by the developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contentful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databases, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, reusability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walkthrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </ins>

<!-- 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 have gone through the Guides of freeCodeCamp and I think there should be Guides on Some Static Site Generator like Hugo, Jekyll, Next, Hexo etc The guides have already which is also used to generate the static site
Hi I think it is fine to do that. If you really want to do it write, I would suggest first creating a new article on Static Site Generators that would be located at . Then, in the same PR, I would suggest moving the existing to be a sub folder of the folder you create like . Then, you contributors can create other folders/files like: However, please do a quick search of the repo to see if you can find existing articles which may already cover these. I believe I have seen some of these mentioned in detail in some existing Guide articles, so we don't want to be duplicating content if we can keep from it. In fact, before creating a PR, I suggest you document here where you find any of these and we will figure out the best strategy of how to organize everything.
Any progress on this
yeah I have gone through the guides I think the only static site generator based file in freeCodeCamp is I am working on to add more guides on static site generator like and
Take the time you need. It was just a while since any activity here so I thought I would check in.


Question: # --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/GrZVaM.   **Objective:** Build an app that is functionally similar to this: https://bar-chart.freecodecamp.rocks.  Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.


Question: - text: functionWithArgs(7,9) should output 16 testString: if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16); - text: Call functionWithArgs with two numbers after you define it.  testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*;/m.test(code));   testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*/m.test(code));  ```

Describe your problem and how to reproduce it: The test "Call functionWithArgs with two numbers after you define it." doesn't passes if the function call doesn't end with semi column. As in js semi columns are not required it should pass even if user doesn't add semi column Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: latest Operating System: windows 10 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): ! !
There has been an on and off discussion for a while about whether to enforce the use of end-of-line statement semi-colons. W FYI - This debate about semi-colons is not new to FCC. This is a debate that has been going on for a long time. See the following link how not using semi-colons could cause unexpected errors. This debate is similar to whether or not you should require { and } if there is only one statement in the code block. For example: is the same as: but FCC's current linter settings expect the { and } to be used. Both are valid JavaScript, but it is thought using { and } makes it clear especially when you have a line after like below: OR Both of the above accomplish the same thing, but reading the code could get confusing especially if indentation of the second line was accidentally written as: Someone coming from Python might thing the second line is far of the if statement block when it is not. As far as the semi-colon debate goes, I don't care which way it is done, just as long as it is consistent throughout the curriculum. Currently, there are challenges which do not require the semi-colon and some which do (which you have observed).
Well as these tutorials requires user to type regular JavaScript code. It would make sense to treat the code same as regular javascripts treats it's. If the function returns correct result. Code should pass the test.
Are you referring to semi-colons or the curly brackets now?
I have eleborate my answer. And I am taking about semicolons.
I have asked those in charge to make a final decision about this issue. Once I get some feedback, I will let you know the verdict. This decision will affect many challenges.


Question: - text: functionWithArgs(7,9) should output 16 testString: if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16); - text: Call functionWithArgs with two numbers after you define it.  testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*;/m.test(code));   testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*/m.test(code));  ```

Hi, By any chance have they took a decision about this issue? I can confirm that this is still an issue after 3 months. When you get used to code using the standardJS style(), for example, it's not immediately obvious that the "Call function" test is not passing due to a missing semicolon. I don't mind whether you decide to keep the semicolons or let them be optional, as it comes to coding style. But a failing test should indicate the real problem, and I feel that failing a test named "Call function after you define it" when you actually called your function properly, can be confusing to new developers. Cheers, Mike
Yes, would you be interested in making the semi-colon optional for this challenge to pass the tests?
sure! Just let me get familiar with the code base and as soon as I have a better grasp, I will send the pr's for this challenge and the next one (that is under the same situation).
Any progress on this I agree that the semi-colons should be optional - If a camper is failing a challenge with valid javascript, that seems like a problem that might confuse them.


Question: "All related radio buttons should have the same name attribute.", "Here's an example of a radio button:", "<label><input type="radio" name="indoor-outdoor"> Indoor</label>",  "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor."   "Add a pair of radio buttons to your form. One should have the option of indoor and the other should have the option of outdoor."  ], "tests": [ "assert($('input[type="radio"]').length > 1, 'Your page should have two radio button elements.')",

Lesson text repeats itself: "You can use radio buttons for questions where you want the user to only give you one answer. Radio buttons are a type of input. Each of your radio buttons should be nested within its own label element. All related radio buttons should have the same name attribute. Here's an example of a radio button: <label<input type="radio" name="indoor-outdoor"Indoor</label. Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor."
It is a style choice of whoever wrote this lesson. A bug would be error in the code that stopped the script or program from executing as intended.


Question:
return `
 --fcc-editable-region--  <button class="playlist-song-info" onclick="playSong(${song.id})">   <button class="playlist-song-info">  ${song.title} ${song.artist} ${song.duration}

For , the answer is already provided for them. The starting seed code needs to just be the button element without the onclick. Here is the file that needs changing If you are interested in working on this please read through the first We do not assign issues. If you are interested, work on the issue and then create a PR for the fix. Happy coding! incorrect start code This should be the correct starting seed code No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response


Question: "title": "Add ID Attributes to Bootstrap Elements", "description": [ "Recall that in addition to class attributes, you can give each of your elements an id attribute.",  "Each id should be unique to a specific element.",   "Each id must be unique to a specific element and used only once per page.",  "Let's give a unique id to each of our div elements of class well.", "Remember that you can give an element an id like this: <div class="well" id="center-well">", "Give the well on the left the id of left-well. Give the well on the right the id of right-well."

I think "Each id should be unique to a specific element." would be less ambiguous (and more accurate) as "Each id must be unique on the page."


Question: "title": "Add ID Attributes to Bootstrap Elements", "description": [ "Recall that in addition to class attributes, you can give each of your elements an id attribute.",  "Each id should be unique to a specific element.",   "Each id must be unique to a specific element and used only once per page.",  "Let's give a unique id to each of our div elements of class well.", "Remember that you can give an element an id like this: <div class="well" id="center-well">", "Give the well on the left the id of left-well. Give the well on the right the id of right-well."

I want to suggest that, at this point, in addition to the comment about the block element ' stretch to fill your page's entire horizontal space.', there is a comment that any element following it will flow to a "new line". You could argue that is [almost] "assumed". But I believe it should be stated.


Question: newTest.stack = stack; } <del> newTest.message = newTest.message.replace(/<p>/, `<p>${i + 1}. `); yield put(updateConsole(newTest.message)); </del> <ins> const withIndex = newTest.message.replace(/<p>/, `<p>${i + 1}. `); yield put(updateConsole(withIndex)); </ins> } finally { testResults.push(newTest); }

and are not being replaced by their values in hints: ! While in the console the actual and expected values are visible: ! To reproduce, go to any challenge that uses and/or :
Happening for me in hints for step 76:
Thank you for mentioning, but the fix has not been deployed yet.


Question: return ( <Fragment> <Helmet> <del> <title>Report a users profile | freeCodeCamp.org</title> </del> <ins> <title>Report a users portfolio | freeCodeCamp.org</title> </ins> </Helmet> <Spacer size={2} /> <Row className='text-center'> <Col sm={8} smOffset={2} xs={12}> <h2> Do you want to report {username} <del> 's profile for abuse? </del> <ins> 's portfolio for abuse? </ins> </h2> </Col> </Row>

<img width="1074" alt="Profile_freeCodeCamp_org" src="https://user-"
can I take this issue?
Thank you and for your interest. This issue might need a little more investigation before arriving at the final solution. I encourage you to find similar issues to tackle in the meantime. should I only audit the copy to replace profile with portfolio or you would rather changing the profile instances in the client and the api-server entirely?
I would like to get it assigned..
this should come as a cosmetic change to the copy only, do not change any endpoints or code (functions, objects, files) etc. It can be done to both API and the client where copy edit is needed.


Question: return ( <Fragment> <Helmet> <del> <title>Report a users profile | freeCodeCamp.org</title> </del> <ins> <title>Report a users portfolio | freeCodeCamp.org</title> </ins> </Helmet> <Spacer size={2} /> <Row className='text-center'> <Col sm={8} smOffset={2} xs={12}> <h2> Do you want to report {username} <del> 's profile for abuse? </del> <ins> 's portfolio for abuse? </ins> </h2> </Col> </Row>

<img width="927" alt="Settings_freeCodeCamp_org" src="https://user-"


Question:
return isSessionUser ? ( <Fragment> <FullWidthRow>
You have not made your profile public.

 You have not made your portfolio public.
  </FullWidthRow> <FullWidthRow>
  You need to change your privacy setting in order for your profile to be seen by others. This is a preview of how your profile will look   You need to change your privacy setting in order for your portfolio to be seen by others. This is a preview of how your portfolio will look  when made public.
 </FullWidthRow>


Question:
return isSessionUser ? ( <Fragment> <FullWidthRow>
You have not made your profile public.

 You have not made your portfolio public.
  </FullWidthRow> <FullWidthRow>
  You need to change your privacy setting in order for your profile to be seen by others. This is a preview of how your profile will look   You need to change your privacy setting in order for your portfolio to be seen by others. This is a preview of how your portfolio will look  when made public.
 </FullWidthRow>


Question: let alertMessage; window.alert = (message) => alertMessage = message; // Override alert and store message <del> const randomValidPokeId = Math.floor(Math.random() * 1025) + 1; </del> <ins> const randomValidPokeId = String(Math.floor(Math.random() * 1025) + 1); </ins> searchInput.value = randomValidPokeId; searchInput.dispatchEvent(new Event('change')); searchButton.click(); <del> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' +  randomValidPokeId.toString()); // Fetch from proxy to simulate network delay </del> <ins> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' +  randomValidPokeId); // Fetch from proxy to simulate network delay </ins> if (res.ok) { <del> await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow UI to update </del> <ins> await new Promise(resolve => setTimeout(resolve, 2000)); // Additional delay to allow UI to update </ins> <del> const data = await res.json(); const typesEl = document.getElementById('types'); const actualTypes = data.types.map(typeSlot => typeSlot.type.name); </del> <ins> const data = await res.json(); const typesEl = document.getElementById('types'); const actualTypes = data.types.map(typeSlot => typeSlot.type.name); </ins> assert.lengthOf(typesEl.children, actualTypes.length); assert.sameMembers(actualTypes, [...typesEl.children].map(el => el.innerText.trim().toLowerCase())); } } catch (err) {

There's typo in two hints. Instead of element it mentions . - - This is something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I was making a PR for a different issue and saw this, so I the fix to the PR.


Question: id: bad87fee1348bd9aecf08801 title: Introduction to HTML5 Elements challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am' </del> <ins> videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7' </ins> --- ## Description

I think the video for this challenge should be updated. It does not show the proper nesting of both the p elements inside the main element. It also has one error as one of the p elements are not closed properly.
Any comments?
Agreed with lasjorg, In this exercise a new paragraph should be below the first, with a main tag then to wrap around both paragraphs. In the video, the main tag is around the newly second paragraph only, plus the newly paragraph has an opening p tag at the end instead of a closing p tag. For contrast, the very next video has the main and paragraph tags the way they should be. Discovered this error when my daughter ran into difficulty with this exercise, and when she watched the video became even more confused.
Any thoughts?
I will redo that video.


Question: "  <li>cheese</li>", "</ul>", "would create a bullet point-style list of "milk" and "cheese".",  "Replace your p elements with an unordered list of three things that cats love."   "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page."  ], "tests": [ "assert($("ul").length > 0, 'Create a ul element.')",

Within the challenge it instructs you to create bullets by replacing all the p elements with(no spaces of course) < li elements to get a bulleted list. When I follow it as instructed it leaves my style coding visible (class="red-text") is then displayed. When I remove the end closure < l i (obviously no spaces), it leaves everything intact but the practice won't allow me to advance without adding the closure... even though the closure is at the end of the style portion of my closure Example: For it to look right I remove the end closure making it < l i this happens: <li class="red-text"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</liBUT for it to be marked correctly I have to Complete the closure < li class="red-text"Kitty ipsum...... and it looks like this: <liclass="red-text"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</liSo In order to fix it, and still make sure my code isn't displayed on my final work, i'd have to remove my styling from the code or simply leave it exposed See below for the link to the segment and below that is my full code Challenge has an issue. User Agent is: <codeMozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/601.1.56 (KHTML, like Gecko) Version/9.0 Safari/601.1.56</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code:
What the instructions for this challenge mean to be asking is for you to completely remove the bottom two paragraphs and put an unordered list at the bottom instead. This avoids the problem you're running into of having an anchor tag in the middle of your block (which is not valid markup). I agree that the wording is confusing since there is another tag earlier in the page with other types of tags in between. This should be clarified to reflect that the bottom two tags should be removed and a three item list created in it's place.
I can't complete the challenge either


Question: "cert-map-estimates": { "certs": "Certificación (300 horas)", "coding-prep": "(Miles de horas de desafíos)" <ins> }, "editor-tabs": { "info": "Información", "code": "Código", "tests": "Pruebas", "preview": "Avance" </ins> } }, "donate": {

Describe the bug When you enter a challenge using a mobile device, the tabs below the main header are displayed with untranslated text To Reproduce Steps to reproduce the behavior (mobile device): to untranslated tabs below the main header Expected behavior Tabs text should be translated. Screenshots Spanish site ! Chinese site ! Desktop (please complete the following information): OS: [Windows 10] Browser: [chrome] Version: [88] Additional context Those strings are not available yet on the Crowdin platform.


Question: "id": "bad87fee1348cd8acef08812", "title": "Create a Block Element Bootstrap Button", "description": [  "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",   "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.",  "This image illustrates the difference between inline elements and block-level elements:", "", "Note that these buttons still need the btn class.",


Question: "id": "bad87fee1348cd8acef08812", "title": "Create a Block Element Bootstrap Button", "description": [  "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",   "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.",  "This image illustrates the difference between inline elements and block-level elements:", "", "Note that these buttons still need the btn class.",


Question: ], "challengeSeed":[ "//var ourDog = {", <del> "//   "name": "Camper"", "//   "legs": 4", "//   "tails": 1", </del> <ins> "//   "name": "Camper",", "//   "legs": 4,", "//   "tails": 1,", </ins> "//   "friends": ["everything!"]", "//};", "",

Challenge has an issue. The commented code sample at the top of the challenge is missing commas between properties. <img width="1158" alt="screen shot 2015-08-16 at 5 01 57 pm" src=""
And on this challenge, too.


Question: export function insertEditableRegions(challengeFiles = []) { if (challengeFiles?.some(file => file.editableRegionBoundaries?.length > 0)) { const editableRegionStrings = fileExtension => { <del> const startComment = fileExtension === 'html' ? '<!--' : '/*'; const endComment = fileExtension === 'html' ? '-->' : '*/'; return `n${startComment} User Editable Region ${endComment}n`; </del> <ins> switch (fileExtension) { case 'html': return 'n<!-- User Editable Region -->n'; case 'css': return 'n/* User Editable Region */n'; case 'py': return 'n# User Editable Regionn'; case 'js': return 'n// User Editable Regionn'; default: return 'nUser Editable Regionn'; } </ins> }; const filesWithEditableRegions = challengeFiles.map(file => {

The creation of the help wanted forum post should be changed to use correct Python comments for files. Right now the posts are created with the wrong type of comment. !
I want to work on this issue
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: `bookList` should not change and still equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. ```js <ins> add(bookList, "Test"); </ins> assert( JSON.stringify(bookList) === JSON.stringify([

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. -- This is the starter code: The starter code for this challenge is strange. 1) Why the space between the function name and the ()s for the arguments? 2) I get that the idea is to have the learners change the function signature, but it is a bit strange having a mismatch between the function signatures and the function calls in the starter code.
The linked PR in this issue. For , we could probably move away from having variables in the seed code and instead assert the function returns the expected value


Question: }; this._editor = null; <ins> this.focusOnEditor = this.focusOnEditor.bind(this); </ins> } editorWillMount = monaco => {

Is your feature request related to a problem? Please describe. It currently can take a several key presses to navigate to the editor if it does not have focus. Describe the solution you'd like It should be possible to focus on the editor with a hotkey, for example 'e'. The issue where this was mostly discussed will be closed soon, but some thoughts about implementing this appeared there:


Question: import { createSelector } from 'reselect'; import { executeChallenge, updateFile } from '../redux'; <del> import { userSelector } from '../../../redux'; </del> <ins> import { userSelector, isDonationModalOpenSelector } from '../../../redux'; </ins> import { Loader } from '../../../components/helpers'; const MonacoEditor = React.lazy(() => import('react-monaco-editor')); const propTypes = { <ins> canFocus: PropTypes.bool, </ins> contents: PropTypes.string, dimensions: PropTypes.object, executeChallenge: PropTypes.func.isRequired,

Describe the bug When you go to a challenge and the donation modal appears a stack overflow error occurs To Reproduce Steps to reproduce the behavior: Chrome go to on the dev console error Screenshots ! Desktop (please complete the following information): OS: Ubuntu Browser Chrome Version 76.0.3809.100 (Official Build) (64-bit) Additional context Removing removes it, so presumably it's a clash between that and the modal.
You are correct, I think there could be a race condition between the two.


Question: ], "challengeSeed":[ "// var ourDog = {", <del> "//   "name": "Camper"", "//   "legs": 4", "//   "tails": 1", </del> <ins> "//   "name": "Camper",", "//   "legs": 4,", "//   "tails": 1,", </ins> "//   "friends": ["everything!"]", "// };", "",


Question: <del> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contenful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databasses, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, resuability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walktrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </del>

<!-- 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 have gone through the Guides of freeCodeCamp and I think there should be Guides on Some Static Site Generator like Hugo, Jekyll, Next, Hexo etc The guides have already which is also used to generate the static site
Hi I think it is fine to do that. If you really want to do it write, I would suggest first creating a new article on Static Site Generators that would be located at . Then, in the same PR, I would suggest moving the existing to be a sub folder of the folder you create like . Then, you contributors can create other folders/files like: However, please do a quick search of the repo to see if you can find existing articles which may already cover these. I believe I have seen some of these mentioned in detail in some existing Guide articles, so we don't want to be duplicating content if we can keep from it. In fact, before creating a PR, I suggest you document here where you find any of these and we will figure out the best strategy of how to organize everything.
Any progress on this
yeah I have gone through the guides I think the only static site generator based file in freeCodeCamp is I am working on to add more guides on static site generator like and
Take the time you need. It was just a while since any activity here so I thought I would check in.


Question: <div style="width: 100%; text-align: center;"> <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="520" height="170" aria-hidden="true" alt="Diagram showing the possible paths for 2 by 2 and 4 by 3 rectangles"> <style> <del> .g { fill: none; stroke: #ccc } .s, .s2 { fill: #bff; stroke: black; fill-opacity: .4 } .s2 { fill: #fbf } .d { stroke:black; fill:none} </del> <ins> .diagram-g { fill: none; stroke: #ccc } .diagram-s, .diagram-s2 { fill: #bff; stroke: black; fill-opacity: .4 } .diagram-s2 { fill: #fbf } .diagram-d { stroke:black; fill:none} </ins> </style> <del> <defs>	<g id="m"> <g id="h4"><g id="h2"> <path id="h" d="m0 10h 640" class="g"/> <use xlink:href="#h" transform="translate(0,20)"/></g> <use xlink:href="#h2" transform="translate(0, 40)"/></g> <use xlink:href="#h4" transform="translate(0,80)"/> <g id="v8"><g id="v4"><g id="v2"> <path id="v" d="m10 0v160 m 20 0 v-160" class="g"/> <use xlink:href="#v" transform="translate(40,0)"/></g> <use xlink:href="#v2" transform="translate(80,0)"/></g> <use xlink:href="#v4" transform="translate(160,0)"/></g> <use xlink:href="#v8" transform="translate(320,0)"/></g> <path id="b" d="m0 0h80v60h-80z" class="s"/> </del> <ins> <defs> <g id="diagram-m"> <g id="diagram-h4"> <g id="diagram-h2"> <path id="diagram-h" d="m0 10h 640" class="diagram-g"/> <use xlink:href="#diagram-h" transform="translate(0, 20)"/> </g> <use xlink:href="#diagram-h2" transform="translate(0, 40)"/> </g> <use xlink:href="#diagram-h4" transform="translate(0, 80)"/> <g id="diagram-v8"> <g id="diagram-v4"> <g id="diagram-v2"> <path id="diagram-v" d="m10 0v160 m 20 0 v-160" class="diagram-g"/> <use xlink:href="#diagram-v" transform="translate(40, 0)"/> </g> <use xlink:href="#diagram-v2" transform="translate(80, 0)"/> </g> <use xlink:href="#diagram-v4" transform="translate(160, 0)"/> </g> <use xlink:href="#diagram-v8" transform="translate(320, 0)"/> </g> <path id="diagram-b" d="m0 0h80v60h-80z" class="diagram-s"/> </ins> </defs> <del> <g transform="translate(.5,.5)"> <use xlink:href="#m"/> <g transform="translate(10,10)"> <path d="m0 0v40h40v-40z" class="s2"/><path d="m20 0v40" class="d"/> <path d="m60 0v40h40v-40z" class="s2"/><path d="m60 20h40" class="d"/> <g transform="translate(120, 0)"> <use xlink:href="#b"/><path d="m0 20h40v20h40" class="d"/></g> <g transform="translate(220, 0)"> <use xlink:href="#b"/><path d="m0 40h40v-20h40" class="d"/></g> <g transform="translate(320, 0)"> <use xlink:href="#b"/><path d="m20 0v40h20v-20h20v40" class="d"/></g> <g transform="translate(420, 0)"> <use xlink:href="#b"/><path d="m60 0v40h-20v-20h-20v40" class="d"/></g> <g transform="translate(20, 80)"> <use xlink:href="#b"/><path d="m40 0v60" class="d"/></g> <g transform="translate(120, 80)"> <use xlink:href="#b"/><path d="m60 0v20h-20v20h-20v20" class="d"/></g> <g transform="translate(220, 80)"> <use xlink:href="#b"/><path d="m20 0v20h20v20h20v20" class="d"/></g> <g transform="translate(320, 80)"> <use xlink:href="#b"/><path d="m0 20h20v20h20v-20h20v20h20" class="d"/></g> <g transform="translate(420, 80)"> <use xlink:href="#b"/><path d="m0 40h20v-20h20v20h20v-20h20" class="d"/></g> </g></g> </svg> </div> </del> <ins> <g transform="translate(.5, .5)"> <use xlink:href="#diagram-m"/> <g transform="translate(10, 10)"> <path d="m0 0v40h40v-40z" class="diagram-s2"/> <path d="m20 0v40" class="diagram-d"/> <path d="m60 0v40h40v-40z" class="diagram-s2"/> <path d="m60 20h40" class="diagram-d"/> <g transform="translate(120, 0)"> <use xlink:href="#diagram-b"/> <path d="m0 20h40v20h40" class="diagram-d"/> </g> <g transform="translate(220, 0)"> <use xlink:href="#diagram-b"/> <path d="m0 40h40v-20h40" class="diagram-d"/> </g> <g transform="translate(320, 0)"> <use xlink:href="#diagram-b"/> <path d="m20 0v40h20v-20h20v40" class="diagram-d"/> </g> <g transform="translate(420, 0)"> <use xlink:href="#diagram-b"/> <path d="m60 0v40h-20v-20h-20v40" class="diagram-d"/> </g> <g transform="translate(20, 80)"> <use xlink:href="#diagram-b"/> <path d="m40 0v60" class="diagram-d"/> </g> <g transform="translate(120, 80)"> <use xlink:href="#diagram-b"/> <path d="m60 0v20h-20v20h-20v20" class="diagram-d"/> </g> <g transform="translate(220, 80)"> <use xlink:href="#diagram-b"/> <path d="m20 0v20h20v20h20v20" class="diagram-d"/> </g> <g transform="translate(320, 80)"> <use xlink:href="#diagram-b"/> <path d="m0 20h20v20h20v-20h20v20h20" class="diagram-d"/> </g> <g transform="translate(420, 80)"> <use xlink:href="#diagram-b"/> <path d="m0 40h20v-20h20v20h20v-20h20" class="diagram-d"/> </g> </g> </g> </svg> </div> </ins> # --instructions--

Describe your problem and how to reproduce it: SVG image in the challenge description is affected by SVG logo in navbar. They share some element s, what results in malformed image in description. Changing s to make them not overlap should deal with the issue. The simplest way seems to be, to change one of the images (probably one in the challenge), for example by adding unique prefix to s. That wouldn't eliminate completely the chance for some other conflict in future, but that's probably not something to worry about much. 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): Current look ! Proper image !


Question: assert.exists(title); ``` <del> The `title` element should be within the `head` element. </del> <ins> Your `title` element should be within the `head` element. </ins> ```js assert.exists(document.querySelector('head > title')); ``` <del> Your project should have a title of `Registration Form`. </del> <ins> Your project should have a title of `Registration Form`. Remember, the casing and spelling matters for the title. </ins> ```js const title = document.querySelector('title'); <del> assert.equal(title.text.toLowerCase(), 'registration form') </del> <ins> assert.equal(title.text, 'Registration Form'); </ins> ``` <del> Remember, the casing and spelling matters for the title. </del> <ins> You should create a `meta` element within the `head` element. </ins> ```js <del> const title = document.querySelector('title'); assert.equal(title.text, 'Registration Form'); </del> <ins> assert.exists(document.querySelector('head > meta')); ``` You should give the `meta` element a `charset` attribute with the value of `utf-8`. ```js assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); ``` Your `meta` element should be a void element, it does not have an end tag `</meta>`. ```js assert.notMatch(code, /</metas*>?/i); </ins> ``` # --seed--

I followed Step 4 instructions. As I finished typing out the element, by habit I press + , and noticed that it accepted it, even though it shouldn't have as I was still missing the element It should have failed, as it's still missing the that Step 4 asked for ! Device: PC OS: Window 11 Version 23H2 Browser: Firefox 127.0.2 (64-bit) No response
This seem to also happen in other parts of the same course, such as Step 7 ! As you can see, it is missing its closing tag As well as Step 11 ! It's missing its closing tag yet the Step still validate it
Can you please open a new issue for the form element. I'm guessing the browser is auto closing it, and we don't have a regex test for it. It should result in a valid form element, because the browser will close it. However, the element technically does not have any "Tag omission" so it should have an end tag in the HTML (even if it gets to the DOM by the browser).
Done


Question: id: 587d778d367417b2b2512aaa title: Make Elements Only Visible to a Screen Reader by Using Custom CSS challengeType: 0 <del> videoUrl: 'https://scrimba.com/c/c8azdfM' </del> <ins> videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' </ins> --- ## Description

The video for the lecture does not exist.
Two videos from that section are missing: "Add an Accessible Date Picker" and "Make Elements Only Visible to a Screen Reader by Using Custom CSS". It seems both videos are down on the Scrimba platform. In the , both videos seem to be missing. If this video has been uploaded elsewhere, we can replace the URL for now. Otherwise, those two videos may need to be re-uploaded. Side note: The playlists are also incorrectly named. It seems that the Applied Accessibility and Applied Visual Design titles have accidentally been switched.


Question: "Aside from using open source libraries such as jQuery and Bootstrap, and short snippets of code which are clearly attributed to their original author, 100% of the code in my projects was written by me, or <del> along with another camper with whom I was pair programming in real time." </del> <ins> along with another person going through the freeCodeCamp curriculum with whom I was pair programming in real time." </ins> </p> <p key={5}> "I pledge that I did not plagiarize any of my freeCodeCamp.org work. I


Question: "Aside from using open source libraries such as jQuery and Bootstrap, and short snippets of code which are clearly attributed to their original author, 100% of the code in my projects was written by me, or <del> along with another camper with whom I was pair programming in real time." </del> <ins> along with another person going through the freeCodeCamp curriculum with whom I was pair programming in real time." </ins> </p> <p key={5}> "I pledge that I did not plagiarize any of my freeCodeCamp.org work. I


Question: ], "MDNlinks": [ "Comparison Operators", <del> "String.slice()", </del> <ins> "Array.slice()", </ins> "Array.filter()", "Array.indexOf()", <del> "String.concat()" </del> <ins> "Array.concat()" </ins> ], "type": "bonfire", "challengeType": 5,

Challenge has an issue. It seems that it's more appropritae to show helpful links to: () () instead of: () () Am I right?


Question: The `<header>` tag is a container which is used for navigational links or introductory content. It may typically include heading elements, such as `<h1>`, `<h2>`, but may also include other elements such as a search form, logo, author information etc. <del> <h1> corresponds to the most important heading. As we move to other tags like <h2>, <h3>, etc the degree of importance decreases. </del> <ins> `<h1>` corresponds to the most important heading. As we move to other tags like `<h2>`, `<h3>`, etc the degree of importance decreases. </ins> Although not required, the `<header>` tag is intended to contain the surrounding sections heading. It may also be used more than once in an HTML document. It is important to note that the `<header>` tag does not introduce a new section, but is simply the head of a section. Here's an example using the `<header>` tag:

<!-- 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 formatting of the header-tag page in the guide is wrong. I checked the codebase and there are missing back-ticks for some of the html tags in the markdown page. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: Version 70.0.3538.102 (Official Build) (64-bit) Operating System: MacOS 10.14.1 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !


Question:
"
Hello Paragraph
" ], "tests": [  "assert.isTrue((/Kitty(s)+ipsum(s)+dolor/gi).test($("p").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');"   "assert.isTrue((/Kitty(s)+ipsum/gi).test($("p").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');"  ], "challengeType": 0, "nameEs": "Llena espacios con texto de relleno",

Challenge has an issue. User Agent is: <codeMozilla/5.0 (X11; Linux x8664) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. My code: I was asked to use "the first few words of this kitty ipsum text". I copied the first two words, but it failed validation. I tried copying the first three words instead, and that worked. Google defines 'a few' as "a small number of". synonyms: a small number, a handful, one or two, a couple, two or three_. Edit: it appears that copying 3 or more words works, but copying just 2 of them doesn't.
This isn't bike-shedding. It is rejecting valid solutions very early on in the first lesson, when it is important not to discourage people. Are reports like this not wanted?
Just discovered this. Yeah, "first few" should be "first three". Why have the ambiguity?
Having worked through most of the rest of the programming exercises I wonder if the aim is to get programmers used to working from low-quality specifications. Even if that is the case, I think having a poorly specified problem this early on runs too high a risk of putting people off forever.
That's certainly an interesting idea. I could imagine some sort of course where you must sort through (intentionally) ambiguous and unintelligible requirements to potentially satisfy an irate product manager or customer with unrealistic deadlines. Call it "Worse-case scenario" training :D
Call it: Situation Normal training.
Yes. FreeCodeCamp(now with Situation Normal Training)


Question: const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, <del> body: `username=fcc_test_${Date.now()}`.substingr(0, 29) </del> <ins> body: `username=fcc_test_${Date.now()}`.substring(0, 29) </ins> }); if (res.ok) { const { _id, username } = await res.json();

I have pass all test case of "Exercise Tracker" challenge except the 7th test case("you can POST to /api/users/:id/exercises with ..."), I tried many way but still can't pass this test case. When i open the console of Chorm, i found the bug "(...).subtingr is not a function" when i click on the button "I've completed this challenge" to submit the `` the console of brower the link into Solution Link on "I've completed this challenge" error This error should be disappear ! Device: [Laptop] OS: [Windows 11] Browser: [Chrome] Version: [106.0.5249.103] No response
~Please provide the link to the project that you submitted~ EDIT: still half asleep sorry, ignore that
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Line contains the typo, should be . 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.
Hello, I am interested in working on it
hey there, I suggest reading our contributing guidelines! as it says, all issues with and labels are up for grabs
I have fixed this issue and raised a PR.


Question:
"In the game of golf each hole has a par meaning the average number of strokes a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below par your strokes are, there is a different nickname.", "Your function will be passed par and strokes arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest):", "

Strokes	Return

1	"Hole-in-one!"

<= par - 2	"Eagle"

par - 1	"Birdie"

par	"Par"

par + 1	"Bogey"

par + 2	"Double Bogey"

>= par + 3	"Go Home!"

",  "par and strokes will always be numeric and positive."   "par and strokes will always be numeric and positive. We have added an array of all the names for your convenience."  ], "releasedOn": "January 1, 2016", "challengeSeed": [  "var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];",  "function golfScore(par, strokes) {", "  // Only change code below this line", "  ",

According to Google Analytics, the is way too hard, and is taking campers an average of 6 minutes and 35 seconds to finish (if they finish - a lot of them seem to give up). According to this table, campers spend more time on it than they do on the algorithm challenges. ! We need to either reword this or simplify the challenge so it can be completed in closer to 3 minutes. Otherwise, we should move it back to the algorithm section.
This challenge does have a large amount of constant strings which could cause users to take a longer time than a typical challenge. Maybe we could provide an array of the responses in the seed code. Make the seed code: This could help in two ways. The first is the users can save time by not having to type out each response. The second is this approach could minimize errors from typos in the response phrases (i.e. Hole-in-one! vs. Hole in one!). We could remove the number of different responses. Maybe remove Eagle and Double Bogey.
yes - that is a great suggestion. I think leaving all the names is fine but we should pre-populate the array with the names. Since this was your suggestion, would you be interested in tackling this and submitting a PR?
Yes, I would like to tackle this and submit a PR.
The Golf Code challenge did take me longer that the other challenges. I did not initially realize that golfScore() had BOTH strokes and par as parameters. With the other IF ELSE challenges we were only dealing with one argument to pass into the IF ELSE condition. I found myself in that "flow" and completely overlooked that two parameters were available to work with in the IF ELSE condition. I also found myself looking at the Strokes/Par table thinking, "How will IF( <= par-2) work?" After a little head scratching, I realized the values under the Strokes column were what you were supposed to compare Strokes to (i.e. IF (strokes <= par-2)). Hopefully, this feedback is helpful. I think the confusion is coming from the wording of the challenge and suddenly going from using one passed in parameter to two in your IF ELSE condition.
Awesome. has a PR open already. Could you take a look at that first and let me know what you think of his proposed changes?


Question:
"In the game of golf each hole has a par meaning the average number of strokes a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below par your strokes are, there is a different nickname.", "Your function will be passed par and strokes arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest):", "

Strokes	Return

1	"Hole-in-one!"

<= par - 2	"Eagle"

par - 1	"Birdie"

par	"Par"

par + 1	"Bogey"

par + 2	"Double Bogey"

>= par + 3	"Go Home!"

",  "par and strokes will always be numeric and positive."   "par and strokes will always be numeric and positive. We have added an array of all the names for your convenience."  ], "releasedOn": "January 1, 2016", "challengeSeed": [  "var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];",  "function golfScore(par, strokes) {", "  // Only change code below this line", "  ",

I agree with MiloATH's proposed changes. Would definitely reduce the potential for typos when working the problem. As a side note, feel free to let me know if I am breaking any GitHub etiquette at any point. Zero experience providing input on collaborative projects. Looking for to learning and have really enjoyed FreeCodeCamp thus far. You guys and gals are doing awesome work. :)
Sure - we will let you know in a polite way if you break GitHub etiquette. Thanks for being receptive to feedback :)


Question: --fcc-editable-region-- function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> } --fcc-editable-region--

No need to use here since the array is not re-assigned in later steps. We used for other arrays in this project that aren't reassigned. No response All No response
Hello, I fixed this by doing the following: 1) went to 2) found the ID of step-162 () 3) went to the repositories code and searched for the markdown file through ID. 4) the markdown file 5) Updated the markdown file to use 'const' instead of 'let' ! After this commit is approved, this should be able to be closed.
All of the seed code for subsequent challenges would also be changed.
I am not sure what you mean by this. Is there anything I can do to learn this? Are you referring to all references of 'let' initialization to be changed to 'const' in future steps?
Not quite - the answer to this step becomes part of the starting code for all future steps. If we change the instructions to use here, then then starting code on all future steps needs to be swapped to reflect that.
Hi, I raised a PR to fix this


Question: - text: Clicking the decrement button should decrement the count by 1. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, ''Clicking the decrement button should decrement the count by 1.''); }; ' - text: Clicking the reset button should reset the count to 0.  testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, ''Clicking the reset button should reset the count to 0.''); }; '   testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 3 && thirdValue === 2 && fourthValue === 0, ''Clicking the reset button should reset the count to 0.''); }; '  ```

I found a subtle bug while doing the “React: Write a Simple Counter” challenge. If you look at the code below you’ll see that I binded this in to the this .decrement method. It should be: The consequence of this error is that clicking the reset button which calls does not reset the counter and decrements it instead. However, when I run the tests, all the tests are passed and the error is not detected! I think we need to add an additional test for that specific scenario. Browser Name: Chrome Browser Version: 67 Operating System: Mac OS X
I run to this same error just now. Accidentally, I entered which is wrong but it passed the test.
I think we need to check this with a RegEx. What are your opinions and ?
Is there any update on this issue? I could work on this bug.
As of yet, we have not come to a conclusion about what to do on this issue. Although, since this is a confirmed issue, please suggest how you'd like to go ahead with this over here
In terms of the buggy code provided in this issue, I think only the last test case is wrong. Left part is the original version. Right part is the new version I made. ! I checked if my changes work on local host. After I made the change, we can see that the last test fails when I provide the wrong solution codes. ! And the last test passes when I provide the correct solution codes. !
This looks pretty good to me. I see you've made a PR, that's great, we'll QA that soon