jiebi/CodeConvo huggingface dataset:
Code change:
"difficulty": 0.13, "challengeSeed": "125671865", "description": [ <del> "jQuery is a powerful tool for manipulating HTML elements.", "It's a lot easier to use than JavaScript itself, so we'll learn it first.", </del> <ins> "jQuery is a powerful library built in Javascript for manipulating HTML elements.", "It's a lot easier to use than Javascript itself, so we'll learn it first.", </ins> "It's also extremely popular with employers, so we're going to learn it well.", "Codecademy has an excellent free course that will walk us through the basics of jQuery.", "Go to <a href='http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1</a> and complete the first section."

Related discussion:
text: The copy here seems misleading especially for those coming from no knowledge of javascript. It looks as though jQuery isn't also Javascript. ! [] 1) jQuery is a powerful tool for manipulating HTML elements. 2) It's a lot easier to use than JavaScript itself, so we'll learn it first. 1) jQuery is a powerful javascript framework for manipulating HTML elements. 2) It's a lot easier to use than plain JavaScript itself, so we'll learn it first.
Code change:
Three circles of equal radius are placed inside a larger circle such that each pair of circles is tangent to one another and the inner circles do not overlap. There are four uncovered "gaps" which are to be filled iteratively with more tangent circles. <del> <img class="img-responsive center-block" alt="a diagram of non-overlapping concentric circles" src="https://cdn-media-1.freecodecamp.org/project-euler/199-circles-in-circles.gif" style="background-color: white; padding: 10px;"> </del> <ins> <img class="img-responsive center-block" alt="a diagram of non-overlapping circles" src="https://cdn-media-1.freecodecamp.org/project-euler/199-circles-in-circles.gif" style="background-color: white; padding: 10px;"> </ins> At each iteration, a maximally sized circle is placed in each gap, which creates more gaps for the next iteration. After 3 iterations (pictured), there are 108 gaps and the fraction of the area which is not covered by circles is 0.06790342, rounded to eight decimal places.

Related discussion:
text: <!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --In the challenge below, the alt text for the diagram is set to "a diagram of non-overlapping concentric circles". But if my understanding is correct, they are not "concentric circles" (circles which share the same center). <!-- Add a link to the coding challenge with the problem. --Coding Interview Prep Project Euler Problem 199: Iterative Circle Packing <!-- Add a clear and concise description of what you expected to happen. --The alt text should be changed to "a diagram of non-overlapping circles" or something. (I'm not a native English speaker, so please fix it if there is a better description.) <!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. --! <!-- Please complete the following information. --- Device: Laptop OS: Windows 10 Browser: chrome Version: 96.0.4664.45 <!-- Add any other context about the problem here. --Originally reported in a comment on Crowdin duing translation.
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
I would like to work on this.
Hey Issues are typically not assigned to a specific person, other than long-time contributors. You can read more about this at Issues labelled with or are open for contributions for all. Please make sure you read . Join us in or if you need help contributing, our moderators will guide you through this.
sorry about that, as this was my first time in freeCodeCamp, I'll make sure to read the contribution guidelines
Code change:
<li>laser pointers</li> <li>lasagna</li> </ul> <del> <figure> </del> --fcc-editable-region-- <ins> <figure> </ins> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> <del> --fcc-editable-region-- </del> </figure> <ins> --fcc-editable-region-- </ins> </section> </main> </body>

Related discussion:
text: In RWB, the placement of the instructions interrupts the code and makes indentation unclear, especially for a beginner that may not know what to look for yet. I noticed several instances where putting longer, uninterrupted part of the code in the highlighted editor might help with clarity. <h2Examples</h2<a href=""Step 21</a: change the error message or expand the highlighted code. (Error message when h3 is in the wrong location: "There should be an h3 element right above the second section element's closing tag.") <a href=""Step 23</a: include in highlighted editor to match the instructions ("A figure caption (figcaption) element is used to add a caption to describe the image contained withing the figure element.") and to show the placement of within . <a href=""Step 50</a: include in highlighted editor to match the instructions ("The legend element acts as a caption for the content in the fieldset element.") and to show the placement of within . <h2Proposed solutions</h2- Expand the code on case-per-case basis. Permanently move the instructions box on top of the code editor. (I think that would make everything clearer and more accessible with well defined sections on the page, but I imagine it would be harder to implement now.)
I don't believe we would go this route, as the instructions UI was specifically designed to allow us to highlight the section of code a camper should be editing. I do agree some of these regions could be tweaked a bit
Thank you for reading through it! I will admit I that secondary suggestion because of a personal issue as well, as I find the page a bit overwhelming and every time I click on the next step, it takes me a while to find and re-focus on the editor. I think there's just a lot going on visually, but I'm not a UI/UX designer so I don't have specific suggestions except for the fixed placement.
I'm fine with changing the three lessons mentioned here, but we could maybe use a discussion on how those regions should be. There's probably going to be many steps where the editable region could be bigger or smaller or different. Maybe we need some hard rules on how to apply them. Something like - for HTML steps, include the parent element in the region. For CSS steps, include the whole selector.
Code change:
<li>laser pointers</li> <li>lasagna</li> </ul> <del> <figure> </del> --fcc-editable-region-- <ins> <figure> </ins> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> <del> --fcc-editable-region-- </del> </figure> <ins> --fcc-editable-region-- </ins> </section> </main> </body>

Related discussion:
text: There may be instances where rules like that don't work out so well. Like for the first steps of the Cat Photo project, we may want to be more specific about where to add code - and on later steps or projects, more vague. So I don't know.
I did bring this up, but we were on the fence with:
Yeah it seems like something that's more of a case-by-case basis than to have hard and fast rules for. My proposed "general" approach would be to encapsulate anything the instructions mention. So if the instructions say "write a h2 below your h1", the h1 should be within the editable region.
To try and get this issue resolved, I vote for these changes: step 21: change the hint to "There should be an img element right after the closing tag." step 23: use op's suggestion step 50: use op's suggestion
Thank you for reporting this issue. An easy fix would be to scroll the editor so the instructions are always almost at the top of the "page". That way the eyes know where to go on each challenge. (right now it scrolls to the center) I am interested in knowing more about this: " it takes me a while to find and re-focus on the editor." Are you having difficulty locating the instructions? do also look around for the tests and the submit button? More context is appreciated. We ultimately need to usability test this with people who have not seen the curriculum.
Hello, sorry for the late reply. After seeing this notification, I opened the curriculum on a random step to see if I could provide you with more information. I mostly forgot how the page was structured and my eyes just ran across the page in no specific order. "Check your code" was the first text I read, as it draws the most attention, and then "". I believe that would be very helpful! (I think it would also be nice if the navigation breadcrumbs were more subtle, and if the buttons like "", "" and "preview" looked more like toggle buttons – now they remind me of tabs but disconnected from their sections, and they also draw more attention than is perhaps needed?) Thank you for checking in on this!
Thank you for your feedback.
Code change:
if (typeof test.remove !== 'function') { return false; } <ins> test.add(15); test.add(30); </ins> return test.remove(100) == null; })() );

Related discussion:
text: <!-- 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: using the code in this file: the challenge is passable by uncommenting lines 56-59 if (curr === null) { (curr, "curr") return null } The wording of the test is "Trying to remove an element that does not exist should return null." yet the assertions only test for removing a node that does not exist in an empty tree. What about removing nodes that do not exist in a tree that has nodes? ` Add a Link to the page with the problem: My pull request: Tell us about your browser and operating system: Browser Name: Browser Version: Operating System: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
To summarize the issue: Test checks only if trying to remove non-existing element from empty tree will return null. It doesn't check if the same happens for removing non-existing element from non-empty tree. This can lead to implementation, which doesn't handle the second case at all (and even as in example above can end up with error), and still pass challenge.
Code change:
Chain the `join()` method to your `map()` method and pass in an empty string for the separator. <ins> To chain multiple methods together, you can call the `join()` method on the result of the `map()` method. For example: ```js array.map().join(); ``` </ins> # --hints-- You should add `join("")` to the existing code.

Related discussion:
text: This step comes up a lot on the forum and I think it is because we have never really explained what method chaining is or showed an example. Let's update the description to include an example so they know what to do. We should also explain why the join method is needed here so they better understand what is going on. js const exampleArr = ["This", "is", "a", "sentence"]; const sentence = (" "); // Separator takes a space character (sentence); // Output: "This is a sentence" js ().join(); ` 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
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 Happy coding
Code change:
"expect(drawer(19.50, 20.00, [['PENNY', 0.01], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]])).to.be.a('string');", "expect(drawer(19.50, 20.00, [['PENNY', 0.50], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]])).to.be.a('string');", "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['QUARTER', 0.50]], 'return correct change');", <del> "assert.deepEqual(drawer(3.26, 100.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['TWENTY', 80.00], ['TEN', 10.00], ['FIVE', 5], ['ONE', 1], ['QUARTER', 0.50], ['DIME', 0.20], ['PENNY', 0.04] ], 'return correct change with multiple coins and bills');", </del> <ins> "assert.deepEqual(drawer(3.26, 100.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['TWENTY', 60.00], ['TEN', 20.00], ['FIVE', 15], ['ONE', 1], ['QUARTER', 0.50], ['DIME', 0.20], ['PENNY', 0.04] ], 'return correct change with multiple coins and bills');", </ins> "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 0.01], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]]), 'Insufficient Funds', 'insufficient funds');", "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 0.50], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]]), "Closed", 'cash-in-drawer equals change');" ]

Related discussion:
text: In the following test-case expected ['TWENTY', 80.00], but only ['TWENTY', 60.00] available. I'm going to fix it and make a pull request.
Code change:
You should not call the `changeBackgroundColor` function. Instead, assign the function reference to the `onclick` property. ```js <ins> assert.strictEqual(typeof btn.onclick, 'function'); assert.strictEqual(typeof changeBackgroundColor, 'function'); </ins> assert.strictEqual(btn.onclick, changeBackgroundColor); ```

Related discussion:
text: There is a bug in the challenge learn-basic-debugging-by-building-a-random-background-color-changer/step-8 | when entering it passes the test; ! Device: [MacBook Pro 10.15.7] OS: [ iOS Catalina] Browser: [Brave, Chrome] Version: [...] passes test, when it shouldn't`
Very interesting and confusing finding! This is the passing test: Here's part of the explanation why it passes: Setting to also would pass.
Code change:
# --description-- <del> Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array. </del> <ins> Inside `pick`, use `const` to initialize a variable named `numbers` and set it to an empty array. </ins> # --hints--

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

Related discussion:
text: We previously attempted this in , which had its own set of issues. We need the Plyr to work natively with Youtube or alternatively make the YouTube embed not show related videos.
Can I work on this ?
I think this is resolved by a recent PR. We are keeping this open for verification. We have lots of other issues open which we could use your help with. Thanks.
Code change:
<section id='description'> The <code>sort</code> method sorts the elements of an array according to the callback function. For example: <del> <blockquote>function ascendingOrder(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a - b;<br>&nbsp;&nbsp;});<br>}<br>ascendingOrder([1, 5, 2, 3, 4]);<br>// Returns [1, 2, 3, 4, 5]<br><br>function reverseAlpha(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a < b;<br>&nbsp;&nbsp;});<br>}<br>reverseAlpha(['l', 'h', 'z', 'b', 's']);<br>// Returns ['z', 's', 'l', 'h', 'b']</blockquote> </del> <ins> <blockquote>function ascendingOrder(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a - b;<br>&nbsp;&nbsp;});<br>}<br>ascendingOrder([1, 5, 2, 3, 4]);<br>// Returns [1, 2, 3, 4, 5]<br><br>function reverseAlpha(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a === b ? 0 : a < b ? : 1 : -1;<br>&nbsp;&nbsp;});<br>}<br>reverseAlpha(['l', 'h', 'z', 'b', 's']);<br>// Returns ['z', 's', 'l', 'h', 'b']</blockquote> </ins> Note: It's encouraged to provide a callback function to specify how to sort the array items. JavaScript's default sorting method is by string Unicode point value, which may return unexpected results. </section>

Related discussion:
text: Last I'm not sure if this conversation on a closed issue is considered proper etiquette or not, I simply don't have enough experience.
The above analysis is spot on. Thank you for the great explanation and its fine to have a discussion in a closed issue as long as its on topic. Otherwise you can always create new issue.
function alphabeticalOrder(arr) { return ((a, b) =a !== b ? (a < b ? -1 : 1) : 0); }
Code change:
1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value` 1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome` 1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome` <del> 1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome` </del> <ins> 1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome` </ins> 1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome` 1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome` 1. When the `#test-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`

Related discussion:
text: Point 7. of instruction says: There is missing underscore near eye in the result text. The correct solution for this test is text: eye is a palindrome (with underscore) Instruction text at Point 7. changed to: ! 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 result looks correct to me because the instructions have this note in the beginning If we remove all special characters from then we would be left with
Look at the instructions for tests 16 and 17. The string includes all of the non-alphanumeric characters. But for test 7 the underscore is left out of the string.
I see it now. I misread that as returning the string without non-alphanumeric characters. In addition to updating the test description the hint text will also need to be updated This is 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 User story 7 will need to be updated and the hint text here will need to be updated
Code change:
</div> <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> </div> </div>

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

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