Question: > {t('learn.exam.exit-no')} </Button> <ins> <Button data-cy='exit-exam-modal-confirm' block={true} bsStyle='danger' onClick={exitExam} > {t('learn.exam.exit-yes')} </Button> </ins> </Modal.Footer> </Modal> );

In the exit exam modal, the primary button comes first then the close button, while the reset progress and delete account modals have it the other way around. We have been displaying buttons from the most used/important to the least (check code -save code -get help), so I think the reset progress and delete account modals should be changed to follow the pattern. It's to maintain the consistency and to prevent the user from clicking the wrong button with their muscle memory (the color in this case helps, but non-sighted users won't have the cue). The button order of the reset progress and delete account modals should be flipped.
Other way around, I think. The exit exam should be flipped. If the top button is the most commonly used one, then we should set that to the non-destructive action here. That way, if someone clicks it out of muscle memory and not intention, they haven't done something irreversible.
Yup, I think the exam one should be flipped - that's how it is in the danger zone on the settings too
Okay, thanks everyone for the input. We are going to proceed with an update in the exit exam modal. This issue is open to first-time code contributors to this repository. The file that you should be updating is 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.
Yes, I agree. The 'Reset progress' and 'Delete account' buttons should be reversed. The affirmative option always comes first, followed by the negative option.
Hello, I have flipped the order of the buttons. This should reflect the structure that it appears as.
Follow the
I have flipped the order of exit-exam model buttons, Please review it


Question: Select which project you want to contribute to, and you will see a list of available languages for translation. <del> ![Image - List of available languages](./images/crowdin/languages.png) </del> <ins> ![Image - List of available languages](https://contribute.freecodecamp.org/images/crowdin/languages.png) </ins> Select the language you want to work on, and you will see the complete file tree. <del> ![Image - List of available files](./images/crowdin/file-tree.png) </del> <ins> ![Image - List of available files](https://contribute.freecodecamp.org/images/crowdin/file-tree.png) </ins> Each file and folder will show a progress bar. The **blue** portion of the progress bar indicates what percentage of the file has been translated, while the **green** portion of the progress bar indicates what percentage of the file has been approved by the proofreading team.

! Our local images currently do not render in the translated documentation views. This is due to the use of a relative link, which breaks with the new path generated for i18n pages. A couple of potential fixes: Use an absolute link (<filename). This, IMHO, is the most effective. Have translators fix the link in the translation flow. Host the images through our CDN and fetch them.
We should use the absolute path.
Sounds good. I'll get a PR up shortly.


Question: "tests": [], "type": "basejump", "challengeType": 4,  "isRequired": true   "isRequired": true, "nameEs": "Microservicio para analizar el encabezado de una petición", "description": [ "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://cryptic-ridge-9197.herokuapp.com/api/whoami/ y despliegala en Heroku.", "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", "Historia de Usuario: Puedo obtener la dirección IP, idioma y sistema operativo de mi navegador.", "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón "I've completed this challenge" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ]  }, { "id": "bd7158d8c443edefaeb5bd0e",

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


Question: .form-group label.col-sm-2.control-label.wrappable(for='description') description: .col-sm-10 <del> textarea#description.form-control(name="description", placeholder="Separate sentences by exactly one space only. Do not add in line breaks.") </del> <ins> textarea#description.form-control(name="description", rows=5, placeholder="Separate sentences by exactly one space only. Do not add in line breaks.") </ins> .form-group label.col-sm-2.control-label.wrappable(for='challengeSeed') challengeSeed: .col-sm-10

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --The test requires a multi-line comment of the form . However, the test fails if additional ` characters are present at the beginning or the end of the text contained within the comment. Some examples : The regular expression for the corresponding test needs to be updated. Browser Name: Google Chrome Browser Version: 60+ Operating System: Ubuntu 18.04 !
Hi, I would like to have a go to fix this problem
That's good, please read .
Test fails if multiline style comment includes either / File: Line: 33 this regex is the problem

When I attempt to Run the tests for the code I submitted for Roman Numerals Converter, the page freezes and I cannot solve the issue until I clear the cashe of my browser. Help!
I have the same issue. My browser complains about a long running script and then bails out.
Ok, I figured this one out... if you use the solution in the Gritter chat, that solution will cause a never ending loop, because of the while expression (while numCopy 0 - which is always true btw). This never ending loop will freeze your browser. Moreover, as I lately discovered, the solution there only covers very few of the cases that we need to test to pass the Bonfire. So back to the drawing board, people!
Leaving this open as a bug for someone to fix the solution in the wiki to one that works with the new test cases.


Question: --- <del> `What does she do as our team lead?` </del> <ins> `What does she do as the team lead?` </ins> ## --video-solution--

The fill-in-the-blank sentence doesn't match what the character says. The written sentence is: The character says: Note the "the", instead of "our". No response Device: all OS: all Browser: all Version: all No response
Thank you for reporting the issue. Note for maintainers: Step 54 () uses "our" instead of "the" in the quiz. I think it's fine as-is since there isn't associated audio/caption text, but I'd vote updating it, too, for consistency. This issue is open to first-time code contributors to this repository. Requirements: In Change the text in the tag from to In Change the text in the tag from to Change the fill-in-the-blank text from to Change the backtick placement in the description text from ` In Change the text of the answers from 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.
Hi I've created a PR addressing these changes.


Question:
## Description
 We can access the data inside arrays using <dfn>indexes</dfn>.  Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element 0.   Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array has an index of 0.
 Example

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: I feel like the description for the code in the is a little confusing and can be further cliarified. For example, the description is this: "... Like strings, arrays use <dfnzero-based</dfnindexing, so the first element in an array is element <code0</code." <strongExample</strongTo be a little more clear and following the index concept, this could possibly be explained like this: "... Like strings, arrays use <dfnzero-based</dfnindexing, so the first element in an array is element at index <code0</code."


Question: - 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

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.


Question: You should have an `if` statement that checks if the right key was pressed and the player's `x` position is less than 400. ```js <del> assert.match(animate.toString(), /keys.rightKey.presseds*&&s*player.position.xs*<s*400/); </del> <ins> assert.match(animate.toString(), /keys.rightKey.(pressed|presseds*===s*true)s*&&s*player.position.xs*<s*400/); </ins> ``` # --seed--

these 2 if statements are functionally equivalent and yet one passes and the other does not pass, took me over a half hour, and made me a very sad panda if(keys.rightKey.pressed && player.position.x < 400) { } if (keys.rightKey.pressed === true && player.position.x < 400) { } the problem is that later the keys are defined with press as false, which makes you assume you need to check if it is true, though you do not, and that is horribly confusing and stupid. if(keys.rightKey.pressed && player.position.x < 400) { } if (keys.rightKey.pressed === true && player.position.x < 400) { } I expected to pass and be done with this in 2 minutes or less. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
The === operator checks for strict equality, meaning both the value and the type must match. So, keys.rightKey.pressed must be the boolean true, not just any truthy value. In this case, even if keys.rightKey.pressed is 1, "some string", or {}, the condition will not evaluate as true. It will only be true if keys.rightKey.pressed is exactly true. So the elegant way of writing if condition is first one only because in tests keys.rightKey.pressed can be equal to anything some timestamp or anything at the backend while testing your code
so would just using 2 equals signs work then?
I am just saying that your code is tested in backend and test is written is such a way that it will handle only first if statement otherwise your second if statement is also correct.
The tests are in the frontend code and use a regex Even though would be more common in JS apps, we should allow because a lot campers will still feel more comfortable writing that and the tests should allow for either answer. hope that helps
Thank you, I appreciate it.


Question:
HTML/CSS Quiz
 --fcc-editable-region--

[X] The "CSS" and the have the same value. This is affecting screen reader users since this involves an input and associated label. [ ] The logo in the upper left needs alt text. I would suggest it just be "freeCodeCamp". A lot of them. N/A Resolved Add alt text to the logo. Do we need to add an extra step for this or can we just add it to ? 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
Seeing as the logo is non-functional, do we want the alt to be null? ? If it does require an , then this should get its own step, and a clear description as to why it needs one should be given. I suggest changing the of the (and associated ) to .
Per , the logo does require alt text. Functionality isn't the deciding factor here, it's if the image conveys information (i.e. is not purely decorative), which this image clearly does. Do we want to split this off into its own issue if we are going to create a new step?
I would say yes, but it is not fun to deal with the merge conflict, when two PRs are opened at the same time.
The logo still needs an alt text. The logo is introduced in step 7: That step should be updated to instruct campers to give the an alt text of . The seed code in all subsequent steps should be updated to include that new attribute.
hey may i work on this issue? if so please assign it to me
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question:
To begin, we will discuss a particular type of tree, the binary tree. In fact, we will actually discuss a particular binary tree, a binary search tree. Let's describe what this means. While the tree data structure can have any number of branches at a single node, a binary tree can only have two branches for every node. Furthermore, a binary search tree is ordered with respect to the child subtrees, such that the value of each node in the left subtree is less than or equal to the value of the parent node, and the value of each node in the right subtree is greater than or equal to the value of the parent node. It's very helpful to visualize this relationship in order to understand it better:

  Now this ordered relationship is very easy to see. Note that every value to the left of 8, the root node, is less than 8, and every value to the right is greater than 8. Also notice that this relationship applies to each of the subtrees as well. For example, the first left child is a subtree. 3 is the parent node, and it has exactly two child nodes — by the rules governing binary search trees, we know without even looking that the left child of this node (and any of its children) will be less than 3, and the right child (and any of its children) will be greater than 3 (but also less than the structure's root value), and so on.

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: 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 have fixed in my PR


Question:
"
other cats
", "
", "<form action="/submit-cat-photo">",  "  <input type='text'>",   "  <input type='text' placeholder='cat photo URL'>",  "  <button type='submit'>Submit</button>", "</form>" ],

This challenge has the additional requirement of "Your text field should have the placeholder text of "cat photo URL".", when this placeholder text was before, then removed again arbitrarily in this lesson. Assuming this is a bug since it doesn't match the tutorial flow.


Question: 1: "Move the .target element from #location1 to #location2.", 2: "Change the background color of .target to red.", 3: "Change the background color of the even-numbered targets to red.", <del> 4: "Change the background color of the target4 to red.", 5: "Clone the target2 in #location1 so that it also exists in #location2.", 6: "Remove the target3 from element from #location1.", </del> <ins> 4: "Change the background color of target4 to red.", 5: "Clone target2 in #location1 so that it also exists in #location2.", 6: "Remove the target3 element from #location1.", </ins> 7: "Check the following checkboxes using jQuery.", 8: "Make the text input field read-only.", <del> 9: "Select the target2 option in the select box.", </del> <ins> 9: "Select target2 option in the select box.", </ins> 10: "Add the following css classes to .target: 'animated' and 'hinge'.", 11: "Use jQuery to read the data of .target.", 12: "Use 'length' to count the number of child elements in #location1, then display that value in #location2.",

In the build a bike shop interactive project, the term "subshell", also "sub shell" (1 instance) is first used in step 1450 as an instruction without any definition of what a sub shell / subshell is. The challenge has been using subshells since much earlier in the tutorial as well as in the prior coding challenges where bash is used to access a PSQL database, but the term is never explained. This creates cognitive friction during this step and doesn't allow for the "interactive video game flow state" that is desired in the FCC curriculum. I'd suggestion a simple sentence that explains what a subshell is before using the term as part of a coding instruction step. It would probably be best to introduce this term back in the Build a student database project since that is the first occurence of using the syntax NA - for instructions issue NA - for instructions issue No response Device: [Laptop] OS: [e.g. iOS 12.6.1] Browser: [Chrome] Version: [e.g. 109] Address how the wording interferes with the flow state described here: .
Where should I add the definition of subshell ? can you tell me the name of the file and path of the file ? Definition of Subshell : A subshell is a child process launched by a shell (or shell script). A subshell is a separate instance of the command processor. Also, is above definition of subshell correct ?
Hey do you mind taking a look and triage this?
I really didn't think anything needed to be here. Campers have been using subshells quite a few times before this course. It's never thoroughly explained exactly what it is, but it's explained how it behaves... step in OP: next step: A forum search yields no results of people asking about this: I decided to add a small snippet in the course before this where that syntax is first used to hopefully ease campers into the terminology.


Question: Your code should begin with the declaration `<!DOCTYPE html>`. You may have omitted the declaration, have a typo, or it is not the first line of code. ```js <del> assert(code.match(/<s*!DOCTYPEs+htmls*>/)); </del> <ins> assert.match(code, /<s*!DOCTYPEs+htmls*>/); </ins> ``` Your `<!DOCTYPE html>` must be located at the top of the document. ```js const noSpaces = code.replace(/s/g, ''); <del> assert(noSpaces.match(/^<!DOCTYPEhtml><html/)); </del> <ins> assert.match(noSpaces, /^<!DOCTYPEhtml><html/); </ins> ``` # --seed--

We recently updated the guidelines for writing assertions here For consistency and matching what is in the docs, we should slowly start to update the tests for the workshops and labs in the new frontend cert. For this issue, just focus on updating the tests for steps 36 - 40 of the cat photo app workshop. We don't want to have a large PR that updates a whole bunch of tests in a bunch of steps and makes it harder to review. Here is the link to the workshop: The tests should be updated, where appropriate, to use specific methods like , , , etc instead of just . Here is the complete API reference Just focus on the new frontend cert and don't worry about updating the RWD cat photo app since that will become legacy anyway.


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

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


Question: "assert.deepEqual(myArray, [9,7,5,3,1], 'message: myArray should equal [9,7,5,3,1]');" ], "challengeSeed":[  "ourArray = [];",   "var ourArray = [];",  "",  "for(var i = 9; i > 0; i -= 2){",   "for(var i = 10; i > 0; i -= 2){",  "  ourArray.push(i);", "}", "",

Challenge has an issue. User Agent is: <codeMozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36</code. Please describe how to reproduce this issue, and include links to screenshots if possible. Hi guys. The actual code you provided has some small typo. In the challenge description ourLoop i variable has 10 as starting point. In code instead ourLoop is started by 9. It's pretty weird because construction of ourLoop in code is actual solution to this challenge :) My code:


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

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


Question: *, ::before, ::after { padding: 0; margin: 0; <ins> box-sizing: border-box; </ins> } html { font-size: 62.5%; <del> box-sizing: border-box; </del> } --fcc-editable-region--

Someone in the forums pointed out that adding the property just to will not have the intended effect since the property is not inherited. It appears to me that removing this property completely from in the final product does not seem to make any difference to the layout. Do we need ? If so, if the intent is to apply it to all elements then it should probably be moved to the rule set. Either remove completely or move it into the ruleset. No response N/A No response
Pretty sure I saw this in another challenge too and it got fixed. The CSS used looks like the of setting the but with the actual inheriting missing from the code. It should be fixed, but I would not suggest we remove , setting that (in my opinion) is pretty much a best pratice.
I'm guessing it would be easier and take less explaining to update step 26 to add the on that selector and then remove the mention of it in step 27. Then update all the seed code.
Just a heads up, if lasjorg PR merged without issue, balance sheet project suffer the same issue, we can open a PR or issue for it, if the PR is merged. Except that the balance sheet project , doesn't do much and moving it break the layout.


Question: User Story #2: Within #quote-box, I can see an element with a corresponding id="text". User Story #3: Within #quote-box, I can see an element with a corresponding id="author". User Story #4: Within #quote-box, I can see a clickable element with a corresponding id="new-quote".  User Story #5: Within #quote-box, I can see a clickable <codea element with a corresponding id="tweet-quote".   User Story #5: Within #quote-box, I can see a clickable a element with a corresponding id="tweet-quote".  User Story #6: On first load, my quote machine displays a random quote in the element with id="text". User Story #7: On first load, my quote machine displays the random quote's author in the element with id="author". User Story #8: When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element. User Story #9: My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.  User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.   User Story #10: I can tweet the current quote by clicking on the #tweet-quotea element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.  User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing.

I'm not sure what happened to the instructions of , but there aren't any line breaks between the user stories. None of the other front end projects have this problem, but I didn't check any of the other areas. <img width="1133" alt="screen shot 2019-02-25 at 8 03 27 pm" src="https://user-"
I would like to work on this issue.
Before starting to work, let's determine what is causing it and then you can create a PR to fix it.
Sure
I figured it out. The problem is in line 17. The invalid tag (seen below) was the culprit. Just need to change it to: Now you can create a PR to fix it.
Got it... Will do
Please have a look at it now. Thanks
Let me know what you think about the PR created. I a small tweak also, which you should check locally to see what I am talking about. If you are ok with the changes, then merge it.
Please have a look at it now. Thank you.


Question: Open a new browser tab or window and navigate to [http://localhost:8025](http://localhost:8025) to open your MailHog inbox when the MailHog installation has completed and MailHog is running. The inbox will appear similar to the screenshot below. <del> ![MailHog Screenshot 1](images/mailhog/1.jpg) </del> <ins> ![MailHog Screenshot 1](https://contribute.freecodecamp.org/images/mailhog/1.jpg) </ins> Emails sent by your freeCodeCamp installation will appear as below <del> ![MailHog Screenshot 2](images/mailhog/2.jpg) </del> <ins> ![MailHog Screenshot 2](https://contribute.freecodecamp.org/images/mailhog/2.jpg) </ins> Two tabs that allow you to view either plain text or source content will be available when you open a given email. Ensure that the plain text tab is selected as below. <del> ![MailHog Screenshot 3](images/mailhog/3.jpg) </del> <ins> ![MailHog Screenshot 3](https://contribute.freecodecamp.org/images/mailhog/3.jpg) </ins> All links in the email should be clickable and resolve to their URL.

! Our local images currently do not render in the translated documentation views. This is due to the use of a relative link, which breaks with the new path generated for i18n pages. A couple of potential fixes: Use an absolute link (<filename). This, IMHO, is the most effective. Have translators fix the link in the translation flow. Host the images through our CDN and fetch them.
We should use the absolute path.
Sounds good. I'll get a PR up shortly.


Question:
 © 2018 Camper Cat     ``` # --solutions-- ```html

Even Deeper Thoughts with Master Camper Cat

Describe your problem and how to reproduce it: The info for the challenge said that.. And the challenge is.. However, after I put on the both the input and the button, then I press "TAB" it isn't the first thing that is selected! In fact, it's not even selected! And I had successfully finished the course. Also, I already checked the and I think it's trying to do the opposite. But again, as I'm a newbie, I don't know wheter I'm wrong or right, I just wanted to ask is this the desired goal? Thank you. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Mozilla Browser Version: 66.0.5 (64-bit) Operating System: LSB Version: n/a Distributor ID: ManjaroLinux Description: Manjaro Linux Release: 18.0.4 Codename: Illyria
So, positive tabindices are weird. If you follow the instructions, click on the preview pane and shift-tab (i.e. tab backwards), it should focus on the submit button. Shift-tabbing again takes you to the search box. Why exactly mouse clicks put you in the middle of the tab order isn't clear to me. If you navigate to the preview pane entirely by the keyboard, it should focus in the expected order. The search box comes first, then the button and finally the three links. The easiest way I found to see this was to click on the test output box (below the editor) and tab from there. Probably not. I defer to here. In particular I think that we would be better off using this challenge to warn about the problems that come along with using positive values for .
Oh ok, thanks for clearing that up. I did try your suggestion by clicking the test output box first then tab from there, and it works like it used to be (as it should in instruction). But let me take a conclusion, so there's a mistake with the context in the course and it isn't my fault?
I don't think you did anything wrong. In fact, it was helpful that you looked into how it actually behaved and let us know it was a little weird! The challenge isn't wrong exactly, but I think the issues with positive indices could be highlighted a bit more.

Perhaps by inviting campers to tab around the preview panel and see the strange behaviour you noticed. This will need a bit more discussion before we try changing the challenge, though.


Question: # --description-- <del> Inside your `select` element, add the following five `option` elements with these corresponding values for the option text and `value` attribute: </del> <ins> Inside your `select` element, add the following five `option` elements with these corresponding values for the `option` text and `value` attribute: </ins> **Value Attribute:**

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


Question: # --description-- <del> Call the `square_root_bisection` function with the `N` variable as the argument and print the result. </del> <ins> Call the `square_root_bisection` function with the `N` variable as the argument. This will print the result to the console. </ins> Experiment with larger values.

this makes look like you need to use , but the function call is enough to cause an output to the terminal. Possible solutions: NA NA NA No response
I'd update the instructions removing the part.
Hi, I'm looking to contribute to open source, could I take this ticket on as a way to onboard to this codebase? And also what is the process usually for grabbing a ticket and pushing a PR?
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: letter-spacing: 0.02em; } <ins> .monaco-aria-container { top: -999em; } </ins> #challenge-page-tabs .nav-tabs { margin-left: 2px; display: flex;

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Extra padding seems to appear at the bottom of the page after finishing a challenge and moving on to the next. The extra padding disappears when the page is refreshed. Occurs and reproducible on some challenges. Used screen resolution is 1366x768. Browser Name: Firefox Nightly Browser Version: 62.0a1 Operating System: Kubuntu 18.04 ! !
Is this still a problem
Yep, still present. Tested on Manjaro, Firefox Nightly 67.0a1 and Firefox 65.0 in safe mode and on different profiles.
Can you checkout our which has many changes which may have resolved this issue. If it is still present, then we can label it as such. Also, just to make it clear, can you maybe highlight or circle where you are seeing this extra padding on a screenshot? Thank you.
can confirm this still happens on Seems like the completion modal causes the text in the description to shift by a pixel or two.
Steps to reproduce: Use Firefox Go to Currently you can scroll to the bottom and see no white padding Click on line 2 of the editor and hit Ctrl-Space to get suggestions and then Ctrl-Enter to run the tests Now scroll to the bottom and see that the padding is visible ! This is caused by the div which should be visually hidden, but is actually sitting at the bottom of the page. I'll submit a PR fixing this shortly.


Question: # --description-- <del> Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a <dfn>for...in</dfn> statement. For our `users` object, this could look like: </del> <ins> Sometimes you need to iterate through all the keys within an object. You can use a <dfn>for...in</dfn> loop to do this. The for...in loop looks like: </ins> <del> ```js for (let user in users) { console.log(user); </del> <ins> ```javascript const refrigerator = { 'milk': 1, 'eggs': 12, }; for (const food in refrigerator) { console.log(food, refrigerator[food]); </ins> } ``` <del> This would log `Alan`, `Jeff`, and `Sarah` - each value on its own line. </del> <ins> This code logs `milk 1`  and `eggs 12`, with each key-value pair on its own line. </ins> <del> In this statement, we defined a variable `user`, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console. </del> <ins> We defined the variable `food` in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console. </ins> **NOTE:** Objects do not maintain an ordering to stored keys like arrays do; thus a key's position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key. # --instructions-- <del> We've defined a function `countOnline` which accepts one argument (a users object). Use a <dfn>for...in</dfn> statement within this function to loop through the users object passed into the function and return the number of users whose `online` property is set to `true`. An example of a users object which could be passed to `countOnline` is shown below. Each user will have an `online` property with either a `true` or `false` value. </del> <ins> We've defined a function `countOnline` which accepts one argument, `allUsers`. Use a <dfn>for...in</dfn> statement inside this function to loop through the `allUsers` object and return the number of users whose online property is set to `true`. An example of an object which could be passed to `countOnline` is shown below. Each user will have an `online` property set to either `true` or `false`. </ins> ```js {

This seed code can lead to a bit of confusion because the global variable name and parameter name are pretty similar What about isn't my favorite if someone has another idea. I just don't like when the type isn't strictly needed. No response All No response
can I work on this if anyone is not working?
This issue isn't ready for PRs yet
One idea for naming: -or -
I went with something other than because 1) that's the example 2) at least one learner has has said was a little hard to grok at first We could change the example (and maybe we should in light of 2?)
I can appreciate the idea behind it but I don't think the names should imply they are different things, and are not the same thing. Wouldn't just changing to for the parameter and leaving the object name as is work?
We can use that as the parameter name; I like it better than . This still doesn't fully handle the user complaint though. I see two problems 1) is a really awkward variable name. Swapping to fixes this. 2) Given the example, its an easy bug for users to write instead of the intended . Not sure if we want to address this or ignore this. Changing the global object name seems to be the best way to address this.
Maybe what really needs to be done is to change the example to something else, like maybe or something like that?
If we change the parameter we should change the example as well. Either to something unrelated and change the text as needed, or it would need to use as well. I think we are, in part, trying to fix the underlying issue of campers not fully understanding parameters and arguments. Which I'm not sure how or where to address. I think the code highlighter isn't helping either. Usually, const and arguments are colored differently from parameters and reassignable variables. As an example (I changed the loop to use const as well) !
Not sure how I feel about the parameter name but it might work.
I like the direction. How about Instructions Sometimes you need to iterate through all the keys within an object. You can use a </dfnloop to do this. The </dfnloop looks like: This code logs and , with each value on its own line.

We defined the variable in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console. We've defined a function which accepts one argument, . Use a </dfnstatement inside this function to loop through the object and return the number of users whose online property is set to . An example of an object which could be passed to is shown below. Each user will have an property set to either or . Seed Code I think this way we use your better parameter name and we swap the example for something that doesn't lead the learner to the bug.
I think it looks good. As an aside, if we are documenting how works we should show how to access the properties on the object (in the example). I know we have taught how to use variables with objects and making them bridge the gap might force the learner to think about it more. But it feels a little wrong to me to teach without actually showing how to use it.
Small tweak for that: Instructions Sometimes you need to iterate through all the keys within an object. You can use a </dfnloop to do this. The </dfnloop looks like: This code logs and , with each key-value pair on its own line. We defined the variable in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console. We've defined a function which accepts one argument, . Use a </dfnstatement inside this function to loop through the object and return the number of users whose online property is set to . An example of an object which could be passed to is shown below. Each user will have an property set to either or . Seed Code


Question: 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' >

<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.


Question: You should set the `font-family` to `Impact`. ```js <del> const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); </del> <ins> const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact'); </ins> assert(hasFontFamily); ```

The instructions ask to learner to use the Impact font. One learner on the forum posted that the tests fails use of using lower case first letter for the font name. In the screenshots, one picture is the rendering of the unaltered code, the other using impact (lower case) font name. The tests should pass use of either impact or Impact. ! ! NA No response
The test right now is: which constrict to a specific casing it could be transformed into 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: /challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe- Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question:
"challengeType": 3, "nameEs": "Crea un buscador de Wikipedia", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/pgNRvJ.",   "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/pgNRvJ.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo hacer una búsqueda a la base de datos de Wikipedia en una caja de búsqueda y ver los artículos resultantes.", "Historia de usuario opcional:Como usuario, puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.", "Historia de usuario opcional:Como usuario, cuando escribo en la caja de búsqueda, puedo ver un menú desplegable con opciones de autocompletar referentes a artículos similares de Wikipedia.", "Pista: Esta es un artículo muy útil relativo al uso del API de Wikipedia: http://www.mediawiki.org/wiki/API:Main_page.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Pedo obtener información acerca del clima en mi localización actual.", "Historia de usuario: Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.", "Historia de usuario: Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.", "Historia de usuario: Puedo buscar entradas en Wikipedia en un cuadro de búsqueda y ver las entradas de Wikipedia resultantes.", "Historia de usuario:Puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.", "Pista 1: Aquí está una URL donde puedes ver una entrada aleatoria de Wikipedia: http://en.wikipedia.org/wiki/Special:Random<.", "Pista 2: Este es un artículo muy útil relativo al uso del API de Wikipedia: http://www.mediawiki.org/wiki/API:Main_page.", "Pista 3: Usa este enlace para experimentar con el API de Wikipedia.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true },

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


Question: testString: assert(typeof findXmasSunday === 'function'); - text: findXmasSunday(2000, 2100) should return an array. testString: assert(typeof findXmasSunday(2000, 2100) === 'object');  - text: findXmasSunday(2008, 2121) should return [1977, 1983, 1988, 1994, 2005, 2011, 2016]   - text: findXmasSunday(1970, 2017) should return [1977, 1983, 1988, 1994, 2005, 2011, 2016]  testString: assert.deepEqual(findXmasSunday(1970, 2017), firstSolution); - text: findXmasSunday(2008, 2121) should return [2011, 2016, 2022, 2033, 2039, 2044, 2050, 2061, 2067, 2072, 2078, 2089, 2095, 2101, 2107, 2112, 2118] testString: assert.deepEqual(findXmasSunday(2008, 2121), secondSolution);

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: The test statement should return doesn’t make sense, since 2008 is after 1977. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Firefox Browser Version: 81.0.2 Operating System: Linux Mint
there seems to be just an issue in the test text: There is just to make so that the two functions, the one executed and the one written match. I will mark for first timers this is the file:


Question: - When prompted in the terminal, select your keyboard layout by language/area Now, [Cypress can be run](how-to-add-cypress-tests.md#_2-run-the-cypress-tests) <ins> ## Troubleshooting ### Unable to Connect to Port 8000 If Cypress fails to run with the following error: ``` CypressError: `cy.visit()` failed trying to load: http://localhost:3000/signin We attempted to make an http request to this URL but the request failed without a response. We received this error at the network level: > Error: connect ECONNREFUSED 127.0.0.1:8000 Common situations why this would fail: - you don't have internet access - you forgot to run / boot your web server - your web server isn't accessible - you have weird network configuration settings on your computer This error occurred while creating the session. Because the session setup failed, we failed the test. ``` You can resolve the issue by: - Going to the root `package.json` file and adding `--host 0.0.0.0` to the `develop:client` command: ```json "scripts": { "develop:client": "cd ./client && pnpm run develop --host 0.0.0.0" } ``` - Then, re-running `pnpm run develop` </ins>

I consistently got the following error when running Cypress locally: Run Run either or Cypress attempts to run, but will fail with the above errorOS: MacOS Sonoma I was able to resolve the issue by adding to the command and re-run . I've been having some strange issues lately with localhost so I think this is due to my local setup, but I'm reporting still, to check if anyone was/is experiencing the same problem. We can add a note to the Cypress guide if I'm not the only one ran into it.
Solution: Remove Cypress
So the victim count is 2 now as Sem joined the club. I'll go ahead and add a note to the doc. I've also created to kick off the Cypress removal.


Question: ); }); }); <ins> describe('Custom output for JavaScript objects', function () { beforeEach(() => { cy.visit(locations.js); cy.get(selectors.editor, { timeout: 15000 }) .first() .click() .focused() .type('{ctrl}a') .clear(); }); it('Set object', () => { cy.get(selectors.editor) .first() .click() .focused() .type( 'const set = new Set();{enter}set.add(1);{enter}set.add("set");{enter}set.add(10);{enter}console.log(set);' ); cy.get(selectors.defaultOutput).should('contain', 'Set(3) {1, set, 10}'); }); it('Map object', () => { cy.get(selectors.editor) .first() .click() .focused() .type( 'const map = new Map();{enter}map.set("first", 1);{enter}map.set("second", 2);{enter}map.set("other", "map");{enter}console.log(map);' ); cy.get(selectors.defaultOutput).should( 'contain', 'Map(3) {first => 1, second => 2, other => map})' ); }); }); </ins>

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Javascript Code Editor Steps to reproduce the behavior: the following code; ! Device: Laptop OS: Windows 10 Browser: Edge Version: 96.0.1054.34
Same goes for Map. I don't believe we teach Set or Map anywhere so it's maybe not super relevant. But the output should be as close to the browser console as possible I would think.
cc
My best guess is it has to do with the on the log here: But debugging has been a pain because that file does not hot-reload in the client.
Set is used in this under the coding interview prep section. While using is not specifically required for the task, the example code shown does have with an expected output underneath which with this bug will not be displayed in the output. This would be quite misleading for someone who pastes in the example code to the editor.
I dug into this a little bit: the problem is that relies on a fallback when running in the browser. This fallback does not know how to handle sets or maps and just returns . If anyone wants to work on this, the obvious approach is to check if the input is an or and then write some custom code to format them.
I take it we are leaving this open, as tests should probably be ?


Question:
  Read these guidelines in 	  English 	  中文 	  русский 	  عربى 	  Español 	  Português

  # Como obter localmente os emails enviados (para fluxos de emails) > **Nota:** Este passo é **opcional** - Obrigatório apenas quando estiver trabalhando com fluxos de emails

from its english version at from its english version at from its english version at from its english version at from its english version at from its english version at  When you make a PR for this particular issue, do not tag it with instead just reference it with
I can take this one
Awesome! All yours.
should I translate all the files or just one?
I would recommend starting one by one and making a separate PR for each. Also, please note that we rapidly iterating over the english versions at the moment. So, take your time and revisit this issue thread for changes.
I will start working on If anyone else wants to help, feel free to.
Hello! I can also help out translating. I will get started with the !
Hey! I can translate the next file how-to-catch-outgoing-emails-
Hey guys! I can translate the how-to-work-on-coding- one :)
And I can finish up with how-to-work-on-guide-!
There is still work pending on this. When you make a PR for this particular issue, do not tag it with instead just reference it with
I can work on how-to-setup-freecodecamp- Also, there is a substantial difference between PT-PT and PT-BR (Portuguese from Portugal and Portuguese from Brazil). Maybe there should be different translations for each one?
I agree with PT-PT and PT-BR have many differences and it would be nice to have both made separately
There are some differences but it is very easy to understand for both PT-BR and PT-PT speakers, in my opinion. I don't mind reading in PT-BR and I would guess the opposite also happens?
Hi All, Thanks a lot for taking the time to contribute to At the minute we are making the translations available in the PT-BR. We might consider PT-PT in future, but I am afraid we don't have an ETA on that. Thanks.
Is there still missing translations for this issue?
Is there any missing translation? I would like to help
I'll be helping on this one. Just one question, should we translate PT-PT to PT-BR? For example, in PT-PT "corre" means execute, but it has totally different meaning in PT-BR (sprint). In this case, I would substitute it by "executa", the correct translation.

Is the issue completed? I can also help with any Portuguese translations.
I can help as well, if it's still needed.
Hey! I'm gonna start working on how-to-work-on-guide- !
Hello folks, I can assist with PT-BR
Hi! I fixed links on the portuguese and took the chance to also do it on the english version (links did not work).
I'm learning Github and have just figured out how to search through the issues for code commits that might apply and found this. My pull request fixes many of the md links for each of the language documents and adds Portuguese to the top language links bar to all of them, specifically directing to the correct language links README file. No translation, just link fixes ;p
There are 2 docs not listed in the Issue, but with no PT-BR translation. Can I get one of those?
hey what about us divide this one. I could pick the second one: .
Thanks for working on the translations for the "Contributing to freeCodeCamp". Here on we are making contributing to translations for contribution docs ad hoc. You are free to make pull-requests for improving these translations. We are closing the issue as these do not need tracking per se. You can raise a fresh issue if you find something incorrect in the existing docs.


Question: Back in your event listener, you need to update the text of the `result` element. <del> Use a ternary operator to update the text of the `result` element after the `if` statement. Check the truthiness of calling `isSpam()` on the value of the `messageInput` element. If true, set the text to `Oh no! This looks like a spam message.`. Otherwise, set the text to `This message does not seem to contain any spam.` </del> <ins> After the `if` statement, use a ternary operator to check the truthiness of calling `isSpam()` with `messageInput.value` as the argument. If true, set the `textContent` property on the `result` element to `Oh no! This looks like a spam message.`. Otherwise, set it to `This message does not seem to contain any spam.` </ins> <del> Then set the `messageInput` element's value to an empty string. </del> <ins> Then set the `messageInput` element's `value` property to an empty string. </ins> # --hints--

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


Question: For example: ```console <del> pnpm run cypress -- run --spec=cypress/e2e/default/landing.js </del> <ins> pnpm run cypress -- run --spec=cypress/e2e/default/landing.ts </ins> ``` - To create a development build, start the development server, and run all existing cypress end-to-end tests:

instead of the example command should be: docshow-to-add-cypress- project dependencies to run will see error: instead of the example command should be: No response


Question: Next, you will need to update the playlist in your HTML document to display the songs. <del> Add `songsHTML` to `playlistSongs`, by using the `innerHTML` property. This will insert the `li` element you just created into the `ul` element in the already provided `HTML` file. </del> <ins> Assign `songsHTML` to the `innerHTML` property of the `playlistSongs` element. This will insert the `li` element you just created into the `ul` element in the already provided `HTML` file. </ins> # --hints--

The question is worded super horribly. It just isn't written in an easy to understand way. The wording should be something like No response Device: Desktop OS: Windows 10 Browser: Firefox Version: 121.0 First reported in this thread.
A PR has already been made here


Question: # --description-- <del> One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`: </del> <ins> One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. ::before creates a pseudo-element that is the first child of the selected element; ::after creates a pseudo-element that is the last child of the selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`: </ins> ```css .heart::before {

Hey everyone! On the lesson , with regards to and , it says: I think this is not actually correct. A more appropriate definition could be: Otherwise it may lead people to believe it's getting before/after the actual element. Another definition could be (taken from the MDN):
i'll do it (i like MDN definition)


Question:
} return showWarning ? (

  You appear to be offline, your progress may not be being saved.
 ) : null;

To Reproduce Steps to reproduce the behavior: to /learn or /settings with the theme set to dark off internet connection and wait Actual behavior The offline warning message shows up, but the text is quite hard to read. Screenshots <img width="1680" alt="Screen Shot 2020-11-09 at 12 22 16 AM" src="https://user-"
WCAG does say the contrast is only 1.41:
The notification background is hardcoded and the font color is being handled based on theme. We have let bootstrap handle the styling for the notifications since they handle the font color and the background and look well on both themes. So doing the followings should do the trick. Add as a class here: and remove the from here:
I think the best way is to implement luma-corrected calculations. The first obvious implication of going with a luma-corrected approach is that the notification background color needs to switch to an RBG declaration for the backgrounds, calculate the luma from whatever method we choose, and use it on the foreground color declaration, which can (and will) still be HSL color. I am saying this because this would allow the font color to switch based on the contrast of the notification background contrast from to and vice versa.
can I work on this? I might need help. please guide me.
that is a cool trick. Thanks for sharing the link. Since are planning to move off of bootstrap, we should consider luma-corrected calculations in how we implement our dark/light themes during the rewrite process. Meanwhile, I think we could move forward with making the simple change that resolves this issue. sure. Make sure you read this:


Question: Your `setAttribute` method should have ``song?.title ? `Play ${song.title}` : "Play"`` as the second argument. ```js <del> assert.match(code, /playButton.setAttribute(s*('|")aria-label1,s*song?.titles*?s*`Plays*${song.title}`s*:s*1Play1s*);?s*/) </del> <ins> assert.match(code, /playButton.setAttribute(s*('|")aria-label1,s*song?.titles*?s*`Plays*${song.title}`s*:s*('|")Play2s*);?s*/) </ins> ``` # --seed--

In Step 59 of the Music Player project, the following code is valid as JavaScript code, but our test doesn't accept it. Notice that and are wrapped with different quotes. or The test is here: Reported in these forum posts: If we want to allow the mixing of single and double quotes, we should fix the test. If not, we should add a hint to guide users to use either single or double quotes. ! 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
Yeah, I agree that campers should be able to pass with either types of quotes because technically they did get the question right. I have opened this up for contribution


Question: editorDidMount = (editor, monaco) => { this._editor = editor; <del> if (this.props.canFocus) { </del> <ins> this._editor.updateOptions({ accessibilitySupport: this.props.inAccessibilityMode ? 'on' : 'auto' }); // Users who are using screen readers should not have to move focus from // the editor to the description every time they open a challenge. if (this.props.canFocus && !this.props.inAccessibilityMode) { </ins> this._editor.focus(); } else this.focusOnHotkeys(); this._editor.addAction({

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

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


Question: HTML/CSS Quiz

[X] The "CSS" and the have the same value. This is affecting screen reader users since this involves an input and associated label. [ ] The logo in the upper left needs alt text. I would suggest it just be "freeCodeCamp". A lot of them. N/A Resolved Add alt text to the logo. Do we need to add an extra step for this or can we just add it to ? 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
Seeing as the logo is non-functional, do we want the alt to be null? ? If it does require an , then this should get its own step, and a clear description as to why it needs one should be given. I suggest changing the of the (and associated ) to .
Per , the logo does require alt text. Functionality isn't the deciding factor here, it's if the image conveys information (i.e. is not purely decorative), which this image clearly does. Do we want to split this off into its own issue if we are going to create a new step?
I would say yes, but it is not fun to deal with the merge conflict, when two PRs are opened at the same time.
The logo still needs an alt text. The logo is introduced in step 7: That step should be updated to instruct campers to give the an alt text of . The seed code in all subsequent steps should be updated to include that new attribute.
hey may i work on this issue? if so please assign it to me
Hey We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question: ```js assert( $('source').attr('src') === <del> 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3' </del> <ins> 'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3' </ins> ); ```

All links in the english curriculum need to be replaced. This is the last of the S3 links Here are the new CDN links that should be used instead multiple see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response


Question: } from 'lodash'; import { compileHeadTail, setExt, transformContents } from '../utils/polyvinyl'; <del> import { nightThemeStyle } from './displayStyle.js'; </del> const htmlCatch = 'n<!--fcc-->n'; const jsCatch = 'n;/*fcc*/n';

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

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


Question: isOnlineSelector, isServerOnlineSelector, userFetchStateSelector, <ins> showCodeAllySelector, </ins> userSelector, ( isSignedIn,

The page gets stuck and goes blank with you leave the relational database challenges. to 'Start the course' the fCC logo/button in the nav goes blank and nav disappears Page not to go blank. Clicking fCC logo should go to /learn No response Same on Chrome and Firefox Console errors: <img width="671" alt="Screen Shot 2023-02-16 at 11 44 19 AM" src="https://user-"


Question: # --description-- <del> After the unordered list, add a new image with an `src` attribute value set to: </del> <ins> After the unordered list, add a new image with a `src` attribute value set to: </ins> `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`

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


Question: --- <del> `What does he does as our team lead?` </del> <ins> `What does he does as the team lead?` </ins> ### --feedback--

The fill-in-the-blank sentence doesn't match what the character says. The written sentence is: The character says: Note the "the", instead of "our". No response Device: all OS: all Browser: all Version: all No response
Thank you for reporting the issue. Note for maintainers: Step 54 () uses "our" instead of "the" in the quiz. I think it's fine as-is since there isn't associated audio/caption text, but I'd vote updating it, too, for consistency. This issue is open to first-time code contributors to this repository. Requirements: In Change the text in the tag from to In Change the text in the tag from to Change the fill-in-the-blank text from to Change the backtick placement in the description text from ` In Change the text of the answers from 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.
Hi I've created a PR addressing these changes.


Question:
)} {isTopContributor && (

  <TopContibutorBadgeEmblem />

A2 English blocks have challenges whose title is displayed next to a completion indicator. The indicator is having a right margin, which creates a gap between the indicator and the text. <img width="746" alt="Screenshot 2024-05-31 at 22 49 13" src=""This issue is because the indicator has a class: This class was harmless as it didn't have any CSS rules associated, until we badges to the user profile page, which caused a class name collision: Remove the class from: Rename the class in to to avoid future collision
I can take this one, but I don't seem to have the permissions to assign myself to this issue.
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.
Awesome, thanks for clarifying!


Question: height: 100%; padding-bottom: 100%; position: relative; <ins> background-color: var(--primary-background); </ins> } .testimonial-image {

Looking forward for reporting a security issue: Please report security issues by sending an email to instead of raising a GitHub issue. Describe the bug The heights of the SVG files on the landing page vary, which causes the certification chart to look inconsistent. To Reproduce <img width="946" alt="zoomfloatingvideowindowandLearntoCode—ForFree—CodingCoursesforBusyPeople" src="https://user-"Desktop (please complete the following information): OS: Mac Browser: Chrome Version: Version 88.0.4324.96 (Official Build) (x86_64)
Hi Quincy, I let know about this already.
in min height, so should take care of it.


Question: display: flex; flex-direction: row; flex-wrap: wrap; <del> margin: 0px; </del> <ins> margin: 0; </ins> } .footer-col {

found an issue: Unexpected shorthand "padding" after "padding-bottom" (declaration-block-no-shorthand-property-overrides) It's currently on:
I'm happy to fix this (and remove the units from zero values also in that file), but I'm not sure what the preferred replacement is for the padding. Should I just remove the padding: and add lines for padding-top: 0; padding-right: 15px; to reflect the styles currently specified by the padding: 0 15px 15px line?
I would delete , you can start and these question will be answer by reviewers if they need changes later


Question: } @media screen and (max-width: 991px) { <del> .challenge-success-modal .btn-lg { font-size: 1rem; } .challenge-success-modal .btn-cta-big { max-width: 100%; font-size: 1rem; } .completion-modal-body { min-height: 340px; } </del> .progress-bar-wrap, .progress-bar-background { height: 10px;

The contains a lot of unused CSS rules, which should be cleaned up. The unused rules/classes are: .challenge-success-modal .btn-lg .btn-cta-big .completion-modal-body .completion-message .completion-challenge-nameRemove the above classes from Test and confirm that the modal displays properly after the changes
Hi, I can help with this If you would like to assign it to me.


Question: ```js const exampleArr = ["This", "is", "a", "sentence"]; <del> const sentence = exampleArray.join(" "); // Separator takes a space character </del> <ins> const sentence = exampleArr.join(" "); // Separator takes a space character </ins> console.log(sentence); // Output: "This is a sentence" ```

Hello, I believe there is a typo in the join() method example on Learn Basic String and Array Methods by Building a Music Player - Step 18 I expect: should actually be: It's just a typo in the example explaining the join() method. ! N/A No response
Good catch. I will open it up for first timers contribution
This has been opened for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the The code example in this step needs to be updated to reference the correct array name Happy coding


Question: assert.equal(allSongs[2].duration, "3:51"); ``` <del> The third object in your `allSongs` array should have an `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`. </del> <ins> The third object in your `allSongs` array should have a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`. </ins> ```js assert.equal(allSongs[2].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3");

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


Question: <ins> import React from 'react'; function B1EnglishIcon( props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement> ): JSX.Element { return ( <> <svg aria-hidden='true' viewBox='0 0 175 170' fill='none' xmlns='http://www.w3.org/2000/svg' {...props} > <path fillRule='evenodd' clipRule='evenodd' d='M138 9H83V79.476H147V18C147 13.029 142.971 9 138 9ZM147 88.476H83V156H138C142.971 156 147 151.971 147 147V88.476ZM74 79.476V9H18C13.029 9 9 13.029 9 18V79.476H72H74ZM9 88.476H74V156H18C13.029 156 9 151.971 9 147V88.476ZM18 0C8.059 0 0 8.059 0 18V147C0 156.941 8.059 165 18 165H138C147.941 165 156 156.941 156 147V18C156 8.059 147.941 0 138 0H18ZM27.54 64.394H36.151V48H42.8115C45.3948 48 47.489 50.0942 47.489 52.6775V52.6775C47.489 55.2608 45.3948 57.355 42.8115 57.355H36.151V64.394H45.63C50.9366 64.394 55.377 60.3669 55.8938 55.0854V55.0854C55.9643 54.3647 55.9435 53.638 55.8317 52.9225L55.5571 51.1642C55.24 49.1331 54.153 47.302 52.5219 46.0509L50.5 44.5L52.0247 43.495C53.9086 42.2532 55.1806 40.2735 55.527 38.0439L55.8246 36.1287C55.9411 35.379 55.9657 34.6179 55.8979 33.8623V33.8623C55.3799 28.0899 50.5423 23.667 44.7467 23.667H27.54V64.394ZM42.04 41.545C45.0494 41.545 47.489 39.1054 47.489 36.096V36.096C47.489 33.0866 45.0494 30.647 42.04 30.647H36.151V41.545H42.04ZM100.301 64.394V57.355H111V45.5C111 44 111 39 111 37.5C111 38.661 111 36.2586 111 37.5C111 38.574 111 36.339 111 37.5C111 38.693 111 36.307 111 37.5C111 35.5 111 35.569 111 35C112.194 35 109.5 35 111 35C111 36 111 34.069 111 35C109.5 36 105 39 104 39.5C103.5 38.5 101 34.5 100.5 33.5C99.2921 35.4577 102 31.069 100.5 33.5C102 32.5 111.5 25.167 114 23.667C118.5 23.667 119 23.667 120.5 23.667C120.5 24.7787 120.5 22.5 120.5 25C120.5 28 120.5 27.931 120.5 29.931C120.5 32.431 120.5 33.154 120.5 35.5C120.5 37.038 120.5 39 120.5 40.5C120.5 42.285 120.5 44 120.5 46C120.5 48.5 120.5 55 120.5 57.355H129.335V64.394H100.301ZM27.54 142V101.273H54.983V108.372H36.151V118.077H53.571V125.176H36.151V134.901H55.063V142H27.54ZM131.605 142V101.273H123.034V126.886H122.676L105.097 101.273H97.54V142H106.151V116.366H106.449L124.168 142H131.605Z' /> </svg> </> ); } B1EnglishIcon.displayName = 'B1EnglishIcon'; export default B1EnglishIcon; </ins>

The B1 English icon isn't available, so we are temporarily using the A2 icon for this superblock. <img width="709" alt="Screenshot 2024-09-11 at 05 43 53" src=""An icon for B1 should be created (it should look similar to the A2). Link to the A2 icon: You will need to make the following change to your file in order to see the B1 superblock:


Question: <del> /* * Copyright (c) Microsoft Open Technologies, Inc.  All rights reserved. * Microsoft Open Technologies would like to thank its contributors, a list * of whom are at http://rx.codeplex.com/wikipage?title=Contributors. * * Licensed under the Apache License, Version 2.0 (the "License"); you * may not use this file except in compliance with the License. You may * obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or * implied. See the License for the specific language governing permissions * and limitations under the License. */ import debugFactory from 'debug'; import { noop, Observable, throwError } from 'rxjs'; import { map } from 'rxjs/operators'; import { isGoodXHRStatus } from './'; const debug = debugFactory('fcc:ajax$'); const root = typeof window !== 'undefined' ? window : {}; // Gets the proper XMLHttpRequest for support for older IE function getXMLHttpRequest() { if (root.XMLHttpRequest) { return new root.XMLHttpRequest(); } else { var progId; try { var progIds = [ 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0' ]; for (var i = 0; i < 3; i++) { try { progId = progIds[i]; if (new root.ActiveXObject(progId)) { break; } } catch (e) { // purposely do nothing noop.noop(e); } } return new root.ActiveXObject(progId); } catch (e) { throw new Error('XMLHttpRequest is not supported by your browser'); } } } // Get CORS support even for older IE function getCORSRequest() { var xhr = new root.XMLHttpRequest(); if ('withCredentials' in xhr) { return xhr; } else if (root.XDomainRequest) { return new root.XDomainRequest(); } else { throw new Error('CORS is not supported by your browser'); } } function parseXhrResponse(responseType, xhr) { switch (responseType) { case 'json': { if (isGoodXHRStatus(xhr.status)) { if ('response' in xhr) { return xhr.responseType ? xhr.response : JSON.parse(xhr.response || xhr.responseText || 'null'); } else { return JSON.parse(xhr.responseText || 'null'); } } else { return null; } } case 'xml': return xhr.responseXML; case 'text': default: return 'response' in xhr ? xhr.response : xhr.responseText; } } function normalizeAjaxSuccessEvent(e, xhr, settings) { return { response: parseXhrResponse(settings.responseType || xhr.responseType, xhr), status: xhr.status, responseType: xhr.responseType, xhr: xhr, originalEvent: e }; } function createNormalizeAjaxErrorEvent(options) { let _body = {}; let _endpoint = ''; if (typeof options === 'string') { _endpoint = options; } else { _body = options.body; _endpoint = options.url; } return (e, xhr, type) => ({ _body, _endpoint, type: type, status: xhr.status, xhr: xhr, originalEvent: e }); } /* * Creates an observable for an Ajax request with either a settings object * with url, headers, etc or a string for a URL. * * @example *   source = Rx.DOM.ajax('/products'); *   source = Rx.DOM.ajax( url: 'products', method: 'GET' }); * * interface Options { *   url: String, // URL of the request *   body?: Object, // The body of the request *   method? = 'GET' : 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE', *   async? = true: Boolean, // Whether the request is async *   headers?: Object, // optional headers *   crossDomain?: true // if a cross domain request, else false * } * * ajax$(url?: String, options: Options) => Observable[XMLHttpRequest] */ export function ajax$(options) { var settings = { method: 'GET', crossDomain: false, async: true, headers: {}, responseType: 'text', createXHR: function() { return this.crossDomain ? getCORSRequest() : getXMLHttpRequest(); }, normalizeError: createNormalizeAjaxErrorEvent(options), normalizeSuccess: normalizeAjaxSuccessEvent }; if (typeof options === 'string') { settings.url = options; } else { for (var prop in options) { if (hasOwnProperty.call(options, prop)) { settings[prop] = options[prop]; } } } const { normalizeError, normalizeSuccess } = settings; if (!settings.crossDomain && !settings.headers['X-Requested-With']) { settings.headers['X-Requested-With'] = 'XMLHttpRequest'; } settings.hasContent = typeof settings.body !== 'undefined'; return new Observable.create(function(observer) { var isDone = false; var xhr; const throwWithMeta = err => { err._body = options.body || {}; err._endpoint = options.url; observer.error(err); }; var processResponse = function(xhr, e) { var status = xhr.status === 1223 ? 204 : xhr.status; if ((status >= 200 && status <= 300) || status === 0 || status === '') { try { observer.next(normalizeSuccess(e, xhr, settings)); observer.complete(); } catch (err) { throwWithMeta(err); } } else { observer.error(normalizeError(e, xhr, 'error')); } isDone = true; }; try { xhr = settings.createXHR(); } catch (err) { throwWithMeta(err); } try { if (settings.user) { xhr.open( settings.method, settings.url, settings.async, settings.user, settings.password ); } else { xhr.open(settings.method, settings.url, settings.async); } var headers = settings.headers; for (var header in headers) { if (hasOwnProperty.call(headers, header)) { xhr.setRequestHeader(header, headers[header]); } } if (!xhr.upload || (!('withCredentials' in xhr) && root.XDomainRequest)) { xhr.onload = function(e) { if (settings.progressObserver) { settings.progressObserver.next(e); settings.progressObserver.complete(); } processResponse(xhr, e); }; if (settings.progressObserver) { xhr.onprogress = function(e) { settings.progressObserver.next(e); }; } xhr.onerror = function(e) { if (settings.progressObserver) { settings.progressObserver.error(e); } observer.error(normalizeError(e, xhr, 'error')); isDone = true; }; xhr.onabort = function(e) { if (settings.progressObserver) { settings.progressObserver.error(e); } observer.error(normalizeError(e, xhr, 'abort')); isDone = true; }; } else { xhr.onreadystatechange = function(e) { if (xhr.readyState === 4) { processResponse(xhr, e); } }; } debug('ajax$ sending content', settings.hasContent && settings.body); xhr.send((settings.hasContent && settings.body) || null); } catch (err) { throwWithMeta(err); } return function() { if (!isDone && xhr.readyState !== 4) { xhr.abort(); } }; }); } // Creates an observable sequence from an Ajax POST Request with the body. // post$(url: String, body: Object) => Observable[Any] export function post$(url, body) { try { body = JSON.stringify(body); } catch (e) { return throwError(e); } return ajax$({ url, body, method: 'POST' }); } // postJSON$(url: String, body: Object) => Observable[Object] export function postJSON$(url, body) { try { body = JSON.stringify(body); } catch (e) { return throwError(e); } return ajax$({ url, body, method: 'POST', responseType: 'json', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, normalizeError: (e, xhr) => parseXhrResponse('json', xhr) }); } // Creates an observable sequence from an Ajax GET Request with the body. // get$(url: String) => Obserable[Any] export function get$(url) { return ajax$({ url: url }); } /** * Creates an observable sequence from JSON from an Ajax request * * @param {String} url The URL to GET * @returns {Observable} The observable sequence which contains the parsed JSON */ // getJSON$(url: String) => Observable[Object]; export function getJSON$(url) { return ajax$({ url: url, responseType: 'json', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, normalizeError: (e, xhr) => parseXhrResponse('json', xhr) }).pipe(map(({ response }) => response)); } </del>

Steps to reproduce: to your credit card information and hit submit transaction will not go through (won't show up in Stripe) and you'll get a blank page like this: <img width="1427" alt="Supportournonprofit_freeCodeCamp_org" src="https://user-"
reproducible on master
I am aware of this issue, working on it.