Question:
Since newItem, which references an array should be to the original array (per the instructions), I expected to pass the test. Instead it says "nonMutatingPush([1, 2, 3], [4, 5]) should return [1, 2, 3, 4, 5].", which would be concatenating the two arrays, but it isn't a non mutating alternative to as the instructions suggest. <img width="1437" alt="fcc-challenge" src="https://user-"<!-- Please complete the following information. --- Device: [laptop] OS: [macOS] Browser: [chrome] <!-- Add any other context about the problem here. --
the function should return (newItem). You put the newItem in an array literal, due to which the test is failing.
I see what you are saying. Really, the challenge is asking you to replicate the effect of using push with the spread operator. I'm not sure what change to the wording would make this clearer. Do you have any suggestions?
it also fails without literal syntax, e.g.: I know that it will pass when I write but this is the problem, because the instructions say: would result in arr having the value . So i suppose a function named "nonMutatingPush" should have a similar effect as push namely creating a "two dimensional"-Array in this case, like in the example in the instructions, and not do something entirely different (ie. merging the content of the two arrays into a new array)
The challenge doesn't say anything about using a spread operator, instead it asks users to "Change the nonMutatingPush function so it uses concat to add newItem to the end of original instead of push". Pushing an array to an array would produce an array in an array. Since "The concat() method is used to merge two or more arrays" () to replicate the effect of push one needs to put the array about to be "pushed" into a new array, so the outer array gets merged and the inner array stays intact. My suggestion would be, if replicating the push behaviour isn't the case, but merging the two given arrays, the instructions should ask users to "Change the nonMutatingPush function so it uses concat to merge newItem with original, without altering and "
Yeah makes sense to me. And since merging two arrays is taught in the previous lesson, I think the goal of this lesson is to replicate the behaviour of push using concat. In that case, my suggestion would be: "Change the nonMutatingPush function so it uses concat to replicate the behaviour of push without altering the first and second arrays".
I think we need to be careful. The intended behavior is better. We don't want the users to concat a reference to the second array.
! you need to assign (newItem) to a new variable and return it
As far as I can see the idea here is the user should create a function that behaves like , but it returns a new array instead of modifying the array it's called on. That function can be implemented as follows This replicates as closely as possible, so that if I in the same way as if I used push So, the main issue is that both the solution and the final test need updating. Also wording, should help guide users down the right path.
If we want users to learn a "non mutating push", I think its better that the solution not provide an avenue to mutate the original arrays. I think the current intended solution is fine but the wording describing it isn't quite accurate.
I think it would be better to compare:
IMHO, it is necessary either to change the expected solution or the wording of the task. For example: P.S.: It seems to me that it is better to change the expected solution (based on the previously described behavior of the push method)
I wouldn't change the expected behavior.. If we change the expected behavior, then this is no longer a non-mutating function. We should modify the description.
I agree with any of your solutions, but I did not understand - why would another solution cease to be a non-mutating function?
If you change the expected behavior, then if is an array, the output of this function can be used to mutate , as I explained above.
Thank you. I understand what you mean... - but then it looks like we are deliberately simplifying the task to meet the requirements. Maybe it's better to just replace the expected behavior with (for example)?
I don't see how this would be a simplification. The current solution works fine. Not changing the solution wouldn't make the task simpler - it would make it identical to what it is right now. We just need to describe the task more accurately.
We show that we can get this result with push: [1, 2, 3, [4, 5]], and then we ask to get [1, 2, 3, 4, 5] with concat?.. Well... - Ok. Thank you for your time.
Right.... You highlighted exactly the [wrong] description that I want replaced. Using push like that mutates one array and allows for the mutation of the other. The current solution to the challenge prevents mutation of both. The description should reflect that fact. Changing the solution to permit mutation of one of the arguments misses the idea of making a more functional solution to using push.
Can I work on this ?
Sure. We don't assign issues - we accept the first complete PR that addresses the issue. In ttis case, we are looking for someone to update the description of the challenge so that is clear that we want a non-mutating push.
I've read through the full thread and submitted a PR that I think should satisfy most, if not all, concerns with the description.

Functional programming is all about creating and using non-mutating functions. <del> The last challenge introduced the `concat` method as a way to combine arrays into a new one without mutating the original arrays. Compare `concat` to the `push` method. `push` adds an item to the end of the same array it is called on, which mutates that array. Here's an example: </del> <ins> The last challenge introduced the `concat` method as a way to merge arrays into a new array without mutating the original arrays. Compare `concat` to the `push` method. `push` adds items to the end of the same array it is called on, which mutates that array. Here's an example: </ins> ```js const arr = [1, 2, 3]; <del> arr.push([4, 5, 6]); </del> <ins> arr.push(4, 5, 6); </ins> ``` <del> `arr` would have a modified value of `[1, 2, 3, [4, 5, 6]]`, which is not the functional programming way. </del> <ins> `arr` would have a modified value of `[1, 2, 3, 4, 5, 6]`, which is not the functional programming way. </ins> <del> `concat` offers a way to add new items to the end of an array without any mutating side effects. </del> <ins> `concat` offers a way to merge new items to the end of an array without any mutating side effects. </ins> # --instructions-- <del> Change the `nonMutatingPush` function so it uses `concat` to add `newItem` to the end of `original` instead of `push`. The function should return an array. </del> <ins> Change the `nonMutatingPush` function so it uses `concat` to merge `newItem` to the end of `original` without mutating `original` or `newItem` arrays. The function should return an array. </ins> # --hints--


Question:
We get so many forum posts all with the same issue with this challenge. People are accessing the environment variables outside the route handler, which doesn't work with the test. If we can somehow make it more clear where the variable should be accessed it would really help. Challenge:
I agree that this continues to be a problematic challenge, but how much clearer do you get than:
I don't actually think the sentence makes it that clear that the environment variable has to be evaluated inside the route handler. I would consider it unexpected behavior and it should be explained better. Or restructure the sentence somehow.
It's a bit of a clunky structure and I agree it could be worded better.

Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it. <del> Then, in the `/json` GET route handler you created in the last challenge, transform the response object's message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. </del> <ins> Then, in the `/json` GET route handler you created in the last challenge access `process.env.MESSAGE_STYLE` and transform the response object's `message` to uppercase if the variable equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. </ins> **Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in <dfn>SECRETS</dfn> tab to add the variable.


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --<!-- Add a link to the coding challenge with the problem. -- <!-- Copy and paste the code from the editor that you used in between the back-ticks below: --<!-- Add a clear and concise description of what you expected to happen. --This should be accepted as a correct answer, as it solves the challenge. <!-- Please complete the following information. --- Device: PC OS: Windows 10 Browser: Firefox Version: 97.0.1 <!-- Add any other context about the problem here. --The problem arises if the user tries to test their Redux store functionality After checking the source code of the challenge, the problem seems to be the method used to check if user initiated state correctly or not found in This is resulting in a false assert because the user has modified their state (with Tests) I don't know of a way to assert that the user initialized state other than the way mentioned above Maybe add a note that the user should remove their tests before checking their answer? Sorry if this was mentioned before, but I didn't find it so decided to open the issue.
Rather than adding note, more convenient might be creating new store during the test, off the , and checking initial state of that one.
I agree with gikf's suggestion here. We could create an section under and declare a which we could pass to the tests.

The Redux store should initialize with a `state` of 0. ```js <del> assert(store.getState() === 0); </del> <ins> assert(_store.getState() === 0); </ins> ``` Dispatching `incAction` on the Redux store should increment the `state` by 1.

```js assert( (function () { <del> const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); </del> <ins> const initialState = _store.getState(); _store.dispatch(incAction()); const incState = _store.getState(); </ins> return initialState + 1 === incState; })() );

```js assert( (function () { <del> const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); </del> <ins> const initialState = _store.getState(); _store.dispatch(decAction()); const decState = _store.getState(); </ins> return initialState - 1 === decState; })() );

const store = null; // Define the Redux store here, passing in your reducers ``` <ins> ## --after-user-code-- ```js const _store = Redux.createStore(counterReducer) ``` </ins> # --solutions-- ```js


Question:
The test requires that the value is of type Number. But you have to look at the example response given and realize it is a number and not a string. We do pretty often get forum posts about this so maybe this needs to be made more clear? Challenge:
I feel like observing the behaviour of the demo API and figuring out how your own API differs from the spec is an important part of the project, where giving too much information up-front might not be desirable because then people can complete it on autopilot instead of having learning experiences. There is something to be said more generally though about the current difficulty in debugging why your code fails one of the project requirements, as unlike the Frontend Libraries Cert you can't see the actual output of any failed tests.
I completely agree but it would be nice if the test blocks were formatted a bit better. Like the response on its own line using a fenced code block with some highlighting. I know it would make it take up more space but I think that would be worth it. Just as an example: ! Although, I don't think providing the types in the specs is that unreasonable either.
BTW, the type is provided for the other response: I'm not suggesting we spoon-feed the students, just that we give them clear instructions.
Personally, "in milliseconds" suggests it should be a number to me. But that could be more due to my experience than anything else. I don't see a reason why this shouldn't be clarified, so I'm on board. Maybe just adding a note will work?
I would be fine with just a mention of the type in the message. Edit: maybe (as type Number) just to avoid any confusion?
Works for me! Will go ahead and open up for first timers. This looks like something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: 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 request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I created a full-stack JavaScript app that is functionally similar to this: https://timestamp- you can check it at github repo I also requested a pull. and how it works I uploaded a video , please accept my pull request and merge it https://user-
This is an issue about adding type information to one of the test output blocks. We do not merge people's projects. You submit the project on the challenge page and it gets tested.
ok but there's a problem that every time after refresh it changes its localhost port because of this it's hard to deploy it
Please use the if you need help with the curriculum.

}; ``` <del> A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds </del> <ins> A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds (as type Number) </ins> ```js (getUserInput) =>


Question:
The Project euler problem 250 has a format issue Confront with To fix this issue you will need to change this file so that the numbers are correctly formatted as exponents: (You can use the way ^ is written in the challenge as a guide to fix 1^1, 2^2, and 3^3) 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. An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. 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 have set up the project in my local machine and looking to contribute for open source is this still open can I work on it

# --description-- <del> Find the number of non-empty subsets of ${11, 22, 33, ldots, {250250}^{250250}}$, the sum of whose elements is divisible by 250. Enter the rightmost 16 digits as your answer. </del> <ins> Find the number of non-empty subsets of ${{1}^{1}, {2}^{2}, {3}^{3}, ldots, {250250}^{250250}}$, the sum of whose elements is divisible by 250. Enter the rightmost 16 digits as your answer. </ins> # --hints--


Question:
There should be a comma for "username: "fcc_test", otherwise the JavaScript Object syntax is wrong. <img width="775" alt="image" src="https://user-"- Device: MacBook Air M1 OS: macOS Monterey 12.0.1 Browser: Chrome Version: 98.0.4758.109
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.

```js { <del> username: "fcc_test" </del> <ins> username: "fcc_test", </ins> description: "test", duration: 60, date: "Mon Jan 01 1990",


Question: he Project euler problem 356 has a format issue Confront with To fix this issue you will need to change this file so that the beginning of the description is correctly formatted with a pedix: will need to be written as 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. An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. 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.

# --description-- <del> Let an be the largest real root of a polynomial $g(x) = x^3 - 2^n times x^2 + n$. </del> <ins> Let $a_n$ be the largest real root of a polynomial $g(x) = x^3 - 2^n times x^2 + n$. </ins> For example, $a_2 = 3.86619826ldots$


Question:
<!-- NOTE: If you want to become an author on freeCodeCamp, you can find everything here: --<!-- If you are reporting an issue with an article on our News publication, please follow this link to send an email to our editorial team --<!-- Add a link to the page with the problem. -- <!-- Describe the problem and how to reproduce it. --extra word -"time" word continuous appeared twice "time" should just only appeared once in the first sentence <!-- A clear and concise description of how you want to update it. --Now it's time to add other details to the markers <!-- If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box). --!
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here is the file that you should be looking at to work on a fix: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi As I am new to opensource, I would like to contribute to this issue.

# --description-- <del> Now it's time time to add other details to the markers, starting with the first one. </del> <ins> Now it's time to add other details to the markers, starting with the first one. </ins> In the first marker `div` element, change the class `one` to `red`.


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --<!-- Add a link to the coding challenge with the problem. --The test cases are missing a closing quote in what is displayed in the challenge and there is no way to tell if it's the same under the hood or not - probably not because the code won't even run the way it is shown in the challenge. The word "freeCodeCamp" in those examples has a " in front of it but not after it - causing the code to fail. What is the proper thing to do? Just fix it? - - Your browser information: User Agent is: <codeMozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/ Firefox/98.0</codeChallenge: Everything Be True Link to the challenge: <!-- Add a clear and concise description of what you expected to happen. --When the test cases are used to develop a solution to the challenge the code fails. Please add a closing quote to the last two test cases shown on the challenge page so that they may be used directly in our efforts to develop a solution to the challenge. <!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. --! <!-- Please complete the following information. --- Device: [e.g. iPhone6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.4] Browser: [e.g. chrome, safari] Version: [e.g. 22] <!-- Add any other context about the problem here. --
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi , I'm new to open source and would love to contribute to this
:+1:, no need to ask for permission. Issues labelled with or are open for contributions. My previous comment includes couple of links that should help with getting started and if you'd get stuck.
Hey It seems you have opened a pr on your own version of the repository. Do you mind opening it here instead? Have a nice day and happy coding
Hi I'm so sorry, hope I did it right this time!
Closed with

"users"), true); ``` <del> `truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "data")` should return `true`. </del> <ins> `truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "data")` should return `true`. </ins> ```js assert.strictEqual(truthCheck(

"data"), true); ``` <del> `truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "id")` should return `false`. </del> <ins> `truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "id")` should return `false`. </ins> ```js assert.strictEqual(truthCheck(


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

import React, { useContext } from 'react'; import { FormContext } from '../form-group/form-group'; <del> import { FormControlFeedback as Feedback } from './form-control-feedback'; import { FormControlStatic as Static } from './form-control-static'; </del> <ins> import { FormControlFeedback } from './form-control-feedback'; import { FormControlStatic } from './form-control-static'; </ins> import { FormControlProps } from './types'; // Uses controlId from <FormGroup> if not explicitly specified. // type Only relevant if componentClass is 'input'. <ins> let variantClass: string; const defaultClasses = 'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' + 'bg-background-primary bg-none rounded-none border-1 border-solid ' + 'border-background-quaternary shadow-none ' + 'transition ease-in-out duration-150 focus:border-foreground-tertiary'; </ins> const FormControl = ({ id,

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

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

readonly?: never; } | { <del> value: string; </del> <ins> value?: string; </ins> onChange?: never; readonly: boolean; } | { <del> value: string; </del> <ins> value?: string; </ins> onChange: (event: React.ChangeEvent<FormControlElement>) => void; readonly?: never; }; export type FormControlProps = React.HTMLAttributes<FormControlElement> & { <del> id?: string; className?: string; </del> testId?: string; componentClass?: 'textarea' | 'input'; <del> placeholder?: string; </del> name?: string; required?: boolean; rows?: number; type?: 'text' | 'email' | 'url'; } & ChangibleValues; <del> export interface FormControlVariationProps { className?: string; children?: React.ReactNode; id?: string; testId?: string; } </del> <ins> export type FormControlVariationProps = Pick< FormControlProps, 'className' | 'children' | 'id' | 'testId' >; </ins>


Question:
Sometimes when testing the Scientific Computing with Python projects the unittest response is "The diff is x character long. Set maxDiff to None to view it" (or something similar) I propose we set that maxDiff to none in the tests in advance
To expand on this, the boilerplate projects can be found in the following 5 repositories: (see below for this one) Each of these has a file which contains the tests. From what I can tell, adding between these two lines would resolve this. The arithmetic formatter uses a different testing package - do we know if this one is having the same error?
Hi. I would like to work on this. But I wasn't able to find instructions on setting up the code?
Arithmetic formatter can have part of the output truncated. Using in will always give full output.
I vote to do that change to Arithmetic Formatter then
did you do all the projects? or there is something missing?
only left is Arithmetic Formatter
Ok, let's see if I can do it
For the Arithmetic Formatter, the tests say
I seems I am not managing to figure out how to make the change to pytest in the file, I probalby need to delve deeper in the pytest documentation
Changing to in the file should do that.
yes, it does! and now it says lots more I don't know if maybe now there is too much?
It can be a bit overwhelming for somebody not used to it, but that can be said about version without as well.

h4.negative-10.text-nowrap Community Builder img.profile-image(src='https://s3.amazonaws.com/freecodecamp/branden-byers.jpg' alt="Branden Byers picture") h4.text-nowrap Madison, Wisconsin <del> p.negative-10 "I'm a massage therapist and Stay-at-home-dad. I learned Hypercard, then Rails, but now I feel at home with JavaScript." </del> <ins> p.negative-10 "Cookbook author and stay-at-home-dad. Started coding as a kid, got distracted, but now I'm back in full JavaScript force!" </ins> .col-xs-12.col-sm-4.col-md-3.team-member h3.negative-10.text-nowrap Michael Johnson h4.negative-10.text-nowrap Nonprofit Coordinator

h4.negative-10.text-nowrap Live Content Manager img.profile-image(src='https://s3.amazonaws.com/freecodecamp/jason-rueckert.jpg' alt="Jason Rueckert's picture") h4.text-nowrap Seattle, Washington <del> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </del>  No newline at end of file <ins> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </ins>


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. -- In the instructions, is an invalid css property. It should be . Alternatively, we could remove the code quotes and replace it with bottom margin. ! <!-- Please complete the following information. --- Device: Laptop OS: Windows 10 Browser: firefox Version: 98.0.1 (64-bit) <!-- Add any other context about the problem here. --
Thank you, for taking the time to open this. For simplicity, let us go with "". I have opened this up to first-timers only. An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
I would like to contribute Apologies for the redundant question here

# --description-- <del> Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. </del> <ins> Changing the `margin-bottom` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. </ins> Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.


Question:
In the Responsive Web Design challenge there are these sentences As I don't think these colors are keywords, I propose to remove the backticks for translation purposes
Bit of a weird one, tbh. Those all are html color codes, but they're really just being used as names for colors. Anyways, it seems reasonable to stop using them as keywords, honestly.
I mean in this specific use case, considering also the table in the description with the hsl codes does not have the colors in backticks. And ok there are the name of the classes, but better needing to do something like " (ciano)" than keeping the colors untranslatable everywhere else imo
Sure, I agree that they shouldn't be keywords. I was just speculating as to why they're currently keywords.

# --hints-- <del> Your code should use the `hsl()` function to declare the color `green`. </del> <ins> Your code should use the `hsl()` function to declare the color green. </ins> ```js assert(code.match(/.greens*?{s*?background-colors*:s*?hsl/gi)); ``` <del> Your code should use the `hsl()` function to declare the color `cyan`. </del> <ins> Your code should use the `hsl()` function to declare the color cyan. </ins> ```js assert(code.match(/.cyans*?{s*?background-colors*:s*?hsl/gi)); ``` <del> Your code should use the `hsl()` function to declare the color `blue`. </del> <ins> Your code should use the `hsl()` function to declare the color blue. </ins> ```js assert(code.match(/.blues*?{s*?background-colors*:s*?hsl/gi));


Question:
The test regexes don't allow for spaces before the parentheses, which is unnecessarily strict. Same as:
What do you mean by "unnecessarily strict"?
Compare the two code examples — only one passes, while both should. The interpreters don't care about spacing, so neither should these exercises. You can look at how was handled if you want to give it a go.
I'm not wild about relaxing the tests to support irregular/unusual formatting. It's uncommon to stick spaces between the function/method nane and the ()s for the argument list in JS.
People do it, otherwise we wouldn't be careful about it in most tests. I guess my student keeps doing it because it's the norm in natural languages. FCC doesn't teach or enforce style and I'm sure you know code formatting is a major source of bikeshedding anyway. Silly details like this shouldn't get in the way of learning.
If you call a method with a space between the name and parentheses then that method would not work. Why promote bad syntax when learning?
Some people do it but it is really uncommon. Making the code readable to other people is part of getting hired. This just isn't a thing that you see in production code. JS has a bunch of these little things that are technically possible but never used. There is a huge difference between bikeshedding on indentation or semicolons and going out of our way to support baffling, non-standard syntax that nobody uses in professional code. We're made notes about this sort of thing in the past so learners don't get in the habit of writing technically correct but bizzaro code: And all of our examples of using functions follow the basic convention in JS of not jamming extra spaces in there, from the beginning: I don't see why we'd be obligated to support every single non-standard thing that a learner can imagine.
I see here that we seem to be moving towards intentionally supporting users writing confusing syntax. In light of this, we should remove the note here I personally think this is the wrong call, but we should be consistent.
That's demonstrably false. Well, we've already been doing this spacing leniency for ages, so it's not like I'm proposing some novelty. Or anything absurd (your strawman of "every single non-standard thing"). I count uses in between 400-500 of our test asserts, so they're pretty much everywhere. If we wanted to enforce style, we would have tests for that, not letting unrelated tests fail and be opaque at it. It just breaks the learning flow, so I can completely understand why we do it as we do. Forceful automatic code reformatting would also be silly.
We have 400-500 asserts designed to allow spacing inbetween the function name and ()s? Odd.
The spacing leniency is not limited to that one case, of course ...
I agree with but the people who type should get more descriptive fallback error instead because in console it logs and , when the code above is used. maybe changing this to
i think we should run that wrong syntax but at the same time give warning about the syntax begin wrong and also the correct syntax.
Neither syntax is incorrect, one is just less common. There is already wide support for being lax in tests like these. Most recently the discussion was in the previously linked , where the core team weighed in as well. So the main thing that should be done in this bug is just to fix the tests. Other bugs should have their own issues.

Your code should use `typeof` in two `console.log()` statements to check the type of the variables. ```js <del> assert(code.match(/console.log(typeof[( ].*)?)/g).length == 2); </del> <ins> assert(code.match(/console.logs*(typeof[( ].*)?)/g).length == 2); </ins> ``` Your code should use `typeof` to check the type of the variable `seven`.


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

max-width: 600px; } <ins> .challenge-description-header { display: flex; } </ins> .description-container h1 { color: var(--secondary-color); font-family: Roboto Mono, monospace;

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

isResettingSelector, stopResetting, isProjectPreviewModalOpenSelector, <del> openModal </del> <ins> openModal, isChallengeCompletedSelector </ins> } from '../redux'; <ins> import GreenPass from '../../../assets/icons/green-pass'; </ins> import LowerJaw from './lower-jaw'; import './editor.css';

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

isSignedInSelector, userSelector, challengeTestsSelector, <ins> isChallengeCompletedSelector, </ins> ( canFocus: boolean, { challengeType }: { challengeType: number },

isResetting: boolean, isSignedIn: boolean, { theme = Themes.Default }: { theme: Themes }, <del> tests: [{ text: string; testString: string }] </del> <ins> tests: [{ text: string; testString: string }], isChallengeCompleted: boolean </ins> ) => ({ canFocus: open ? false : canFocus, challengeType,

isSignedIn, output, theme, <del> tests </del> <ins> tests, isChallengeCompleted </ins> }) );

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


"intro": [ "Node.js is a JavaScript runtime that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules — small, independent programs — that help with this. Some of the core modules include HTTP, which acts like a server, and File System, a module to read and modify files.", "In the last set of courses you learned to install and manage packages from npm, which are collections of smaller modules. These packages can help you build larger, more complex applications.",  "Express is a lightweight web application framework, and is one of the most popular packages on npm. Express makes it much easier to create a server and handle routing for your application, which handles things like direct people to the correct page when they visit a certain endpoint like
/blog
.",   "Express is a lightweight web application framework, and is one of the most popular packages on npm. Express makes it much easier to create a server and handle routing for your application, which handles things like directing people to the correct page when they visit a certain endpoint like
/blog
.",  "In this course, you'll learn the basics of Node and Express including how to create a server, serve different files, and handle different requests from the browser." ] },


Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. <del> Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback. </del> <ins> Change the font for both the `h1` and `h2` elements to `Verdana`, and use another web-safe font in the sans-serif family as a fallback. </ins> Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements to make the sections distinct.


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


Question: <!-- Add a link to the coding challenge with the problem. --freeCodeCamp Page: GitHub Source: At the beginning of the description for Step 42, the text reads "Even through ..." when it should read "Even though ..." ! Device: Desktop OS: Windows 10 Browser: Chrome Version: 100.0.4896.88

# --description-- <del> Even through you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are <dfn>inline elements</dfn>, which don't appear on new lines. </del> <ins> Even though you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are <dfn>inline elements</dfn>, which don't appear on new lines. </ins> You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to make it clearer. Go ahead and do this to specify this button should submit the form.


Question:
in the challenge talks about Installing Sqlite. Should we add a link to sqlite download link, here is the file Edit: I would love to add to the next challenge as well Edit: because of first time label, I won't make pr, if you wanna tackle this. please do
I would be fine adding these. We could link right to the download page on each of those sites: &

dashedName: relational-databases-and-sqlite --- <ins> # --description-- [Download SQLite](https://www.sqlite.org/download.html) [Download DB Browser for SQLite](https://sqlitebrowser.org/dl/) [SQLite usage](https://www.sqlite.org/famous.html) </ins> # --question-- ## --text--


Question:
In step 53 of the Building a Cafe Menu project: Adding by mistake three p elements inside a single article element (instead of three different article elements), I received an unhelpful hint message. Code: Hint: I think that the hint should say something like: You should add three new article elements.
I don't think this hint is necessary wrong or needs to change - there's a test that makes sure there's no spaces between the elements. It fails and gives that message. It just gives the message for the first test that fails. The idea then would be to use the hint to try and solve the step. If you remove the spaces, as the hint suggests, you will pass the step. Although, because I did not add the three new elements, it should not have passed. I think we should just add another hint and test, probably near the top of the tests - maybe the first test, that checks that three new article elements were and we can use the suggestion as the hint. Then, that would be the first test to fail, and you would get the hint about the number of article elements.
<section<h2Desserts</h2<article class="item"<p class="dessert"Donut</p<p class="price"1.50</p<p class="dessert"Cherry Pie</p<p class="price"2.75</p<p class="dessert"Cheesecake</p<p class="price"3.00</p<p class="dessert"Cinnamon Roll</p<p class="price"2.50</p</article</section

# --hints-- <ins> You should have four `article` elements in your second `section`. ```js const secondSection = document.querySelectorAll('section')[1] const articles = secondSection.querySelectorAll('article') assert(articles.length === 4) ``` </ins> You should have four `.dessert` elements. ```js


Question:
The modal for viewing code solutions on the timeline page is more narrow than all the other modals. to view -code for one of the new RWD cert projects narrow modal modal -click view -project wider modal to the same two modals, they're both the wide version All of them to be the wide version
It's simple. Because the "modal-lg" class is not present in the code along with "modal-dialog" class. Can I add this here and take the issue please?
Go for it
Hi Tom, Its my first open source contribution. I have made the change in my local copy and it is working. I have it in my forked repo here - Can you please help me out and guide me on who approves the change?
Hey Here's page from contributing guidelines covering basics of opening pull request - Join us in or if you need help contributing, our moderators will guide you through this. Happy contributing.
hey , I have sent a pull request regarding the issue Thanks for the help

bsSize='large' onHide={handleSolutionModalHide} show={isOpen} <ins> size='lg' </ins> > <Modal.Header closeButton={true}> <Modal.Title id='solution-viewer-modal-title'>


Question: The anchors or whatever for the new RWD cert projects aren't working. to are taken to the block within that page to are not taken to the block within that page To be taken to the block within that page. Side effect: Clicking the breadcrumbs for these projects also doesn't take you to that part of the page Also, you can notice the URL change as you scroll down the page - the block/anchor thing gets at the end of the URL when you scroll to one. It does not get when you scroll to one of the cert projects on this page.

); const GridProjectBlock = (
 <Link className='block-header' onClick={() => { this.handleBlockClick(); }} to={challengesWithCompleted[0].fields.slug} >
 {t('misc.certification-project')} {!isAuditedCert(curriculumLocale, superBlock) && ( <Link className='cert-tag' to={t('links:help-translate-link-url')} > {t('misc.translation-pending')} </Link> )}

 {this.renderCheckMark(isBlockCompleted)}
{blockTitle}

 {this.renderBlockIntros(blockIntroArr)} </Link>
   <ScrollableAnchor id={blockDashedName}>
 <Link className='block-header' onClick={() => { this.handleBlockClick(); }} to={challengesWithCompleted[0].fields.slug} >
  {t('misc.certification-project')}  {!isAuditedCert(curriculumLocale, superBlock) && ( <Link className='cert-tag' to={t('links:help-translate-link-url')} > {t('misc.translation-pending')} </Link> )}

 {this.renderCheckMark(isBlockCompleted)}
{blockTitle}

 {this.renderBlockIntros(blockIntroArr)} </Link>
 </ScrollableAnchor>  ); const blockrenderer = () => {


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

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

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

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

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

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


Question:
On the settings page, you can change your username. Any time you stop typing, it reads from the database to see if the username is available - we could change it so that it only makes a query when the user is ready. So instead of when they stop typing, we just let them choose the name they want, then when they click save we check if it's available. Not sure how big of a deal this is, I'm guessing users don't change their username often. Every little bit helps?
I've always wondered about this one. Definitely agree that we shouldn't hit the DB until the camper tries to submit.
I think we can go with the current implementation but wait for a meaningful pause to make sure the user is intending to submit the new username for validity check.

import { omit } from 'lodash-es'; import { call, <del> delay, </del> put, select, takeLatest, <del> takeEvery </del> <ins> takeEvery, debounce </ins> } from 'redux-saga/effects'; import { createFlashMessage } from '../../components/Flash/redux';

function* validateUsernameSaga({ payload }) { try { <del> yield delay(500); </del> const { exists } = yield call(getUsernameExists, payload); yield put(validateUsernameComplete(exists)); } catch (e) {

takeEvery(types.updateUserFlag, updateUserFlagSaga), takeLatest(types.submitNewAbout, submitNewAboutSaga), takeLatest(types.submitNewUsername, submitNewUsernameSaga), <del> takeLatest(types.validateUsername, validateUsernameSaga), </del> <ins> debounce(2000, types.validateUsername, validateUsernameSaga), </ins> takeLatest(types.submitProfileUI, submitProfileUISaga), takeEvery(types.verifyCert, verifyCertificationSaga) ];


Question:
The test is failing if the user does not use all lowercase letters for the domain name in the attribute. Since domain names are not case sensitive this seems a little too strict, especially since the link text itself is not using all lowercase. A user in the forums failed this challenge because they capitalized the C's in . I'm assuming they were influenced by the capitalization in the link text. This URL should pass the challenge since domain names are not case sensitive. No response N/A This seems like a good issue for a first timer.
here is a , I wonder, if parentheses should be deleted in this file as mentioned in issue .

```js const nestedAnchor = $('footer > p > a')[0]; <del> assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); </del> <ins> assert(nestedAnchor.getAttribute('href').toLowerCase() === 'https://www.freecodecamp.org'); </ins> ``` The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo.


Question:
In step 12 of the Learn HTML by Building a Cat Photo App, the following two line numbers 7 & 8 exist at the start of the step: The instructions tell the user to make the text that appears inside the sentence of the element a link. The instructions do not explicitly state to remove the existing anchor element that is below the element. Instead, it just has a last sentence that says . Step 13 starts off only showing the following for line 7: The original link that appeared in step 12 is gone. In my opinion, an easy solution is to just change the last sentence in step 12 to: OR n/a n/a No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
I think this instruction above is enough to tell what the end result should be
But it doesn't appear to be as this particular step comes up a lot in the forums. I agree with we need to make this a little clearer. If the intent is for the user to remove the existing link below the then I think we should tell them exactly that. Here's my attempt at making the instructions clearer: the words in the element into a link using the same value for the attribute as the link below the element. the link below the element. I thought turning this into two steps might make it a little clearer, but it can easily be two sentences instead. I'm not sure what the purpose of this step is, so my instructions may be unwittingly stepping on the goal here.
I think a better word is than in but that's nitpicking. I do fully agree changing the hint. Edit:
We're also teaching vocabulary here. I would use slightly more consistent language with the previous steps:

# --description-- <del> Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. </del> <ins> Turn the words `cat photos` located inside `p` element into a link using the same value for the `href` attribute as the link below the `p` element. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. Make sure to remove the `a` element with the text `cat photos` on the line below the `p` element. </ins> # --hints--


Question:
I saw this on the forum, and checked for myself because I was already where they were, so I figured I would just send in an issue about it. On step 9 of the Building A Quiz section () it goes over ratio, however it shows the standard formatting for ratios (35:4) and wraps it in the same formatting that is typically used when the thing should be typed in or pasted exactly the same. This is an issue because if you type it in as you would having gone through the rest of the course to this point, you get an error that you have no solution to (and are forced to go off-site to figure out why it's not working) ! The hint simply says "You should use this aspect-ratio property" which i clearly am, leading to confusion and frustration because there's no indication of what's wrong because of how the original aspect ratio was labelled. I either expected 35:4 to work, or for either the error or the step to let me know the correct formatting is "35/4" No response Device: Desktop OS: EndevourOS Browser: Firefox Version: 100.0.2 No response
Hey thank you for reporting the issue! I agree that the challenge should be improved. I'd suggest that we: Remove code highlighting for "35:4" to prevent confusion Update the "Then, use the property to set the desired aspect ratio." sentence to "Then, use the property to set the desired aspect ratio to ." Update the hint text to be more explicit in the expected ratio value
Honestly that sounds perfect to me! Main issues are just using the code fomatting in a way they have never been used before, and the hint being absolutely no help in figuring out why the issue is happening EDIT: Well I made the changes because of the help wanted but i can't actually push changes which i guess makes sense haha also if we update "Then, use the 'aspect-ratio' property to set the desired aspect ratio." to "Then, use the property to set the desired aspect ratio to " we honestly probably don't even need to update the hint text, because everything is put forward instead of behind a fail. Plus looking through the file, there's already a fail case that says "You should give the an of ." but it looks like it only triggers when the person uses aspect-ratio correctly, but with the wrong numbers
Side note: How come we have an external link in this challenge? I thought we didn't want those.
Wait where? I don't remember there being one at all
I'm talking about the link to the style guide. I just mean external as in it takes you away from the challenge, not external as in off-site.
Oh! Good point I'm not sure haha Sent from Mailspring (), the best free email app for work
I just thought links were seen as distractions, no matter where they take you. But I guess if the point of the challenge is to follow a style guide it kind of has to be posted. Probably just out of the loop on this one.
Hello all... forgive me if I make any mistake here as it's my first time using Git ... I need help with the topic above, please. I have noticed that the question has been adjusted by FreeCodeCamp but I am getting the same error message with my CSS code below. I don't understand where the error is, what am I doing wrong? #logo { width: max(100px, 18vw); background-color: ; aspect-ratio: 35 / 4; padding: 0.4rem; } Thanks Crissy
please use the forum for asking for help, the Ask for help buttn is there just for this

# --description-- <del> As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text. </del> <ins> As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35 / 4`, and have padding around the text. </ins> <del> First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around. </del> <ins> First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio to `35 / 4`. Finally, add a `padding` of `0.4rem` all around. </ins> # --hints--


Question: The value for is case-insensitive. Not sure if I missed any, but here are case-sensitive ones I found. Case sensitive curriculumchallengesenglish14-responsive-web-design-22learn-accessibility-by-building-a-quiz Case sensitive curriculumchallengesenglish14-responsive-web-design-22learn-css-animation-by-building-a-ferris-wheel Case sensitive curriculumchallengesenglish14-responsive-web-design-22learn-intermediate-css-by-building-a-picasso-painting Case sensitive curriculumchallengesenglish14-responsive-web-design-22learn-responsive-web-design-by-building-a-piano Case sensitive curriculumchallengesenglish14-responsive-web-design-22learn-the-css-box-model-by-building-a-rothko-painting a lot Both are valid The value for should be case insensitive for all challenges. 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]

You should give the `meta` tag a `charset` of `UTF-8`. ```js <del> assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8'); </del> <ins> assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); </ins> ``` # --seed--

Your `meta` element should have a `charset` attribute with the value `UTF-8`. ```js <del> assert.match(code, /<meta[sS]+?charset=('|"|`)UTF-81/) </del> <ins> assert.match(code, /<meta[sS]+?charset=('|"|`)UTF-81/i) </ins> ``` Your code should have a `title` element.

Your `charset` attribute should be set to `utf-8`. ```js <del> assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); </del> <ins> assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); </ins> ``` You should add exactly one `title` element.

```js const meta = [...document.querySelectorAll('meta')]; <del> const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8'); </del> <ins> const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); </ins> assert.exists(target); ```

The `meta` tag should set the `charset` to `UTF-8`. ```js <del> assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); </del> <ins> assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8'); </ins> ``` Your code should have a `title` element.


Question:
While I was replying to a forum question, I realised that step 65 of the Cafe Menu section accepts an incorrect answer. The challenge is to nest an anchor element inside a element, like this: But the student had nested the p element inside the anchor element, like this: The tests accept that (incorrect) answer - but only if the closing tag is malformed ( instead of ). It's a weirdly specific case, I know, but is there any way to have the tests pick this up? Ideally, the tests would recognise that the elements are incorrectly nested and not allow the incorrect code to pass the tests. 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] Link to the relevant forum post:
Here is the file I think, it's best to not do anything. The next challenge isn't about css, and they can see the correct format in it
This is how the browser renders the HTML. If we scope the selectors it should fail. We really do not need or , or the case-insensitive not exactly matching regex. We can also extend the third test so that its assert message would trigger, with the incorrect code in question.
Hi Muhammed I'm not sure whether I'm allowed/supposed to reply to these mails - if not, please let me know! Anyway, I did wonder whether I should even raise this as an issue. But given that the test lets the incorrect code through, I felt I should at least flag it as a problem. I don't think it will happen too often, though - they'd need to both misunderstand the instructions and get the closing tag wrong. So, I totally understand the decision to leave this one alone. Thanks for getting back to me. Cheers Moira

You should not modify the existing `footer` element. ```js <del> assert($('footer').length === 1); </del> <ins> assert(document.querySelectorAll("footer").length === 1); </ins> ``` <del> Your new `p` element should be nested within your `footer` element. </del> <ins> Your new `p` element should be nested within your `footer` element. You should have exactly one `p` element. </ins> ```js <del> assert($('footer').children('p').length === 1); </del> <ins> assert(document.querySelectorAll("footer > p").length === 1); assert(document.querySelectorAll("footer p").length === 1); </ins> ``` <del> Your new `a` element should be nested within your new `p` element. </del> <ins> Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element. </ins> ```js <del> assert($('footer').children('p').children('a').length === 1); </del> <ins> assert(document.querySelectorAll("footer > p > a").length === 1); assert(document.querySelectorAll("footer a").length === 1); </ins> ``` Your new `a` element should have the text `Visit our website`. ```js <del> assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); </del> <ins> assert(document.querySelector("footer > p > a")?.innerText === "Visit our website"); </ins> ``` Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. ```js <del> assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); </del> <ins> assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/"); </ins> ``` # --seed--

</main> --fcc-editable-region-- <footer> </footer> --fcc-editable-region-- </div>


Question:
A user wondering why his solution passed. I then realized the 2nd test test is not working as intended. The user is supposed to assign a string to a property of . The user's solution assigns an uninitialized variable as a property. The purpose of the test is to make sure the user assigns a string value to a prop named , but the test still allows the user to pass as the prop's value and the test passes. Not sure why, but assigning an uninitialized property to ends up assigned an empty string to it. This of course passes the test requirement but defeats the purpose of the learning here. I suggest changed the required property name to something like , so if a user does something like this, all of the tests will fail. Test in question: The second test should fail because the property of should be undefinedbecause it was not initialized by the user's 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
After a bit of research, it appears that assigning as a property that is uninitialized is the same as writing: = { } Since the window has no name, it is just an empty string.

# --instructions-- <del> There is a component in the code editor that is trying to render a `name` property from its `state`. However, there is no `state` defined. Initialize the component with `state` in the `constructor` and assign your name to a property of `name`. </del> <ins> There is a component in the code editor that is trying to render a `firstName` property from its `state`. However, there is no `state` defined. Initialize the component with `state` in the `constructor` and assign your name to a property of `firstName`. </ins> # --hints--

); ``` <del> The state of `StatefulComponent` should be initialized with a property `name` set to a string. </del> <ins> The state of `StatefulComponent` should be initialized with a property `firstName` set to a string. </ins> ```js assert(

); const initialState = mockedComponent.state(); return ( <del> typeof initialState === 'object' && typeof initialState.name === 'string' </del> <ins> typeof initialState === 'object' && typeof initialState.firstName === 'string' </ins> ); })() ); ``` <del> The property `name` in the state of `StatefulComponent` should render in the `h1` element. </del> <ins> The property `firstName` in the state of `StatefulComponent` should render in the `h1` element. </ins> ```js assert(

React.createElement(StatefulComponent) ); const initialState = mockedComponent.state(); <del> return mockedComponent.find('h1').text() === initialState.name; </del> <ins> return mockedComponent.find('h1').text() === initialState.firstName; </ins> })() ); ```

constructor(props) { super(props); this.state = {  name: 'freeCodeCamp!'   firstName: 'freeCodeCamp!'  } } render() { return (

{this.state.name}

{this.state.firstName}

 ); }


Question:
The only shows the legacy Responsive web design courses. <img width="358" alt="Screen Shot 2022-06-05 at 9 40 55 AM" src="https://user-"That needs to be changed to list the new Responsive Design course. N/A List only the new Responsive Design course No response
Yes, I agree with this. I think we should also update the projects to link to the new RWD projects as well. !
We may take the same approach as we did in ! Edit: I remember an issue, that I can't find. Talk about not changing to , when scrolled down. I am wondering if this will affect this, although I am leaning to it won't. I can't find the issue to come up with complete conclusion

Here are our ten core certifications:  #### 1. [Responsive Web Design Certification](https://www.freecodecamp.org/learn/responsive-web-design/) - [Basic HTML and HTML5](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5) - [Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/#basic-css) - [Applied Visual Design](https://www.freecodecamp.org/learn/responsive-web-design/#applied-visual-design) - [Applied Accessibility](https://www.freecodecamp.org/learn/responsive-web-design/#applied-accessibility) - [Responsive Web Design Principles](https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-principles) - [CSS Flexbox](https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox) - [CSS Grid](https://www.freecodecamp.org/learn/responsive-web-design/#css-grid)

 **Projects**: [Tribute Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page), [Survey Form](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form), [Product Landing Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page), [Technical Documentation Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page), [Personal Portfolio Webpage](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage)   #### 1. [Responsive Web Design Certification](https://www.freecodecamp.org/learn/2022/responsive-web-design/) - [Learn HTML by Building a Cat Photo App](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-html-by-building-a-cat-photo-app) - [Learn Basic CSS by Building a Cafe Menu](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-basic-css-by-building-a-cafe-menu) - [Learn CSS Colors by Building a Set of Colored Markers](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-colors-by-building-a-set-of-colored-markers) - [Learn HTML Forms by Building a Registration Form](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-html-forms-by-building-a-registration-form) - [Learn the CSS Box Model by Building a Rothko Painting](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-the-css-box-model-by-building-a-rothko-painting) - [Learn CSS Flexbox by Building a Photo Gallery](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-flexbox-by-building-a-photo-gallery) - [Learn Typography by Building a Nutrition Label](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-typography-by-building-a-nutrition-label) - [Learn Accessibility by Building a Quiz](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-accessibility-by-building-a-quiz) - [Learn More About CSS Pseudo Selectors By Building A Balance Sheet](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet) - [Learn Intermediate CSS by Building a Picasso Painting](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-intermediate-css-by-building-a-picasso-painting) - [Learn Responsive Web Design by Building a Piano](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-responsive-web-design-by-building-a-piano) - [Learn CSS Variables by Building a City Skyline](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-variables-by-building-a-city-skyline) - [Learn CSS Grid by Building a Magazine](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-grid-by-building-a-magazine) - [Learn CSS Transforms by Building a Penguin](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-transforms-by-building-a-penguin) - [Learn CSS Animations by Building a Ferris Wheel](https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-css-animation-by-building-a-ferris-wheel)

 **Projects**: [Survey Form](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form), [Tribute Page](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page), [Technical Documentation Page](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page), [Product Landing Page](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page), [Personal Portfolio Webpage](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage)  #### 2. [JavaScript Algorithms and Data Structures Certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)


Question:
Hello all! There's a grammar error on Step 68 of Project 2 (CSS Cafe Menu) in the new RWB. It reads: "Change the height the hr element to be 3px." It should read: "Change the height of the hr element to be 3px." Instructions should read: "Change the height of the hr element to read to be 3px." <img width="616" alt="Grammar Error" src="https://user-"- Device: MacBook Pro OS: macOS Monterey v12.3.1 Browser: Safari Version: 15.4 (.1.17.1.13) No response
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.

The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. <del> Change the height the `hr` element to be `3px`. </del> <ins> Change the height of the `hr` element to be `3px`. </ins> # --hints--


Question:
The 100 should be a superscript in the last line of this challenge. N/A Should say We may also consider better mathematical formatting? No response All No response
Seems like it has been like this for a while: I will open this up to first timers. The expected fix is to use MathJax (KaTeX-like) to render the following: $$ n: 10 < n < 10^{100} $$ An issue with the first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
I actually saw a way to roll this into a fix that expands the challenge so that won't work.

This demonstrates an unusual property of 142857: it is a divisor of its right-rotation. <del> Find the last 5 digits of the sum of all integers $n$, $10 < n < 10100$, that have this property. </del> <ins> For integer number of digits $a$ and $b$, find the last 5 digits of the sum of all integers $n$, $10^a < n < 10^b$, that have this property. </ins> # --hints-- <del> `numberRotations()` should return `59206`. </del> <ins> `numberRotations(2, 10)` should return `98311`. </ins> ```js <del> assert.strictEqual(numberRotations(), 59206); </del> <ins> assert.strictEqual(numberRotations(2, 10), 98311); ``` `numberRotations(2, 100)` should return `59206`. ```js assert.strictEqual(numberRotations(2, 100), 59206); </ins> ``` # --seed--

## --seed-contents-- ```js <del> function numberRotations() { </del> <ins> function numberRotations(a, b) { </ins> <del> return true; </del> <ins> return 0; </ins> } numberRotations();

# --solutions-- ```js <del> // solution required </del> <ins> function numberRotations(minDigits, maxDigits) { const DIGITS_TO_KEEP = 100000n; const powersOfTen = Array(maxDigits).fill(0); powersOfTen[0] = 1n; for (let i = 1; i < maxDigits; i++) { powersOfTen[i] = powersOfTen[i - 1] * 10n; } // We want numbers of the form xd * m = dx // Or more precisely: //   (x * 10 + d) * m = d*10^(n-1) + x // Solving for x: //   x = d (10^(n-1) - m) / (10 * m - 1) let total = 0n; for (let numDigits = minDigits; numDigits <= maxDigits; numDigits++) { // Check all multiplier - digit pairs to see if a candidate can be built //  with the correct number of digits for (let multiplier = 1n; multiplier < 10n; multiplier++) { for (let lastDigit = 1n; lastDigit < 10n; lastDigit++) { const numerator   = lastDigit * (powersOfTen[numDigits - 1] - multiplier); const denominator = (powersOfTen[1] * multiplier - 1n); if (numerator % denominator === 0n) { const candidate = (numerator / denominator) * 10n + lastDigit; if (candidate.toString().length === numDigits) { total = (total + candidate) % DIGITS_TO_KEEP; } } } } } return parseInt(total); } </ins> ```


Question: Instructions say: "Next, delete the comment in the method..." instead of: "Next, delete the value in the method..."

The code editor has most of the `MyToDoList` component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a `textarea` and a `button`, along with a couple of methods that track their states, but nothing is rendered to the page yet. <del> Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the comment in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens. </del> <ins> Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the `null` value in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens. </ins> **Note:** You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique `key` attribute. Don't worry, this is the topic of the next challenge.


Question:
In [()] step it is written but in the html file there is no selector instead there is selector present. ( In [()] step it is written but in the html file there is no selector instead there is selector present. either change the to or remove the totally from the step to do. No response
Page File: the seed content doesn't have , and the step after it do include it as well. we should swap with This looks something that can be fixed by "first time" code contributors to this repository. Here is the file that you should be looking at to work on a fix: file: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution, followed by the one that is made first. Happy contributing.
I would like to work on this issue. Please assign this issue to me .
We don't give assignment unless to an old time contributor to the repo. Edit: sorry should have provided more info. There were times when people assigned an issue and didn't commit to it, because of that the guide mentions we don't assign people and seek quality and fast commits. Sorry if my original answer was uninformative. I hope you have a good day and happy coding.

# --description-- <del> Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-header` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. </del> <ins> Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-title` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. </ins> # --hints--

assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); ``` <del> Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-header` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. </del> <ins> Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. </ins> ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); <del> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-header'); </del> <ins> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-title'); </ins> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons'); assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); ```

assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); ``` <del> Your `.hero-subtitle, .author, .quote, .list-header` selector should have a `font-size` set to `1.8rem`. </del> <ins> Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`. </ins> ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem');

.hero-subtitle, .author, .quote, <del> .list-header { </del> <ins> .list-title { </ins> font-size: 1.8rem; }


Question:
Describe the bug I have completed the necessary requirements to get the Legacy Full Stack Certification, whenever I click on the claim certification button, it displays nothing, leaving the page as it is, I emailed the support team about this, they agreed i've fulfilled the requirements to get Legacy Full Stack certified and they said its a bug, and I should open a github case about it, so here I am. please help. Desktop (please complete the following information): OS: [Windows] Browser: [chrome] Version: [102.0.5005.115 (Official Build) (64-bit)] Additional context My username is muhammedctgr and my name is Popoola Muhammed
to investigate
hi pls whats the status on this?
it needs to be investigated
says page not found....
noted, thank you. i'll wait.
Many thanks to the dev team, I really appreciate the this mean its been fixed? Still unable to claim the cert tho.
Once the next production build is deployed, this fix should be in. We typically do 1 - 2 deployments each week.
This should be live now!
appreciate this, I've been able to claim the full stack cert. Promise to make FCC proud.

import { certMap } from '../../resources/cert-and-project-map'; import { completedChallengesSelector } from '..'; import { <ins> certTypes, certTypeIdMap } from '../../../../config/certification-settings'; import { </ins> updateUserFlagComplete, updateUserFlagError, validateUsernameComplete,

function* verifyCertificationSaga({ payload }) { // check redux if can claim cert before calling backend <del> const completedChallenges = yield select(completedChallengesSelector); </del> const currentCert = certMap.find(cert => cert.certSlug === payload); <del> const currentCertIds = currentCert?.projects.map(project => project.id); </del> <ins> const completedChallenges = yield select(completedChallengesSelector); </ins> const certTitle = currentCert?.title || payload; <del> const flash = { type: 'info', message: 'flash.incomplete-steps', variables: { name: certTitle } }; const canClaimCert = currentCertIds.every(id => completedChallenges.find(challenge => challenge.id === id) ); </del> <ins> // (20/06/2022) Full Stack client-side validation is already done here: // https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/components/settings/certification.js#L309 if (currentCert?.id !== certTypeIdMap[certTypes.fullStack]) { const flash = { type: 'info', message: 'flash.incomplete-steps', variables: { name: certTitle } }; const currentCertIds = currentCert?.projects?.map(project => project.id); const canClaimCert = currentCertIds.every(id => completedChallenges.find(challenge => challenge.id === id) ); </ins> <del> if (!canClaimCert) { yield put(createFlashMessage(flash)); return; </del> <ins> if (!canClaimCert) { yield put(createFlashMessage(flash)); return; } </ins> } // redux says challenges are complete, call back end


Question:
The tests for the formatting are too strict and won't let valid code pass. The above code should pass. This code passes: 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
here is failing test, in this markdown file Both radio buttons should still be located between opening and closing element tags. but why it's failing is alluding me. Anyway, I am in support of changing it to make it pass
This code works: But this code doesn't: Those 2 codes are exactly the same expect the second one has a little empty space between and . So something about the empty space makes the thing declare it as 'no longer between the opening and closing of the ' I dont know if this helps but that seems to be how to reproduce this bug. As even in the original buggy code that showed us there is empty space between the and : As you can see the code passes: ! So the empty space is messing stuff up. Again idk if this helps its my first time contributing so idk what im doing lol but i hope it helps somewhat in fixing the issue.
finding this, without debugging is impressive, good job. Yeab, this is helpful
Test expects to be first child node of the . When there's text (spaces) before it, first node will be node with spaces. To check for in all child nodes, and to ensure there's only one input per label, assertion can be changed to something like:

```js const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]); assert( <del> labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') .length === 2 </del> <ins> labelChildNodes.filter( childNodes => childNodes.filter(node => node.nodeName === 'INPUT').length === 1 ).length === 2 </ins> ); ```


Question: Out of the 2 points in the "More resources:" section, the first point has a typo that has caused it to render in an unintended manner. Check this the point should be rendered as "Notebooks on GitHub" with an underline and should be clickable. ! I used a web browser(chrome) but I believe its a common issue for every device. No response

More resources:  -  Notebooks on GitHub   -  Notebooks on GitHub  -  How to open Notebooks from GitHub using Google Colab. # --question--


Question:
I've encountered this several times now in the forums. The test will only pass if the is at the end of the after all other inputs, but the instructions do not make this clear. Thus, campers are adding it at the beginning of the and although their HTML is correct, the test is not passing because they have it in the wrong spot. N/A Either clarify in the instructions that the must be at the bottom of the after all other inputs or remove the restriction as to where it is . No response N/A No response
I vote for adding clarifications, although I don't mind removing the restriction. It would be worried if this is the only challenge without these restrictions. here is the markdown file

The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns. <del> To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element, which requires a closing tag. </del> <ins> Users will be able to register with a bio. Add a `label` with the text `Provide a bio:` at the end of the `fieldset`. Add a `textarea` element after the `label` element. Note that the `textarea` requires a closing tag. </ins> # --hints-- <del> You should add a `label` element within the third `fieldset`, after the existing `label` elements. </del> <ins> You should add a `label` element at the end of the third `fieldset`, after the existing `label` elements. </ins> ```js assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)'));


Question:
Campers are creating the new rule set properly but are adding it below the existing rule sets instead of deleting them, which is necessary to pass this step. Even though the hint says "You should only have one selector in your style element." it doesn't seem that they understand what this means. I don't think the instructions make it clear that the three existing rule sets should be deleted and replaced with one new rule set. Perhaps change the instructions to something like: "Replace the three existing type selectors with one selector list that centers the text for the , , and elements." Or even: "Delete the three existing type selectors and replace them with one selector list that centers the text for the , , and elements." No response N/A No response
I like this second option. I think adding this to the instructions will make it more clear.

} ``` <del> Use a selector list to center the `h1`, `h2` and `p` elements at the same time. </del> <ins> Delete the three existing type selectors and replace them with one selector list that centers the text for the `h1`, `h2`, and `p` elements. </ins> # --hints--


Question: as ieahleen mentioned in Crowdin, there are multiple files with typos in them. they say These hints should be changed to because they are testing if there is a single self-closing 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.

assert($('head').length === 1); ``` <del> You should have a one a self-closing `link` element. </del> <ins> You should have one self-closing `link` element. </ins> ```js const link = document.querySelectorAll('link');

# --hints-- <del> You should have a one a self-closing `link` element. </del> <ins> You should have one self-closing `link` element. </ins> ```js assert(document.querySelectorAll('link').length === 1);

assert.match(code, /<link/) ``` <del> You should have a one a self-closing `link` element. </del> <ins> You should have one self-closing `link` element. </ins> ```js assert(document.querySelectorAll('link').length === 1);

assert.equal(heads?.length, 1); ``` <del> You should have a one a self-closing `link` element. </del> <ins> You should have one self-closing `link` element. </ins> ```js assert(document.querySelectorAll('link').length === 1);


Question: In step 36 of catAppPhoto project, the hint in line 33 missing code block This should be changed to Here is the markdown file 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.

assert([...document.querySelector('form').attributes].length < 2); ``` <del> You should create an input element. Check the syntax. </del> <ins> You should create an `input` element. Check the syntax. </ins> ```js assert(document.querySelector('input'));


Question:
In step 18 of building a skyline project, there is a text that go against This should be deleted Here is the markdown file Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution, followed by the one that is made first. Happy contributing.
Hi , I would like to work on this issue. Could you assign it to me ?
Hi thanks for taking interest in it. Feel free to open pull request after you have read the guide, we have stopped assigning people unless they are an old contributor.

# --description-- <del> Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. </del> <ins> Your first building looks pretty good now. Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. </ins> # --hints--


Question:
In the "Learn CSS Colors by Building a Set of Colored Markers" project, the step 12 description reads: Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker div element is empty, it doesn't have any width or height by default. The div doesn't have any height by default, but as it's a block-level element it spans the entire width of the containing element (body). N/A N/A No response N/A No response
As not a native english speaker, I am confused. Can you provide more details, and an alternative you think will fit the current step?
I agree, it should only be height, not width. As you pointed out the element does have a width.
Suggested change, remove the "width or" from the sentence.
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: Change to make: the . Explanation: the div being a block element spans the width of the entire page, as such it is wrong information that should be removed. It is correct to say that it doesn't have an heigth. Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in 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.
This is my first "real" contribution to open source (let alone to FCC), so although it is a pretty insignificant one, feel free to provide me with any feedback and/or constructive criticism please!

# --description-- <del> Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default. </del> <ins> Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any height by default. </ins> In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.