Question:
Thanks for noticing this, Sem. As this route has been deprecated for a while, we should be able to safely sunset this route - NOT have it in the new API.
Reopening it as we're migrating deprecated endpoints as discussed in todays API meeting

import security from './plugins/security'; import sessionAuth from './plugins/session-auth'; import { settingRoutes } from './routes/settings'; <ins> import { deprecatedEndpoints } from './routes/deprecated-endpoints'; </ins> import { auth0Routes, devLoginCallback } from './routes/auth'; import { testMiddleware } from './middleware'; import prismaPlugin from './db/prisma';

void fastify.register(devLoginCallback, { prefix: '/auth' }); } void fastify.register(settingRoutes); <ins> void fastify.register(deprecatedEndpoints); </ins> return fastify; };

<ins> import request from 'supertest'; import { build } from '../app'; import { endpoints } from './deprecated-endpoints'; describe('Deprecated endpoints', () => { let fastify: undefined | Awaited<ReturnType<typeof build>>; beforeAll(async () => { fastify = await build(); await fastify.ready(); }, 20000); afterAll(async () => { await fastify?.close(); }); endpoints.forEach(([endpoint, method]) => { test(`${method} ${endpoint} returns 410 status code with "info" message`, async () => { const response = await request(fastify?.server)[ method.toLowerCase() as 'get' | 'post' ](endpoint); expect(response.status).toBe(410); expect(response.body).toStrictEqual({ message: { type: 'info', message: 'Please reload the app, this feature is no longer available.' } }); }); }); }); </ins>

<ins> import { FastifyPluginCallbackTypebox, Type } from '@fastify/type-provider-typebox'; type Endpoints = [string, 'GET' | 'POST'][]; export const endpoints: Endpoints = [ ['/refetch-user-completed-challenges', 'POST'], ['/certificate/verify-can-claim-cert', 'GET'], ['/api/github', 'GET'] ]; export const deprecatedEndpoints: FastifyPluginCallbackTypebox = ( fastify, _options, done ) => { endpoints.forEach(([endpoint, method]) => { fastify.route({ method, url: endpoint, schema: { response: { 410: Type.Object({ message: Type.Object({ type: Type.Literal('info'), message: Type.Literal( 'Please reload the app, this feature is no longer available.' ) }) }) } }, handler: async (_req, reply) => { void reply.status(410); return { message: { type: 'info', message: 'Please reload the app, this feature is no longer available.' } } as const; } }); }); done(); }; </ins>


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

`bob instanceof Person` should return `true`. ```js <del> assert.deepEqual(bob instanceof Person, true); </del> <ins> assert.deepEqual(_test_bob instanceof Person, true); </ins> ``` `bob.firstName` should return `undefined`. ```js <del> assert.deepEqual(bob.firstName, undefined); </del> <ins> assert.deepEqual(_test_bob.firstName, undefined); </ins> ``` `bob.lastName` should return `undefined`. ```js <del> assert.deepEqual(bob.lastName, undefined); </del> <ins> assert.deepEqual(_test_bob.lastName, undefined); </ins> ``` `bob.getFirstName()` should return the string `Bob`. ```js <del> assert.deepEqual(bob.getFirstName(), 'Bob'); </del> <ins> assert.deepEqual(_test_bob.getFirstName(), 'Bob'); </ins> ``` `bob.getLastName()` should return the string `Ross`. ```js <del> assert.deepEqual(bob.getLastName(), 'Ross'); </del> <ins> assert.deepEqual(_test_bob.getLastName(), 'Ross'); </ins> ``` `bob.getFullName()` should return the string `Bob Ross`. ```js <del> assert.deepEqual(bob.getFullName(), 'Bob Ross'); </del> <ins> assert.deepEqual(_test_bob.getFullName(), 'Bob Ross'); </ins> ``` `bob.getFullName()` should return the string `Haskell Ross` after `bob.setFirstName("Haskell")`.

```js assert.strictEqual( (function () { <del> bob.setFirstName('Haskell'); return bob.getFullName(); </del> <ins> _test_bob.setFirstName('Haskell'); return _test_bob.getFullName(); </ins> })(), 'Haskell Ross' );

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

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

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

# --seed-- <ins> ## --after-user-code-- ```js const _test_bob = new Person('Bob Ross'); ``` </ins> ## --seed-contents-- ```js const Person = function(firstAndLast) { <del> // Only change code below this line // Complete the method below and implement the others similarly </del> this.getFullName = function() { return ""; };


Question:
Course: Front End Development Libraries Certification Section: Bootstrap Lesson: Add Font Awesome Icons to all of our Buttons The wording is as follows: "Note: The span element is an acceptable alternative to the i element for the directions below." The word "below" is wrong. The instructions are above, not below. Switch word "below" with "above". None/ not applicable to issue. N/A, not applicable to issue Issue is found within the text of the instructions N/a, not applicable This is only a grammatical error found in the instructions for the challenge.
I think the directions mentioned here is the tests.
Yes, this is referring to the instructions in the test text, which is where the element is requested.
Maybe something like this would be clearer
The challenge will accept span elements.
Ahh. So we should probably say something more like
That one works for me. Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: You should update the instruction text to replace: With: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I would like to work on this issue could you please assign it to me
We don't assign issues. We accept the first complete pull request that fully addresses the issue
Very excited

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


Question: Looking forward for reporting a security issue: Please report security issues by following our security policy: Describe the bug I don't know if fcc is paying for CI runs so maybe this doesn't matter. While waiting for CI to run, I noticed that both and run . What actually takes the longest is which is only linting .md files so that probably doesn't need to run twice eh? To Reproduce Steps to reproduce the behavior: output of pnpm run lint Expected behavior A clear and concise description of what you expected to happen. Screenshots If applicable, add screenshots to help explain your problem. Desktop (please complete the following information): n/a Smartphone (please complete the following information): n/a Additional context Add any other context about the problem here.

<del> name: CI - Node.js Test Upcoming env: NODE_OPTIONS: '--max_old_space_size=6144' on: # Run on push events, but only for the below branches push: branches: - 'main' - 'prod-**' # Run on pull requests, but only for the below targets pull_request: branches: - 'main' - 'next-**' schedule: # run this Action every 14 days - cron: '0 * */14 * *' # Run on demand workflow_dispatch: permissions: contents: read jobs: lint: name: Lint runs-on: ubuntu-20.04 strategy: matrix: node-version: [18.x] fail-fast: false steps: - name: Checkout Source Files uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3 - name: Setup pnpm uses: pnpm/action-setup@v2 with: version: 8 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3 with: node-version: ${{ matrix.node-version }} cache: pnpm - name: Set Environment variables run: | cp sample.env .env echo 'SHOW_UPCOMING_CHANGES=true' >> .env echo 'SHOW_NEW_CURRICULUM=true' >> .env cat .env - name: Lint Source Files run: | pnpm install pnpm run create:config npm i --prefix=curriculum-server npm i --prefix=web pnpm run build:curriculum pnpm run lint test: name: Test needs: lint runs-on: ubuntu-20.04 strategy: fail-fast: false matrix: node-version: [18.x] steps: - name: Checkout Source Files uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3 - name: Setup pnpm uses: pnpm/action-setup@v2 with: version: 8 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3 with: node-version: ${{ matrix.node-version }} cache: pnpm - name: Set Environment variables run: | cp sample.env .env echo 'SHOW_UPCOMING_CHANGES=true' >> .env echo 'SHOW_NEW_CURRICULUM=true' >> .env cat .env - name: Start MongoDB uses: supercharge/mongodb-github-action@d26215f71b2ce60420a2a3776a25893d11a65f85 # 1.9.0 with: mongodb-version: 6.0 mongodb-replica-set: test-rs mongodb-port: 27017 - name: Install Dependencies run: | pnpm install pnpm run create:config pnpm run build:curriculum - name: Run Tests run: pnpm test </del>

- name: Run Tests run: pnpm test <ins> test-new: name: Test New Curriculum needs: lint runs-on: ubuntu-20.04 strategy: fail-fast: false matrix: node-version: [18.x] steps: - name: Checkout Source Files uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3 - name: Setup pnpm uses: pnpm/action-setup@v2 with: version: 8 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3 with: node-version: ${{ matrix.node-version }} cache: pnpm - name: Set Environment variables run: | cp sample.env .env echo 'SHOW_UPCOMING_CHANGES=true' >> .env echo 'SHOW_NEW_CURRICULUM=true' >> .env cat .env - name: Start MongoDB uses: supercharge/mongodb-github-action@d26215f71b2ce60420a2a3776a25893d11a65f85 # 1.9.0 with: mongodb-version: 6.0 mongodb-replica-set: test-rs mongodb-port: 27017 - name: Install Dependencies run: | echo pnpm version $(pnpm -v) pnpm install pnpm run create:config pnpm run build:curriculum - name: Run Tests run: pnpm test </ins> test-localization: name: Localize needs: lint


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

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

void fastify.register(donateRoutes); void fastify.register(userRoutes); void fastify.register(deprecatedEndpoints); <ins> void fastify.register(statusRoute); </ins> return fastify; };

<ins> import { setupServer, superRequest } from '../../jest.utils'; describe('/status', () => { setupServer(); test('GET returns 200 status code with pong', async () => { const response = await superRequest('/status/ping', { method: 'GET' }); expect(response.body).toStrictEqual({ msg: 'pong' }); expect(response.status).toBe(200); }); }); </ins>

<ins> import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox'; export const statusRoute: FastifyPluginCallbackTypebox = ( fastify, _options, done ) => { fastify.get('/status/ping', async (_req, _reply) => { return { msg: 'pong' }; }); done(); }; </ins>


Question: In module, the users are supposed to add their code after the provided code snippet. Keeping that in mind, the comment ( within the provided code snippet ) should be changed from to . In module, the provided code snippet should look as follows: ! Device: Laptop OS: macOS 13.0.1 Browser: Chrome Version: 107.0.5304.110

Lets render this to the DOM

 );  // Change code below this line   // Add your code below this line  ``` # --solutions--

Lets render this to the DOM

 );  // Change code below this line   // Add your code below this line  ReactDOM.render(JSX, document.getElementById('challenge-node')); ```


Question:
On , the task is to use the spread operator to copy an array. JS semantics allow the spread operator to have whitespace between it and the object it is being applied to. The following is valid: However, in the challenge, any whitespace between the operator and the value will cause the test to fail. The issue is with the test regex here: Which should probably be amended to: NOTE: this issue was , I am submitting it on their behalf. Whitespace between the spread operator and the object it is being applied to should not cause the test to fail. 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
Looks like a good beginner friendly fix to me
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.

The `copyMachine` function should utilize the `spread operator` with array `arr` ```js <del> assert(code.match(/...arr/)); </del> <ins> assert(code.match(/...s*arr/)); </ins> ``` # --seed--


Question:
Looking forward for reporting a security issue: Please report security issues by following our security policy: Describe the bug A clear and concise description of what the bug is. Gitpod can't be used to develop right now. Or maybe it's possible but someone new wouldn't know what steps they need to take. Should i add a note in how-to-setup-freecodecamp- so that new people know? To Reproduce Steps to reproduce the behavior: instructions in how-to-setup-freecodecamp-locally to develop with gitpod, fails with message
Thanks for letting us know On the pnpm side this should be resolved by any idea why our .gitpod.Dockerfile isn't already using the latest version of pnpm?
Because I have forsaken the local config to focus on: For this repo, I have just been manually running . Personally, I do not like everything running from the get-go, but realise many like the one-button setup. This is so quick to fix, I will just PR it before the long-term fix is ready.

RUN bash -c 'VERSION="18"  && source $HOME/.nvm/nvm.sh && nvm install $VERSION  && nvm use $VERSION && nvm alias default $VERSION  <del> && npm i -g pnpm@8' </del> <ins> && npm i -g pnpm@8.6' </ins> RUN echo "nvm use default &>/dev/null" >> ~/.bashrc.d/51-nvm-fix


Question:
I've run into this enough in the forums that it might be time to fix it. A lot of people leave off the closing tag when turning the image into a link. The hint they get is: "You should only add one opening anchor (a) tag. Please remove any extras." Which is confusing since the objective of the step is to add a second link to the page and the hint makes it sound like there should only be one. Instead, the hint should probably remind them that an anchor element needs both an opening and closing tag. Whether we want to spell it out even further by telling them that they are missing the closing tag I will leave up to the hive mind. If we don't want to be too explicit we could do something like: "Hint: Creating a link with the anchor element requires both an opening and closing tag." Or: "Hint: You must use both an opening and closing tag to create a link." Or if we want to be more direct: "Hint: You are missing a closing tag after the image." No response N/A No response
I think being explicit about a closing tag being needed is the way to go this early in the curriculum
Let us go with this.
Yeah I read through your Issue and it is quite confusing to get this hint. The explicit hint you mentioned is the way to go.
Can I make that change ? I just did this locally and works.
This has a help wanted tag, so anyone is free to open a PR for this.
I think that we need to decide exactly what to change - just changing the text of the hint without changing the associated test will cause more problems
Is this designed just to discourage newbies like me? Over an hour on this step. No previously posted code nor clarifications helped... just sent me down new rabbit holes. You need to know code to decipher the clarifications. Must be part of a hazing process. THIS code works as of the date of this posting: <a href=""<img src="" alt="A cute orange cat lying on its back."</a (eliminate the space between the closing anchor "a" and the "" <h 1Now I know I am crazy enough to continue down this road/ rabbit hole universe</h 1(extra spaces for effect, LOL)
please use the freeCodeCamp forum if you have questions about your code or you get stuck. This content is hard, but there is no intentional 'hazing'.

assert(document.querySelectorAll('a').length >= 2); ``` <del> You should only add one opening anchor (`a`) tag. Please remove any extras. </del> <ins> You are missing a closing (`a`) tag after the image. </ins> ```js assert(document.querySelectorAll('a').length === 2);


Question:
Currently, the instructions in module happens to be as follows: The instructions tell the users that instead of setting the font size property to a number ( i.e. 72 ), they can optionally set the font size property to but don't inform the user that needs to be enclosed within quotes i.e. needs to be a string value. Furthermore, the word units in the second sentence should be changed to unit because in this particular case, we are just referring to a single unit i.e. . Considering this, I think the instructions of module should be reworded as follows: The instructions in module should be as follows: <img width="517" alt="image" src=""- Device: Laptop OS: macOS 13.0.1 Browser: Chrome Version: 107.0.5304.110
Hello there, I would like to contribute by fixing this issue,I wanted to ask whether I have to be assigned to this issue to contribute of I can start right away? Also, can you please guide me on where can i find that component to contribute? Thanks :)
Oh~ I see. I was so confused why 72px doesn't work. Good thing I found this issue. Thanks for posting
I'm not sure about this. The instructions explicitly mention that this is a JavaScript Object, which at this point in the curriculum is something that campers should be familiar with. I would be okay with something like:
Or maybe just update the literal value shown. Considering the part "or write it as" it should show the actual value to write.
Thanks for the feedback , ! I think having it as looks like a good solution to this issue. Thanks guys for the input. I'll go ahead and create a PR. Cheers!

Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`. <del> Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`. </del> <ins> Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `"72px"`. </ins> # --hints-- The component should render a `div` element.


Question:
Some steps are placing unnecessary horizontal scrollbars on plain text content. The content is being treated as a code example and thus is not line wrapping normally. Also, the content is coded as one continuous line with no newlines, thus causing a very long horizontal scroll and making it more difficult to copy. There are exceptions for having horizontal scrollbars in WCAG, but those exceptions are for content "which require two-dimensional layout for usage or meaning" (). Actual code examples can fall under this exception, but I think it would be much harder to argue that pure text content like this "requires" that it not line wrap normally in order to be understood. There are several instances of this in the CSS Magazine course: Steps 11, 12, 13, 15, 16, 17. These are the ones I know of. N/A Present this non-code content on the page in a way that it is allowed to line wrap normally. I am able to do this by removing from the element. I'm noticing we are using to code this in the challenge files: markup Soon the freeCodeCamp curriculum will be 100% project-driven learning... This causes the element to have the class . If we are only using for these types of non-code examples then perhaps we can use that class to remove the property. No response N/A No response
Hello can I work on this issue

text-shadow: none !important; } <ins> /* remove horizontal scrollbars for text-only code */ code[class='language-markup'] { white-space: normal !important; } </ins> /* a11y color adjustments */ :not(.dark-palette) .token.comment, :not(.dark-palette) .token.prolog,


Question:
Currently, the second paragraph in module, happens to be as follows: The first line of the second paragraph seems to be a bit incomplete. Considering that, I believe the first line of the second paragraph should be as follows: The first line of the second paragraph of module, should be as follows: <img width="513" alt="image" src=""- Device: Laptop OS: macOS 13.0.1 Browser: Chrome Version: 107.0.5304.110
This issue is still open?

`dispatch` method is what you use to dispatch actions to the Redux store. Calling `store.dispatch()` and passing the value returned from an action creator sends an action back to the store. <del> Recall that action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type `LOGIN`: </del> <ins> Recall that action creators return an object with a type property that specifies the type of action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type `LOGIN`: </ins> ```js store.dispatch(actionCreator());


Question:
Currently, the instructions in module, mention about subsection, which is a subsection of a completely different course ( i.e. course ). At the moment, those instructions in module, only mention the name of the "Managing Packages with NPM" subsection and no link has been provided to that particular subsection. Keeping that in mind, I believe to make it easier for the user to navigate to the subsection from within the instructions of module, a link to the subsection should be provided within the module. Hence, taking the above point into consideration, I believe the last line in the first paragraph of module, should be changed from: To The last line in the first paragraph of module, should be changed to: <img width="1440" alt="image" src=""
can i can solve the above issue?
Hello! can I solve this bug.
Personally, I would entirely remove that sentence. It is not common to maintain the links across the challenges, and it does not really provide useful information, as Campers are not expected to go directly to the npm section. On top of that, I would remove the mention of in all sentences - npm != React; there is nothing special about import statements, and there is no direct link between npm and import statements.
Thanks for the feedback your comment makes a lot of sense. Taking your suggestion into consideration, what do you think about the following:
Hello, can I resolve this issue?
Iooks decent. I would leave in the bit about:
Thanks for the confirmation ! I will go ahead and create a PR then. Cheers!

# --description--  Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with npm and a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges). The "Managing Packages with npm" section covers npm in more detail.   Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges).  Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the Create React App comes configured and ready to go.


Question:
Unnecessary borders are displayed around each line in the solution code of certification projects. For example: to someone's certification page on 'View' ('View Code') to see the solution code Each line in the solution code should not have borders around it ! Device: Laptop OS: Windows 10 Browser: Chrome Version: 114.0.5735.199 (Official Build) (64-bit) The border seems to be in
Hi the borders on the code doesnt seem to be a good UX. I would like to take up this issue.
Hello! I would like to work on this issue. Seems to be a quick fix.
Hey. Contributions are very welcome. Please take a look at to get started.
! Would this sample look better ?
I have fixed the issue and created a pull request . Please review it and let me know if there are any concerns.
To solve the issue move the properties in , to CSS selector that affects the challenges' layout, or doesn't affect the setting layout.
Simply removing the border property in fixes the issue ! ! Is it fine if done this way? I have reverted the changes I made to the bootstrap file back to its original form.
How can we find those code files from the repo ? If the particular link to the file is not provided in the issue.
Hello I would like to request to be assigned to fix this
Hi! I would like to take up this issue

border-color: var(--tertiary-color); } code { <del> border: 1px solid var(--secondary-color); </del> padding: 1px 4px; background-color: var(--quaternary-background); color: var(--tertiary-color);

overflow-wrap: anywhere; } <ins> :not(pre) > code { border: 1px solid var(--secondary-color); } </ins> .challenge-instructions code { white-space: break-spaces; }

code[class*='language-'], pre[class*='language-'] { border-radius: 0; <del> border: none; </del> } pre {


Question: This code has the comments, but really we shouldn't be using variables in the user code for tests. Rewrite test to use private variable. No response All No response

assert(!code.match(/.?[sS]*?splice/g)); ``` <del> The `inputCities` array should not change. </del> <ins> You should not mutate the original array passed to the function. </ins> ```js <del> assert( JSON.stringify(inputCities) === JSON.stringify(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin']) ); </del> <ins> assert.deepEqual(_inputCities, ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]); </ins> ``` `nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])` should return `["Chicago", "Delhi", "Islamabad"]`. ```js <del> assert( JSON.stringify( nonMutatingSplice(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin']) ) === JSON.stringify(['Chicago', 'Delhi', 'Islamabad']) ); </del> <ins> assert.deepEqual(nonMutatingSplice(_inputCities), ["Chicago", "Delhi", "Islamabad"]); </ins> ``` # --seed--

```js function nonMutatingSplice(cities) { <del> // Only change code below this line return cities.splice(3); // Only change code above this line </del> <ins> return cities.splice(3); </ins> } <ins> ``` </ins> <del> const inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; nonMutatingSplice(inputCities); </del> <ins> ## --after-user-code-- ```js const _inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; </ins> ``` # --solutions--

function nonMutatingSplice(cities) { return cities.slice(0,3); } <del> const inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; </del> ```


Question:
There appears to be a slight typo in the English instructions on Step 41 of "Learn Typography by Building a Nutrition Label". The instructions are displayed on the file and read as: The typo is with the text: . The and <p class="bold right"% Daily Value </p% Daily Value ` as part of the exercise. The following code is what the challenge starts with - where the instructions are displayed The expected instructions would read with instead of : This would match the actual text value for the paragraph element the instructions are referencing. ! ! Device: PC OS: Windows 10 Browser: Chrome Version: Version 115.0.5790.110 (Official Build) (64-bit) I would like to point out that I have only seen this issue with English and I am not sure if other languages are also impacted.
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.

# --description-- <del> The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. </del> <ins> The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. </ins> # --hints--


Question:
We got a report that the current test for Step 23 of the Learn CSS Animation by Building a Ferris Wheel project fails in the latest version of Safari. The test works as expected in Firefox and Chrome. This test should pass with the above code like it does in Firefox and Chrome. No response Device: Macbook Air OS: macOS Browser: Safari Version: 16.5.2 In of this project, the CSS helper () returns the string when the correct code is submitted in both Chrome and Firefox. In the latest version of Safari, the CSS helper returns . The test in the should be updated to check for both strings so learners using all supported browsers can complete this step. If this is an issue for other people running Safari, this would be a good candidate for someone's first PR.
Another arguably more verbose option is to look at each individual property. I suspect they will never change values or be different between browsers so that might be more future-proof than looking at the shorthand value.
Thanks for sharing that, I agree – it would be much more future-proof to test those properties / values individually. I'm not sure what our CSS Helper library returns for each individual property in the browsers we support. But if they're consistent across Chrome, Firefox, and Safari, testing each one would be a much better approach.

Your `.cabin` selector should have an `animation` property set to `cabins 10s linear infinite`. ```js <del> assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins'); </del> <ins> const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin'); assert( cabinElementStyles?.animationName === "cabins" && cabinElementStyles?.animationDuration === "10s" && cabinElementStyles?.animationTimingFunction === "linear" && cabinElementStyles?.animationIterationCount === "infinite" ); </ins> ``` # --seed--


Question:
The hint text for one of the tests in step 54 of the Learn Typography By Building a Nutrition Label project has a minor typo. This typo isn't visible unless a learner fails a specific test. The hint text currently reads "A element should wrap the text ". It should be updated to "A element should wrap the text " to match the instructions for this step, and the test itself. This would be a great first PR for new contributors.
I will be working on it.
why cloning the repo is throwing errors? I have been trying for 52 minutes
Add Newly generated SSH key from your device to your github account then clone
The problem is not with SSH key as half of the repo gets cloned and other gets skipped or deleted. The repo is too large to get cloned, I tried increasing buffer size but it didn't worked. Have you tried cloning it? Cloning depth wise might help but problem could be different if it is only appearing in my machine.
I just forked the main branch of the repository on my account and then git cloned that repository on to my local machine.

assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3); ``` <del> A `span` element should wrap the text `Sodium 360mg`. </del> <ins> A `span` element should wrap the text `Sodium 160mg`. </ins> ```js assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[s|n]160mg/));


Question:
The instructions for the JS challenge Seek and Destroy clearly say "Note: You have to use the object." But yet you can pass this challenge without using the object by modifying the function to use a rest parameter to capture the additional arguments. In addition, there is also a solution in the hints that uses this exact technique. This code passes: Unless we have a specific reason for wanting the user to use the object, I think the rest parameter version is the more acceptable approach and we should be pushing that one, or at the least we should not be telling the user that they have to use the object if they really don't have to. The question is, how helpful do we want to be setting up the function? Do we want to add a rest parameter to the function definition? Or do we want to keep it as is (with just the argument) and then the note can say that you can use either the object or you can add a rest parameter to the arguments list? No response N/A No response
P.S. I just realized that maybe we aren't making updates to these JS challenges any more because we will be switching to the new format soon. If so, let me know and I'll close this.
I'd be good with either dropping the hint or saying that either arguments parameter or rest parameter is needed. I think I have a mild preference for the first. We are still making updates to these challenges, but only small updates.
Yeah, I think dropping the instruction is fine. Given that this is the intermediate algorithm section, we should be less concerned with the implementation and more concerned that it works. Since we test with variadic arguments, any implementation should be fine.
I think it's just meant as a hint and its age is why it only talks about the object. I'm not sure we can't have a hint and just call it that. I updated the hint page on the forum a bit.
I like the idea of changing the current note in the instructions to let them know that they can modify the function by adding a rest parameter. I would word it something like the following: My concern is that since we seed the function with only the argument, some people might not think they are allowed to add a rest parameter.
That works for me. I might suggest switching the order so the bit about the arguments object comes last (to give the rest parameter higher priority). It does feel to me like the information can be integrated as part of the main challenge description and requirements without it needing a note section. But I guess I'm fine with either way.
I like that, yes.

# --description-- <del> You will be provided with an initial array (the first argument in the `destroyer` function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments. </del> <ins> You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments. </ins> <del> **Note:** You have to use the `arguments` object. </del> <ins> The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. </ins> # --hints--


Question:
instructions state -10px failed test done incorrectly. error states that it must be -1degerror instruction bug proven. please be grateful free testing again to your company. I would like to one day do corrections to updated things like this on github, step 78 new responsive web design did not pass with clear instructions. error says -1deg ! 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
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: The test text should be updated to . Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Open Source is based upon free contributions. We're always grateful for efforts that move the codebase forward.

# --hints-- <del> Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`. </del> <ins> Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-10deg)`. </ins> ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)')


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

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

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

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


Question:
Here's the last paragraph in the instructions: Notice that where is says "... give you .cat-head..." should actually be "... give your .cat-head ..." N/A N/A ! Device: Laptop OS: Windows 10 Browser: Chrome Version: 116.0.5845.111 Didn't see a better way to report a spelling issue directly from the website.
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.
Can I Contribute on this issue?
attempting
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.
please check out the update.
Hey yout PR is targeting branch of your own fork, not the .
i think its targeting the right one now.
if you want to tackle some other grammatical errors I found, I know there is a missing space in a step somewhere, and missing punctuation in another. I've forgotten where, but I know they both happened prior to this step I reported here, but not before "Learn the CSS Box Model by Building a Rothko Painting". Both were on different steps.

When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. <del> Instead of `static`, give you `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. </del> <ins> Instead of `static`, give your `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. </ins> # --hints--


Question:
The "Control Variable Scope and Logic Using Code Blocks in C#" in the "Add Logic to C# Console Applications" has an question that doesn't really feel quite right for this section. The question is "Which of the following describes the affect of a statement?". The thing is statements aren't covered in the foundational MS Learn Path. It'd be a little unfair to new learners to answer this question with the given material. N/A When answering questions on the FreeCodeCamp foundational certification path, prior C# knowledge should not be required to answer questions. A question like the following might be better suited for this particular lesson. What is the scope of a local variable declared inside a method in C#? a) It's accessible only within the method where it's declared. b) It can be accessed from any method within the same class. c) It's accessible globally from any part of the program. d) It's only visible within the same class, but different methods can't access it. No response Device: Desktop OS: Windows 10 Browser: FireFox Version: 117 I only checked out this certification path for practice reasons.
I came across the same issue. I had to read up on the using statement using different resources in order to answer the question and be able to continue my learning path.
I've created a pull request to fix this issue. Since all the other questions are taken from the "Knowledge Check" portion of related tutorial, I just used the first question found here:

## --text-- <del> Which of the following describes the affect of a `using` statement? </del> <ins> Which of the following statements is true about showing/removing the curly braces for code blocks associated with an `if` statement? </ins> ## --answers-- <del> Affects only the first code block in the code file. </del> <ins> The curly braces can't be removed from the code block for `else if` and `else` statements. </ins> --- <del> Affects only the current code block in the code file. </del> <ins> If the curly braces are removed from the code blocks of an `if-elseif-else`, the white space must also be removed. </ins> --- <del> Affects all of the code in the code file. </del> <ins> Always choose a style that improves readability. </ins> ## --video-solution--


Question:
We see this every so often and it might warrant a note. See the examples for more context. Warn the user so they do not waste time debugging something that is out of their control. 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] Examples:
Thanks for opening this. I forgot this was still a thing. An issue with the label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: To Close This Issue Change this file: Add the following to the description: If you have any issues with contributing, be sure to join us on the , or on the
I hope this message finds you well. I am writing to seek your advice and assistance regarding a minor issue I've encountered with a project I am working on. As a beginner, your guidance and support would be greatly appreciated. In the course of my work, I've noticed that the tests for this project do not function properly when using To ensure transparency and clarity, I believe it would be beneficial to add a note in the project documentation, specifically under the "Note" section, stating the following: Note: This project's tests do not work when using I believe that adding this note would help inform other contributors and users about this limitation, ensuring a smoother development and testing process for everyone involved. Furthermore, I would like to seek your opinion on whether it would be appropriate to raise a Pull Request (PR) to implement this change. Your guidance on this matter would be invaluable to me as a newcomer to the project. I genuinely believe that your expertise could help me navigate this process more effectively. Your mentorship has been an inspiration to me, and I am truly grateful for any assistance you can provide. If adding the mentioned note is indeed the appropriate action to take, I would be thrilled to have the opportunity to submit a PR for this purpose. Your approval and support in merging the PR would be an incredible motivation for me to continue contributing to the project. I would be grateful for your thoughts and guidance on this matter. Your expertise and mentorship are highly regarded, and I look forward to your response. Thank you for your time and consideration. Sincerely, K S Sai Teja
I have raised PR. Regarding this issue.. Please review my PR.

When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. <ins> **Note:** This project's tests do not work when using `glitch.com`. </ins> # --instructions-- - Complete the necessary conversion logic in `/controllers/convertHandler.js`


Question:
Challenge can be passed with solution that will serve files from the root folder, not just directory. Ref By using as a path serving static assets, and not giving explicit path to the , the static assets will be served from (root folder in this case) at the (root) path. Since folder is then served where it is expected to be served, this fulfills test requirements: However, using just serves also other files and directories, starting from the root folder. Ie. or . Reasonable solution seems to be adding test that will check if one of the files from root folder (ie. are not served as static assets. To reproduce: replit starter from to , below line : replit on passes works, so is or . Files outside of folder should not be served as static assets. Otherwise the test should fail. No response No response_
Thanks for opening this. This does sound like a reasonable fix. An issue with the label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the

); ``` <ins> Your app should not serve files from any other folders except from `/public` directory ```js (getUserInput) => $.get(getUserInput('url') + '/server.js').then( (data) => { assert.equal( data?.status + '', 404 + '', 'Your app must serve files only from "public" directory' ); }, (xhr) => { assert.equal( xhr?.status + '', 404 + '', 'Your app must serve files only from "public" directory' ); } ); ``` </ins> # --solutions-- ```js


Question:
Hello FreeCodeCamp team, I found a minor typo in the JavaScript learning module. In the lesson titled "Use getters and setters to Control Access to an Object," there is a small error in the instruction related to creating a getter and setter for temperature conversion. Here's the specific portion of the instruction that needs correction: Incorrect Line: "In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius." Suggested Correction: "In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Fahrenheit." This correction is necessary to maintain clarity and accuracy in the learning material. The correct units (Celsius and Fahrenheit) should align with the given problem statement and the intended outcome of the exercise. Thank you for your attention to detail and dedication to improving the learning experience on FreeCodeCamp. Navigate to the javascript algorithms and data structures learning module. Go to ES6 course. Locate the lesson titled "Use getters and setters to Control Access to an Object." Read the relevant portion of the instruction mentioned. To correct the mentioned typo and ensure clarity in the instruction, the line should be modified as follows: Original: "In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius." Suggested Correction: "In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Fahrenheit." This change aligns with the problem statement and maintains consistency with the intended temperature units. !
I'm not sure I see the problem here. How do we know that the intent is for the setter to set the temp in Fahrenheit? Maybe I'm missing something. The seed code seems to indicate that it should be set in Celsius:
no, in the last line It also runs the getter function, which means that it takes Celsius as Fahrenheit and tries to convert it into Celsius that's why we have to set the temperature in Fahrenheit. Here is the working code. `
Ya, I'm not seeing a problem here either. The getter spits out a Celsius temp and the setter takes a Celsius temp. How you actually store the temp internally in the class is not a consideration here. You don't have to store the internal temp in Fahrenheit. You can solve this by storing the temp internally in Celsius:
Yes, I agree with you, we can solve this by storing temp internally. "The constructor accepts a Fahrenheit temperature. In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius." I could be wrong but the above lines clearly mention that we have to use the getter function to get the temperature in Celsius and the constructor has to accept temperature in Fahrenheit. I feel that these lines are a bit confusing.
I guess I can see how it could be confusing - but I don't think your suggestion here is the way to go. It's setting the temp in Celsius: So saying that the setter function should set the temp in Fahrenheit doesn't seem to make sense to me. What about or something.
Yes, we have to make this line more clear so students won't get confused.
This line makes a requirement to use temperature as a parameter for the constructor and also the name of the getter and setter function to be temperature. So, for better user understanding we can user this line: like this: . So that final code becomes like this:
Also the assert functions also requires temperature to be set
and standard says the getter and setter function should have the same name as the property with _ removed for which property the getter and setter are working
I think In the class, create a to obtain the temperature in Celsius and a that accepts a temperature in Celsius. is the way to go. We do not need to specify the parameter name of the constructor.
Yes I agree with you. Knowing what to put in the parameter in the constructor looking will be a task that requires good understanding for the students.
I the first timer label. The We want to change it to the suggestion: If you would like to contribute, and have not read the contributors docs, please do so here:
I have raised a PR for this change . This is my first ever PR on an open-source project.

Use the `class` keyword to create a `Thermostat` class. The `constructor` accepts a Fahrenheit temperature. <del> In the class, create a `getter` to obtain the temperature in Celsius and a `setter` to set the temperature in Celsius. </del> <ins> In the class, create a `getter` to obtain the temperature in Celsius and a `setter` that accepts a temperature in Celsius. </ins> Remember that `C = 5/9 * (F - 32)` and `F = C * 9.0 / 5 + 32`, where `F` is the value of temperature in Fahrenheit, and `C` is the value of the same temperature in Celsius.


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

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


Question:
when mongodb is off at dev environment and someone trying to run seed script 'connected successfully to mongo' message displayed 'pnpm run seed' mongo down to run 'pnpm run seed' will see errror message at the terminal but still at the begining - 'connected successfully to mongo' message displayed in case mongodb is not running - you should see Failed to connect to mongo message ! Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
hi i would like to work on this issue
Thanks for the report, and thanks for the offer of help, Anyone is free to work on this, but we recommend new contributors read our contribution guide first:
HI I WOULD LIKE TO WORK ON THIS ISSUE
Hey the is up, can you help me take a look at it? Thanks.

const client = new MongoClient(MONGOHQ_URL, { useNewUrlParser: true }); <del> log('Connected successfully to mongo'); </del> const db = client.db('freecodecamp'); const user = db.collection('user');

}; const run = async () => { <ins> await client.connect(); log('Connected successfully to mongo'); </ins> await dropUserTokens(); await dropUsers(); if (args.includes('certified-user')) {


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

Alternatively you can follow official documentation referenced below: <del> To install and configure Playwright on your machine check out this [documentation](https://playwright.dev/docs/intro#installing-playwright) </del> <ins> To install and configure Playwright on your machine check out this [documentation](https://playwright.dev/docs/intro#installing-playwright). </ins> To learn how to write Playwright tests, or 'specs', please see Playwright's official [documentation](https://playwright.dev/docs/writing-tests).

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


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

# --description-- <del> Add `I accept the terms and conditions` text to the newly added label, then link the text `terms and conditions` to the following location: </del> <ins> Add the text `I accept the terms and conditions` immediately after the `input` element in the newly added label. Then link the text `terms and conditions` to the following location: </ins> ```md https://www.freecodecamp.org/news/terms-of-service/

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


Question:
A camper managed to fail the challenge despite having a close enough correct solution for the challenge. It even displays correctly in the browser. I do not believe the tests should be failing if there are spaces around the words "cat photos" in the anchor element. The user should be proceeding to another challenge. No response Device: Desktop OS: Windows 10 Browser: FireFox Version: 118.0.2 No response
I think here we should actually expect correct whitespace.
They shouldn't be messing with that element in the first place in step 13. I think step 12 is more relevant for this issue. And yes, a lot of people add extra spaces in the link text and get bit by this. This was mentioned in issue and I think the consensus is that a test should be specifically to check for the extra white space. I would normally agree that extra white space should not be an issue and the tests should not be so strict about it. But for link text I can see the reasoning. If you add extra white space after "photos" then you will see the underline on the link extend past the word "photos" into the white space after the word. This is one of those few instances where white space actually does make a difference.
Hey, I am a first-timer and I would like to solve this issue
Please read our contributing guide. This issue is not marked as ready for contributions and we do not assign issues.
There is a test where the user is prompted for typos. So instead of writing a test for just detecting whitespaces can't we just mention to avoid whitespaces in that prompt? !
I think it would probably be better to mention whitespace separately since it's early in the curriculum
Sorry if I am wrong about this but do you mean we should make the test less strict and allow whitespaces?
Nope. I think we should check whitespace and typos separately.
does this work then?
The link's text should be . You have either whitespaces before or after the text javascript const nestedAnchor = $('p a')[0]; const hasWhiteSpaceBeforeCat = /^(nestedAnchor ); const hasWhiteSpaceAfterPhotos = /s+$/.test(nestedAnchor ); assert( hasWhiteSpaceBeforeCat hasWhiteSpaceAfterPhotos );
The test for the p element content probably also needs an adjustment to be agnostic to whitespace? And then this test for whitespace would follow?
This regex pattern tests true for sentences with single whitespace between words and no whitespaces before and after the starting and ending word respectively. You can try below code for verifying that So I can write a single test to verify if there are no extra whitespaces between words and no whitespaces before and after the first and last word. So if I get the innerText of the tag then I can just run the test on that to verify the text inside the nestedAnchor tag.
I'm talking about modifying the current test that checks forboth typos and spaces at the same time.
This is the current test for only typos.
The link's text should be cat photos. You have either omitted the text or have a typo. As far as I can understand you want this modification to the test right? javascript const nestedAnchor = $('p a')[0]; const pText = document.querySelector('p').innerText.toLowerCase(); //get the inner text which includes text inside anchor tag const typoCheck = nestedAnchor.innerText.toLowerCase().replace(/s+/g, ' ') === 'cat photos'; //checking for typos const whiteSpacesCheck = /^(S+sS+)+$/.test(pText); assert( typoCheck whiteSpacesCheck ); //if either is false then it will fail
I'm saying that test needs to be two tests.
I have three options of writing the test: telling the users to avoid whitespaces when the typo test fails and this text is prompted to the user 'The link's text should be cat photos. You have either omitted the text or have a typo or have extra whitespaces.' and not adding a new test. separate tests for checking typos and whitespaces. The link's text should be cat photos. You have either omitted the text or have a typo. AND The link text seems to contain extra whitespaces. both the tests into one single test. The link's text should be cat photos. You have either omitted the text or have a typo or have extra whitespaces. Please tell me which option solves the issue. If none of them are correct then please elaborate more on the proper solution I am unable to understand the proposed solution. Also sorry if this is causing you inconvenience.
Your option 2 is almost correct, but those two tests cannot be quite like that. First we should check if the contents of the a element match the correct text with or without spaces. So ' cat photos ' or 'cat photos ' or ' cat photos ' or 'cat photos' should all pass while 'foo bar' would not. Then we should check if the contents of the a element are exactly 'cat photos'. The tests have to be in order.
I found another challenge that deals with the same anchor and spacing issue. I'd like to try to come up with some regex myself for the tests. I'll add an additional comment with some ideas.
I was thinking a little something for the I mentioned right before the last test You should not have extra spaces around the .
Is this the correct way now? The link's text should be cat photos. You have either omitted the text or have a typo. NEXT TEST The link's text should be cat photos. You either have leading or ending whitespaces.
The second test doesn't need to be that complicated. It should match for the string literal without extra spaces.
yeah sorry I was too engrossed in learning regex xD You can check the second test I have updated it.
should I raise a PR then? or is this issue not open for PRs?
I think the actual implementation details of the tests are better suited in a PR. I will open this up to contribution. If other challenges need the same change we can collect them in this issue and make it more general. 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 will repeat what I posted in the PR here as well. If we are really concerned about the anchor element content we shouldn't be lowercasing it or removing anything and we should use or and not . Something about this I didn't realize is the spacing inside only happens if the element is followed by outside text (which seems bizarre). and will always show the actual element content. We should replace jQuery for any test we see that is using it.
hey everyone i think that when it comes to whitespaces - the user includes whitespaces before or after or in both sides of the anchor text - if we want to ignore whitespaces i think a regex should just be included in the source code and replaces it with an empty string ''" like showed in a code earlier. So that wouldn't be a big issue later on. And about typos normally they shouldn't be allowed. Like if the user is supposed to type 'cat photos' and instead they type 'cat photo' that obviously shouldn't pass and they shouldn't be able to go to the next challenge until they enter the exact anchor text asked. Hope this was understandable.
I think we agreed above that we don't want to ignore the whitespaces
oh ok i get it
I did the last instruction to delete the entire anchor element below the p element and it passed.

The link's text should be `cat photos`. You have either omitted the text or have a typo. ```js <del> const nestedAnchor = document.querySelector(`p > a`); assert( nestedAnchor.innerText.toLowerCase().replace(/s+/g, ' ') === 'cat photos' ); </del> <ins> const nestedAnchor = document.querySelector('p > a'); const innerContent = nestedAnchor.innerHTML; assert.isTrue(innerContent.trim() === 'cat photos'); ``` The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`. ```js const nestedAnchor = document.querySelector('p > a'); const innerContent = nestedAnchor.innerHTML; assert.isNotTrue(/^s+|s+$/.test(innerContent)); </ins> ``` After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.


Question:
Describe the bug if you type something in searchbar while using the dark mode, and hover over the produced links, it will hide the link. To Reproduce Steps to reproduce the behavior: to '' something over it how the hover is hiding the result Screenshots ! Browser: chrome
Can you please assign this to me
Hi I've been looking into the issue you reported regarding dark mode and hover behavior on the search results. I'd like to contribute a fix, but I'm having trouble locating the exact code or files that need modification. Could you please provide more specific details about the file or code that's related to this issue? A direct link to the relevant code or even just the file path would be immensely helpful. Your guidance would ensure that I'm making the correct changes to address this problem effectively. Thank you!

padding: 0; } <del> .sidebar ul li a { </del> <ins> .sidebar ul li a, .search a { </ins> color: var(--quaternary-color); } <del> .sidebar ul li > a:hover { </del> <ins> .sidebar ul li > a:hover, .search a:hover { </ins> color: var(--primary-color); }


Question: Right now we have multiple tests that shouldn't be needed. We speculated that it might be leftover tests from a step getting split up into two steps (I didn't check). I suggest we keep tests 1 and 6 and replace 2-5 with a single test. Related issue/PR Replace granular tests with a single "do not touch this" test. 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

# --hints-- <del> Your code should only have one anchor (`a`) element. ```js assert(document.querySelectorAll('a').length === 1); ``` The `p` element should still have the anchor (`a`) element inside of it. ```js assert($('p > a').length); ``` The link's `href` value should be `https://freecatphotoapp.com`. You have either omitted the `href` value or have a typo. </del> <ins> Your code should only have one paragraph (`p`) element. </ins> ```js <del> const nestedAnchor = $('p > a')[0]; assert( nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' ); </del> <ins> assert.isTrue(document.querySelectorAll('p').length === 1); </ins> ``` <del> The link's text should be `cat photos`. You have either omitted the text or have a typo. </del> <ins> Your code should only have one anchor (`a`) element. </ins> ```js <del> const nestedAnchor = $('p > a')[0]; assert( nestedAnchor.innerText.toLowerCase().replace(/s+/g, ' ') === 'cat photos' ); </del> <ins> assert.isTrue(document.querySelectorAll('a').length === 1); </ins> ``` <del> The `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. </del> <ins> Do not make any changes to the elements you created in the previous step. </ins> ```js <del> const pText = document .querySelector('p') .innerText.toLowerCase() .replace(/s+/g, ' '); assert(pText.match(/see more cat photos in our gallery.?$/)); </del> <ins> assert.strictEqual(document.querySelector('p').innerHTML, 'See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.') </ins> ``` There should not be `cat photos` text below the `p` element.


Question:
The active editor for step 9 is currently one empty line placed within the ruleset. Since the instructions above the editor are relatively long it makes it hard to see the selector, which has the potential to confuse people and cause them to unnecessarily add it again (I just dealt with a forum post that did this exact thing). In step 8 we have the active editor include the entire ruleset and leave a blank line for the new property to be . I would suggest we do the same thing for step 9, and leave three blank lines if possible since we are asking for three new properties to be . Step 10 and 11 also have a similar issue, but they are only changing the values of existing properties, so perhaps this is not as big an issue for those steps? I'm fine with keeping them as they are now. In the forum post the selector was again resulting in the following CSS: Have the active editor encompass the entire ruleset and leave three empty lines for the three new properties. No response N/A No response
Hey ! This change makes sense. I have looked through the forum and have seen the issue with campers getting confused. So it would be easy enough to fix. I will do a quick write up with the suggested changes and open it up for contribution I vote to leave steps 10 and 11 as they are for now, just because I haven't seen that pop up to much on the forum.
I am opening this up for first timer contributors since it is small fix. Please make sure to read the and first. Here is the file you will be working with You will need to change the editable region to include the entire ruleset It should produce this result which will make it clearer for campers what changes they will need to add. <img width="902" alt="Screenshot 2023-10-28 at 10 06 22 AM" src=""NOTE we do not assign issues. If you are interested in working on this, then read through the contributing docs and create a PR Happy contributing!
atempt

background-color: #c9d2fc; } <ins> --fcc-editable-region-- </ins> .cat-head { <del> --fcc-editable-region-- --fcc-editable-region-- </del> background: linear-gradient(#5e5e5e 85%, #45454f 100%); width: 205px; height: 180px; border: 1px solid #000; border-radius: 46%; } <ins> --fcc-editable-region-- </ins> ```


Question:
I've seen CI failing with the following error multiple times: <img width="1680" alt="Screenshot 2023-11-06 at 15 33 10" src=""The error can be seen here: I'm not sure if this is also an issue in /learn, but here is the link to the challenge: Link to the code: I haven't tried reproducing the issue locally, but I think running multiple times on that challenge would surface it. The test should always pass.
When it's a random failure like this, it means that the loop-protect timeout has been exceeded. Unless the solution algorithm is obviously terrible (and it isn't to me), then I think it's fine to delete the offending test.
At one point there was trying to go through the various solutions and optimize them, maybe he can take a look here too? Or just let do without that test.
I fixed up the ones with prime numbers. I can take a look at this one and see if a better algorithm is out there

# --solutions-- ```js <del> function countingFractionsInARange(limit) { let result = 0; const stack = [[3, 2]]; while (stack.length > 0) { const [startDenominator, endDenominator] = stack.pop(); const curDenominator = startDenominator + endDenominator; if (curDenominator <= limit) { result++; stack.push([startDenominator, curDenominator]); stack.push([curDenominator, endDenominator]); </del> <ins> class PrimeSeive { constructor(num) { const seive = Array(Math.floor((num - 1) / 2)).fill(true); const upper = Math.floor((num - 1) / 2); const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2); for (let i = 0; i <= sqrtUpper; i++) { if (seive[i]) { // Mark value in seive array const prime = 2 * i + 3; // Mark all multiples of this number as false (not prime) const primeSquaredIndex = 2 * i ** 2 + 6 * i + 3; for (let j = primeSquaredIndex; j < upper; j += prime) { seive[j] = false; } } </ins> } <ins> this._seive = seive; } isPrime(num) { return num === 2 ? true : num % 2 === 0 ? false : this.isOddPrime(num); } isOddPrime(num) { return this._seive[(num - 3) / 2]; } }; const primeSeive = new PrimeSeive(12001); function countingFractionsInARange(num) { const moebius = Array(num + 1).fill(1) // Generate Moebis function terms for (let i = 2; i <= num; i++) { if (!primeSeive.isPrime(i)) continue; for (let j = i; j <= num; j += i) moebius[j] *= -1; for (let j = i * i; j <= num; j += i * i) moebius[j] = 0; } // Evaluate totient sum let sum = 0; for (let i = 1; i <= num; i++) { const coeff = Math.floor(num / i - 2); sum += moebius[i] * Math.floor(coeff * coeff / 12 + 0.5); </ins> } <del> return result; </del> <ins> return sum; </ins> } ```


Question:
I was looking at and I wonder if we should improve the legibility of that heading text as well. The default Bootstrap isn't great here. The font used with makes it harder to read in my opinion. Here is the Modal with and the default for the heading. ! And here is the original ! Any challenge with "Get Help" Open the Modal Better legibility of the heading text. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
! Isn't it already correct?
I don't know what you mean by correct. I'm suggesting changing the and to make it easier to read. I'm talking about the with the Read-Search-Ask link in it to be clear. It is less of an issue in light mode than dark mode but I still think the legibility can be improved by the suggested changes.
I don't think it's hard to read, but it does feel a little condensed and I do think it looks better with a little more space. With the space, we may not need to make the adjustments to the link underlines.
If the text "looks better" chances are it "reads better". And yes, the line height should also help with the underline issue.

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

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

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


Question:
I had a facepalm moment when I was working on a set of Playwright tests. The tests passed locally but failed in CI, and turned out I was seeding my DB with demo user () while we seed CI with certified user (): The failure was expected then, because the tests were working with different user data. I'm now wondering if we should recommend developing with over in general. If we are okay with this, we will need to update the following section of the : <img width="1088" alt="Screenshot 2023-11-09 at 17 12 23" src=""If we still recommend developing with , then we should add a note in the following section of the to ensure is run before tests are written and executed: <img width="1074" alt="Screenshot 2023-11-09 at 17 15 49" src=""
I think most people want to use the 'new' user and we do mention , so the setup docs seem fine. However, it's definitely not correct to recommend in the Playwright guide. Seems like a simple enough fix, though: the Playwright should say .
I think updating the playwright guide would be enough - but we could add a note in the main area that says something like "Use this if you are going to run playwright tests"

### 1. Ensure that MongoDB and Client Applications are Running <del> - [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database) </del> <ins> - [Start MongoDB and seed the database](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database). In order for Playwright tests to work, be sure that you use the `pnpm run seed:certified-user` command. </ins> - [Start the freeCodeCamp client application and API server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)

- Seed the database ```bash <del> pnpm run seed </del> <ins> pnpm run seed:certified-user </ins> ``` - Develop the server and client

pnpm run seed ``` <del> By default, you will be signed in as a new user without any completed certifications. Run the following commands if you need to develop with completed certifications: </del> <ins> By default, you will be signed in as a new user without any completed certifications. Run the following command if you need to develop with completed certifications or write Playwright tests: </ins> ```bash pnpm run seed:certified-user


Question:
<img width="810" alt="image" src="" all the trophy challenges night theme to the exam page UI to be legible. No response Browser: Chrome <details<summaryLight theme is fine</summary<img width="742" alt="image" src=""</details
An issue with the label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
Hey I would like to work on this. Can you tell me the file that I will be working with?
Hey how can we complete the trophy challenges when working in the dev environment?
To test locally, I just alter the database to have the relevant challenges in the array. That is, I , but I now see we have a flag.
Taking a look at this, I noticed that the flag doesn't work. should fix that. Also, it was that the surveys and exams get seeded when you run the seed command. So to see that alert - you need to seed the trophy challenges, and then delete the collection.
The The fix is to import from instead of and give the component a prop and you should be able to remove the prop. I only played with it for a short time, but I think this will fix it all up.

<del> import { Button, Panel } from '@freecodecamp/react-bootstrap'; </del> import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { useTranslation } from 'react-i18next'; <ins> import { Panel, Button } from '@freecodecamp/ui'; </ins> import { openModal } from '../../redux/actions'; import Spacer from '../../../../components/helpers/spacer'; import SurveyModal from './survey-modal';

const { t } = useTranslation(); return ( <del> <Panel data-cy='c-sharp-survey-alert' bsStyle='info'> </del> <ins> <Panel variant='info' data-cy='c-sharp-survey-alert'> </ins> <Panel.Heading>{t('survey.foundational-c-sharp.title')}</Panel.Heading> <Panel.Body className='text-center'> <p>{t('survey.misc.two-questions')}</p> <Spacer size='small' /> <Button block={true} <del> bsSize='md' bsStyle='info' </del> <ins> variant='info' </ins> data-cy='start-csharp-survey-btn' <del> className='btn-invert' </del> onClick={openSurveyModal} type='button' >


Question:
The instructions do not state clearly where the new element should be . I believe they are relying on the fact that the previous two steps a element to the end of the div and thus they assume the user will continue this trend in step 55. But I just ran into a forum post that the element after the div, so I'm not sure that's a safe assumption. Step 54 tells the user to add the element "Below your last element" and I think we should do the same thing here. N/A Change the beginning of the instructions to read: "Below your last element, add another element with the text..." No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
Quick question, do you think we have a typo in the instruction as well?
Yes, you're correct. The phrase "so to have it aligned to the left" can be revised to "to have it aligned to the left" for a better concise expression.
When will be waiting for triage label removed
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: A pull request which resolves this issue should: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi, do you think the sentence could be made more effective by removing the redundant phrase 'span element' that occurs twice in the same line?
I agree that the "in a span element" part is redundant and should be removed, but I'm not sure about the extra comma there as it makes the sentence disjointed. We might want to just ditch the commas altogether:
Agreed. Two commas seem to break the sentence unnecessarily. I already raised a PR () suggesting the removal of the redundant part, which was not merged. Should I push changes in the same PR, or create a new one?

# --description-- <del> Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element so to have it aligned to the left, and `13%` to the right. </del> <ins> Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element to have it aligned to the left, and `13%` to the right. </ins> # --hints--


Question:
The instructions do not state clearly where the new element should be . I believe they are relying on the fact that the previous two steps a element to the end of the div and thus they assume the user will continue this trend in step 55. But I just ran into a forum post that the element after the div, so I'm not sure that's a safe assumption. Step 54 tells the user to add the element "Below your last element" and I think we should do the same thing here. N/A Change the beginning of the instructions to read: "Below your last element, add another element with the text..." No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
Quick question, do you think we have a typo in the instruction as well?
Yes, you're correct. The phrase "so to have it aligned to the left" can be revised to "to have it aligned to the left" for a better concise expression.
When will be waiting for triage label removed
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: A pull request which resolves this issue should: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi, do you think the sentence could be made more effective by removing the redundant phrase 'span element' that occurs twice in the same line?
I agree that the "in a span element" part is redundant and should be removed, but I'm not sure about the extra comma there as it makes the sentence disjointed. We might want to just ditch the commas altogether:
Agreed. Two commas seem to break the sentence unnecessarily. I already raised a PR () suggesting the removal of the redundant part, which was not merged. Should I push changes in the same PR, or create a new one?

# --description-- <del> Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element to have it aligned to the left, and `13%` to the right. </del> <ins> Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element around the `Total Carbohydrate 37g` text to have it aligned to the left and `13%` to the right. </ins> # --hints--