Question:
Users often delete the text or include it inside of the anchor text. Could we add a line to the instructions preventing this error? Common errors: Target solution: There should be a way to prevent these common errors. No response All No response
I'm happy to work on and fix this issue
While we are at it, I move that we include the opening and closing tags in the active editor region. I've see several people add these tags because they don't realize they are already there since they are in the gray area, far removed from the white editor region.
+1 to adding the p to the editable region
Just helped someone in the forums who extra tags on this step. Definitely need to put them in the editable region.
I am down to test moving them to the editor area first, if the issue persists, we can add new line After all, this looks like it's cased by a confusion 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 moderators will guide you through this.
I think I tried everything and it doesnt work
This isn't a location for help. You should use the Ask for Help button or go to the forum at

  --fcc-editable-region--  No Copyright - freeCodeCamp.org
No Copyright - freeCodeCamp.org
  --fcc-editable-region--


Question:
I think we can clarify this step with one small tweak. Currently the instructions say Students seem to often miss what is going on here and try to make a combo img-anchor element. We could modify it to add a brief bit of context No response All No response
I'm happy to work on and fix this issue if that's alright with you?
I like what you've proposed here I think I might have proposed something similar for this step a while ago, but I'm getting old so my memory may not be as good as it used to be.
Thanks for creating an issue about this That should help cut down on the confusion in this step quite a bit. I vaguely recall mentioning something similar before, so it's great you opened up an issue so we can improve this step. feel free to open up a PR for this. We don't typically assign issues. Instead, we look for comments in issues like yours expressing interest, and the first comprehensive PR that's submitted is reviewed and merged.
Is this issue still open?
I see a "first timers only" tag and a "help wanted" tag on this issue. Are we just waiting on a couple of fixes to be chosen from, or can I work on this issue since I am a first timer?
Hey the first pull request that solves issue, while following contribution guidelines, will be merged.

# --description-- <ins> In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags. </ins> Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. # --hints--


Question:
The challenge is using the method which hasn't been introduced yet. I believe it is an artifact of the current section order (ES6 now comes before functional programming). You don't really need to understand how works to solve the challenge but just to avoid any confusion it might be better to change it to use a simple for loop. The guide post will need to be updated as well if this change is made. Should not contain code that is unfamiliar to the student. 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] Forum post: Guide post:
hey i have fix this issue let you check PR

```js const sum = (x, y, z) => { const args = [x, y, z]; <del> return args.reduce((a, b) => a + b, 0); </del> <ins> let total = 0; for (let i = 0; i < args.length; i++) { total += args[i]; } return total; </ins> } ```

```js const sum = (...args) => { <del> return args.reduce((a, b) => a + b, 0); </del> <ins> let total = 0; for (let i = 0; i < args.length; i++) { total += args[i]; } return total; </ins> } ```


Question:
The phrase "because we are using flexbox" is not clear here. There was no flexbox for table or tr or td. It is not clear why setting width to 100vw works in such way It will be cool to have clear explanation about setting td width to 100vw in table No response Device: MacBook Pro OS: Ventura 13.0.1 Browser: Chrome Version: 109.0.5414.119 No response
Where is the code of this issue?
I believe it's in the folder, written in one of its files.
Have you fixed the issue yet ?
I am waiting for the issue to be triaged by a maintainer.
This issue is related and might lead to a different code solution for step 52:
The phrase needs to be removed from the challenge description. An issue with the or 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 The file to be changed is:

# --description-- <del> Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container (because we are using flexbox). </del> <ins> Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container. </ins> # --hints--


Question:
in the odin project, there is a sentence that is worded like it should be worded like Here is the file 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 moderators will guide you through this.
can I solve this?

The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage. ## The Charset Meta Element <del> You should always have the `meta` tag for the charset encoding of the webpage in the head element: `<meta charset="utf-8">`. </del> <ins> You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`. </ins> Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.


Question:
When adding a new node ( or element ) to a binary search tree, I was supposed to compare the value supplied method with that of current node. But it seems odd to me that, despite not doing it at all, the testing script somehow ignored it. Here's the code I wrote I expect the unit test case to fail instead of to succeed. Also, if I slightly edit this LOC here: to Then I expect the said unit test case to pass. No response Device: Dell Latitude 5580 OS: Ubuntu 22.04 Browser: Brave Browser Version: 1.45.127 No response
is taking a look and this and will create a PR if a fix is identified.
The reason the "The add method should add elements according to the binary search tree rules." test passes is because the test does not test for adding duplicate keys. I've a pr that changes the test so it adds a duplicate key, and the solution in the docs still works. The code you wrote now fails (correctly). Your intended fix of changing to does not work, as if cr[direction] is null, you can't get its .value

} test.add(4); test.add(1); <ins> test.add(1); </ins> test.add(7); test.add(87); test.add(34);


Question:
In the step: We see the text: "You can use a callback function in the style() method to change the styling for different elements." Which is a repetition in part of the later sentence "You can use a callback function in the style() method and include the conditional logic." I feel the first sentence can be skipped entirely and make for a better step overall. Instead of the current step text, we could rewrite as follows: No response N/A No response
opened pr that gets rid of first sentence

# --description-- <del> D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements. </del> <ins> D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. </ins> For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point: ```js


Question:
In the sentence: "There are several ways to add a tooltip to a visualization, this challenge uses the SVG <codetitle</codeelement." The comma should be a period (from an English grammar perspective, the sentence after a comma should not be a complete sentence but here it is. ) This is a comma splice. Ref: https://www-s3-,of%20equal%20weight%20and%20importance.) File: 04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3- Use a period where the comma splice is located currently. No response not applicable No response
instead of , there should be . at the highlighted position. Is that correct? <img width="499" alt="Screenshot 2023-02-08 at 1 08 22 AM" src="https://user-"
yes burh
have you fixed the issue??
yes I fixed it.

# --description-- <del> A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element. </del> <ins> A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization. This challenge uses the SVG `title` element. </ins> `title` pairs with the `text()` method to dynamically add data to the bars.


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

# --description-- <del> To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`. </del> <ins> To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` and `margin` properties both to `0` and set the `box-sizing` property to `border-box`. </ins> # --hints--

assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); ``` <ins> Your `*, ::before, ::after` selector should have a `box-sizing` property set to `border-box`. ```js assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'border-box'); ``` </ins> # --seed-- ## --seed-contents--

This will make it easier for you to work with `rem` units later, as `2rem` would be 20px. <del> Also, set the `box-sizing` property to `border-box`. </del> # --hints-- You should create an `html` selector.

assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); ``` <del> Your `html` selector should have a `box-sizing` property set to `border-box`. ```js assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); ``` </del> # --seed-- ## --seed-contents--

*, ::before, ::after { padding: 0; margin: 0; <ins> box-sizing: border-box; </ins> } --fcc-editable-region--

*, ::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--

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


Question:
In the 5 certification projects for the Data Visualization certificate, the phrase "(non-virtual) DOM elements" is used without any prior explanation (I checked the Data Visualization curriculum and no such phrase was introduced at any point). It is not clear therefore to the learner what the requirement "Required (non-virtual) DOM elements are queried on the moment of each test." could actually mean. Now, maybe it means "actual DOM' vs "virtual DOM" from the React curriculum. But requiring that a priori knowledge to understand a Data Visualization project requirement seems like overkill? I propose that this requirement in all 5 projects be stated simply as "Required DOM elements..." The chance of someone not understanding that we mean 'actual DOM elements' seems miniscule to me in the context of these challenges, but I'm not a web developer, so if there is a valid reason to use the term 'non-virtual DOM elements', it would be very interesting for me to learn/hear of it. ps. should this issue be accepted, please also fix the phrasing "on the moment" to be "at the moment" which I believe is what was actually meant. update all 5 certification project statements referring to (non-virtual) DOM elements as per the above discussion. No response N/A No response
I think this is more of a note for advanced campers, similar to mentioning that the tests might not work with a framework like Vue.
Yes I think so too, but it is too confusing to someone who is not that advanced. If we didn't say it, what is the chance an advanced camper will run into a problem?
It likely wouldn't - though I also haven't seen much mention of beginners who do have confusion.
I agree that I haven't seen questions on this either but since the rule-of-thumb is to not include undefined technical terms in the challenges and projects, we should do something about this one. (Either define it or drop it)
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: In these files, the text should be updated to . Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My chart should have a title with a corresponding `id="title"`.

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My choropleth should have a title with a corresponding `id="title"`.

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My heat map should have a title with a corresponding `id="title"`.

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** I can see a title element that has a corresponding `id="title"`.

Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My tree map should have a title with a corresponding `id="title"`.


Question:
CSS Learn Typography/Nutrition Label: Step 31 “Create an .small-text selector and set the font-size to” the “an” should actually be an “a”. Windows 11/ Chrome browser Version 110.0.5481.78 (Official Build) (64-bit)
It helps if you use the New Issue template. ! Link to challenge: Suggested correction:
Would you like to solve this issue? Or shall I go for it? Feel free to try
iam new to opensource i love to work on this issue.
An issue with the or 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
To solve this issue, change this line from to Here is the file 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.

The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. <del> Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </del> <ins> Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </ins> # --hints--


Question:
In the multi-file editor, if the preview pane is toggled off and then on again, any output in the console will be cleared. Granted, the user can always check their code again to get the console output back. But I'm assuming this is not intended behavior? Any page using the multi-file editor the Survey Form in the new RWD the Console button so it is showing below the preview. the tests. the Preview button to hide the preview. the Preview button again to show the preview. that the console output resets. Console output should not reset if the preview pane is toggled off/on. No response N/A No response
Here is what I tried, so anyone in the future save time: Changing lowerJaw to JSX didn't help. TabPane change display to , but React doesn't care and preserve the state. if you turn to JSX, so react preserve the state, it won't render at all. monaco wants it to be an element. I don't know if this helps, but I personally think if become JSX, then React can do its thing and preserve the state. I have no idea how to make monaco accept JSX instead of Element, so I am going to stop there, maybe someone else the same issue. Here is the file with the issue Here is the react-wrapper for the monaco, maybe it does have a way to do it
I have looked it more up And I don't think, it is possible to inject JSX element inside the editor. I am maybe wrong, but the easiest solution, is to have the editor in instruction and lowerjaw in different tab, is that possible?
I think the console output is not related to the editor per say. We just need to investigate output, consoleOutputSelector, and consoleOut state in redux store and see at what point it gets reset.

return [ takeLatest(types.executeChallenge, executeCancellableChallengeSaga), takeLatest( <del> [ types.updateFile, types.previewMounted, types.challengeMounted, types.resetChallenge ], </del> <ins> [types.updateFile, types.challengeMounted, types.resetChallenge], </ins> previewChallengeSaga ), <ins> takeLatest(types.previewMounted, previewChallengeSaga, { flushLogs: false }), </ins> takeLatest(types.projectPreviewMounted, previewProjectSolutionSaga) ]; }


Question:
The test fails to catch the difference between an element and class selector The hint is But the first hint should be displayed instead: The regex fails to tell the difference between an element and class selector. No response All No response
We should just use the method on the class to look for . Examples of this can be seen in other tests. An issue with the or 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
Hi My name is Om Bansal and this is my first time contributing to open source can i work on this issue?
Go for it - we will accept the first fully correct PR that fixes the issue.

You should use the `body` element selector. ```js <del> assert.match(code, /bodys*{/); </del> <ins> assert.exists(new __helpers.CSSHelp(document).getStyle('body')); </ins> ``` You should use the `background` property in the `body` selector.


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

userSelector, isOnlineSelector, isServerOnlineSelector, <ins> showCodeAllySelector, </ins> userFetchStateSelector } from '../../redux/selectors';

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

isOnline: boolean, isServerOnline: boolean, fetchState: UserFetchState, <ins> showCodeAlly: boolean, </ins> user: User ) => ({ isSignedIn,

isServerOnline, fetchState, theme: user.theme, <ins> showCodeAlly, </ins> user }) );

showFooter?: boolean; isChallenge?: boolean; block?: string; <ins> showCodeAlly: boolean; </ins> superBlock?: string; t: TFunction; }

superBlock, t, theme = Themes.Default, <ins> showCodeAlly, </ins> user, fetchUser, updateAllChallengesInfo

/> ) : null} <SignoutModal /> <del> {isChallenge && ( </del> <ins> {isChallenge && !showCodeAlly && ( </ins> <div className='breadcrumbs-demo'> <BreadCrumb block={block as string}

challenge => challenge.id === challengeId ); <del> const breadcrumbs = document.querySelector('.breadcrumbs-demo'); showCodeAlly && breadcrumbs?.remove(); </del> return showCodeAlly ? ( <LearnLayout> <Helmet title={`${blockName}: ${title} | freeCodeCamp.org`} />


Question:
This should be a relatively easy fix for a first-time contributor :) This challenge says the first two numbers are 1 and 1 when in fact the first two numbers are 0 and 1. The first few numbers are: 0, 1, 1, 2, 3, 5 and 8 So when you update the text to also check the tests and make sure this doesn't change any of the expected test outcomes. The text should correctly state the first numbers as 0, 1, 1, 2, 3, 5 and 8 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
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 The affected file can be found here:
Hello! I'm a rookie software developer and I'm looking for a "good first issue" to start contributing to open-source projects. So could I be assigned to fix this issue please?

Given a positive integer `num`, return the sum of all odd Fibonacci numbers that are less than or equal to `num`. <del> The first two numbers in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8. </del> <ins> The first two numbers in the Fibonacci sequence are 0 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first seven numbers of the Fibonacci sequence are 0, 1, 1, 2, 3, 5 and 8. </ins> For example, `sumFibs(10)` should return `10` because all odd Fibonacci numbers less than or equal to `10` are 1, 1, 3, and 5.


Question: Currently, the instructions in the module, which happens to be a part of the module ( of the course ), suggest the following as the value of the variable: For the sake of more clarity, I think the value of the variable should be as follows: NOTE: There should a forward slash ( ) before the and should be enclosed within quotes because that particular part is supposed to be a string. The value of the variable should be as follows: NOTE: There should a forward slash ( ) before the and should be enclosed within quotes because that particular part is supposed to be a string. <img width="794" alt="image" src="https://user-"- Device: Laptop OS: macOS 13.0.1 Browser: Chrome Version: 107.0.5304.110 No response_

You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this: ```js <del> absolutePath = __dirname + relativePath/file.ext </del> <ins> absolutePath = __dirname + '/relativePath/file.ext' </ins> ``` # --instructions--


Question:
Originally reported by the editor region doesn't render when camper submits a challenge. https://user- This hide the instruction and lowerJaw, whenever this bug occurs
What browser/OS were you using to trigger this? I'm not able to replicate with either FF or Chrome on Windows/Linux. Or perhaps there is some trick to this that I'm not seeing in the video?
To be honest, I don't think this is a browser specific. she mentioned that chrome was used, my guess is that somewhere in the JavaScript files, it has if statement that stop editor region from rendering, because old PRs do account for this failing. The true solution is to findout, what changed and what isn't pleased. Otherwise, we can add , that fallback to a basic component with instruction and submit button. Or we can add another tab in the upperJaw, for instruction if editor region is It won't have editor region, but it's better than the current nothing. Sorry, I can't include all of it, but here is the discord discussion.
my user agent info (on Windows 11) User Agent is: <codeMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code
Here's a report on the forum with a similar issue (but on a different project) and the user had to move to their cell phone to complete the step and a recent one with the same issue but again, different project and step:
This should hopefully be fixed when gets in.
Here is a brand new report of someone having the same issue on the forum
Another report of this issue:
Usually, people can fix it by clearing the cache and closing and reopening the browser. Switching browsers also helps (likely for the same reason, fresh code). I get the feeling that this bug might not be reproducible in dev mode. It also seems like skipping steps and returning to them later is somehow involved. But I'm not sure what the exact steps are. Is there any information we can gather from people having this issue that can help debug it? Should we try sending people to this issue so we can collect information?
not reproducible. Feel free to open this issue again if it occurs.
I don't think this is completed just because we can't reliably reproduce it. It still happens, I have had it happen recently in one of the Python curriculum steps. I still have the step in the bugged state. 'm not sure it is reproducible in dev mode. 'm almost positive skipping steps, going back using the browser history (back button), and other such actions are involved. only affects a single step at a time. It is not like it happens and all your steps are broken. The one before and the next are fine. the cache is not enough you have to clear the cookies and other site data (Chrome wording). The storage (, etc.) is cleared when doing so. localStorage: Chrome bugged - and are empty Chrome working - and have content. Is there anything else I should look at? I'm almost positive if I clear the localStorage the bug will go away. But before I confirm that I will keep it as is in case someone has a suggestion for anything I should post that might help debug this. Fairly sure, the order of the event was I skipped a step forward and used the back button. But I can't really remember and I don't know if I did anything else. I suggest we keep this open to acknowledge the issue. As I suggested, it might be helpful if we gather information from people to help debug it.
Weird, I just randomly reproduced it in my test browser. Clearing the fixed it. I can do it reliably. With the dev tools open, completed the challenge, reset it, and resized the window by dragging the border. Edit: it is on this step It looks like the same bug but it is triggered by the layout change which I hadn't seen before. I'm guessing the reload when going back to the previous challenge can trigger it as well.
without your reliable way to reproduce, none of this would be possible. My findings doesn't show that submitting is necessary for the problem to appear. It's all in resetting challenge, with a twist. It's possible this is still not the original problem, but looking the same and caused by something different. Reproducing: anything in the initial contents. challenge. and are empty - invalid. This is the point when error can appear. everything still looks okay. At this point: If anything is modified in editor contents - and are going back to normal. Crisis averted! Any action that makes editor reload (if that's right word here) results in missing editable region. This includes layout change as shown above. More code involved rundown: is reset. action is performed - and boundaries are filled from seed. prop is set to . of triggers effect is called. It changes the value (contents) of the editor , to the initial text contents. triggers of the Monaco editor. updates props of the challenge. Because the function uses the current state of the , which just had contents changed. There's no editable regions (decoration ranges) that are relevant for that at this time. Therefore is empty array. is performed, writing empty and to props for the challenge. 'm not entirely sure how's the timing for the other calls from the change effect. That effect triggers the change of . My tests suggests that is still when executes. is laying in wait.

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


Question:
Similar to issue Please also update another step that has the same issue and should get a similar fix: The sentence: "will only return Yes if num is greater than 5 and less than 10. The same logic can be written as:" should be changed to: "This will only..." (adding This is enough to fix it as a reference to the previous code block) And similarly for this step as well: Multiple As described above No response N/A No response
Proposed change: Question - do we use or for string literals?
"yes" i think
Please assign this issue to me i think can fix this and make my first contribution to open source
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.
I have created a pull request, what should i do next ?(It's my first contribution, don't mind my stupid questions please)

Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (`&&`) returns `true` if and only if the <dfn>operands</dfn> to the left and right of it are true. <del> The same effect could be achieved by nesting an if statement inside another if: </del> <ins> The same effect could be achieved by nesting an `if` statement inside another `if`. </ins> ```js if (num > 5) {

return "No"; ``` <del> will only return `Yes` if `num` is greater than `5` and less than `10`. The same logic can be written as: </del> <ins> This code will return `Yes` if `num` is greater than `5` and less than `10`. The same logic can be written with the <dfn>logical and</dfn> operator. </ins> ```js if (num > 5 && num < 10) {

The <dfn>logical or</dfn> operator is composed of two pipe symbols: (`||`). This can typically be found between your Backspace and Enter keys. <del> The pattern below should look familiar from prior waypoints: </del> <ins> The pattern below should look familiar from prior waypoints. </ins> ```js if (num > 10) {

return "Yes"; ``` <del> will return `Yes` only if `num` is between `5` and `10` (5 and 10 included). The same logic can be written as: </del> <ins> This code will return `Yes` if `num` is between `5` and `10` (`5` and `10` included). The same logic can be written with the <dfn>logical or</dfn> operator. </ins> ```js if (num > 10 || num < 5) {


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

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


Question:
When I learned the JavaScript,I saw this expression "Nearly every object in JavaScript has a prototype property which is part of the constructor function that created it.", I give me a vibe that "All objects in JavaScript have prototype property". I don't know if this is my misunderstanding, If not , correct it It will bring great misleading to novices. Correct it into below “Nearly every object in JavaScript has a constructor that created it ,and this constructor function has a prototype property.” No response Device: [Laptop] OS: [MacOs 13.2] Browser: [Chrome] Version: [110.0.5481.177] No response
Thank you for taking the time to open this. I am not sure what you mean by this. I am not sure how you interpret "all objects" from the words "nearly every object" Aside from that, I suggest we remove the sentence completely. It does not do much, and is incorrect: I believe the sentence is referring to some primitives like which do not have a property . However, these are not objects, unless referring to the . man, js is confusing
Sorry, I am not good at English.I didn't expect MDN to have a similar expression, because I didn't read the English version before.By the way, you just said that this expression is incorrect and gave you your thoughts I remember that not only some primitives like number do not have a property prototype, but also an object like this does not have a property prototype too. <img width="276" alt="image" src="https://user-"It seems that only functions have a property prototype.
All JavaScript objects have prototypes - not just functions: Hope this clarifies
I agree with - that sentence is confusing at best. I vote we remove it.
Sorry to reply your so late. Well, I think I may be aware of the key to the problem. I just looked at the definition of Property. Property included three parts: key value some attributes I used to think that Property only refers to the key. Okay, I admit that I have always been wrong before. Then I looked at the definition of Prototype again, but unfortunately I did not find a very clear definition. I only saw the following sentence I seem to understand Prototype as an object, it does not contain Key, right? If so, The Property cannot be put together with Prototype, because Property contains Key + Value + Attributes, but Prototype is just a value, and it is an Object Value. Although there is such an expression in MDN: But there is also such a note below: This really makes me feel confused.
I suggest you ask your questions on . To summarise: Everything in JavaScript is an object. except for some primitives Every object has a prototype Prototypes are objects You cannot access an object's prototype by using , because the prototype is not explicitly named Often, the prototype is called , in which case it is possible to access it using If you have any more questions, please head over to the forum. A Github issue is not the best place for such discussion.
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 Affected file: Changes to Close: Remove this sentence from the instructions (description):

console.log(canary.numLegs); ``` <del> Since all instances automatically have the properties on the `prototype`, think of a `prototype` as a "recipe" for creating objects. Note that the `prototype` for `duck` and `canary` is part of the `Bird` constructor as `Bird.prototype`. Nearly every object in JavaScript has a `prototype` property which is part of the constructor function that created it. </del> <ins> Since all instances automatically have the properties on the `prototype`, think of a `prototype` as a "recipe" for creating objects. Note that the `prototype` for `duck` and `canary` is part of the `Bird` constructor as `Bird.prototype`. </ins> # --instructions--


Question:
It isn't a huge deal, but I do think the camper has a point, see the forum thread for more info. I think updating the example code with something less ambiguous wouldn't be a horrible idea. Current example New example (I can't think of anything better right now, you get the point). Less ambiguous example code that does not involve letter case logic or identifiers with the word in it when teaching about and . 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]
I agree, the example is unnecessarily confusing. I have submitted a pull request that uses a classic fruit example. The console log is also more explicit on what is being selected. Additionally, may I suggest that we also change the instructions to be more explicit? So instead of: it'll be something like:Additionally, additionally, may I also suggest we expand the explanation on strict equality testing? So add a simple sentence like: "Strings with different cases will be treated as different values"
I guess the conditions can be clarified, but I don't remember seeing this being a problem. That isn't how strict equality works. It has to do with type coercion. Letters with different casings always have different values.
Yes I get that, but for this specific example, I just thought it would be good to keep it simple. On second thought, the explanations / instructions are good enough. Lets leave it as it is.
hello can you please tell me why my pull requests are getting blocked when I am trying to close an issue

Here is an example of a `switch` statement: ```js <del> switch (lowercaseLetter) { case "a": console.log("A"); </del> <ins> switch (fruit) { case "apple": console.log("The fruit is an apple"); </ins> break; <del> case "b": console.log("B"); </del> <ins> case "orange": console.log("The fruit is an orange"); </ins> break; } ```


Question:
It would be nice if we allowed the camper to log out the result without having the last test fail because of it. One option might be to use code comments as delimiters to help make the regex more targeted. The camper should be allowed to log out the result without failing with the correct code. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22]
We could update the test to check for the assignment operator, instead of just a variable reference:
To fix the issue change the third test: To what Naomi suggested Here is the file for the challenge: 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.
Can I work on this issue ? It would mean a lot
Go for it.
Can I work on this issue?

The quotient variable should only be assigned once ```js <del> assert(code.match(/quotient/g).length === 1); </del> <ins> assert(code.match(/quotients*=/g).length === 1); </ins> ``` # --seed--


Question:
For me, both in Chrome and Edge (without any extensions) the cursor position is off by some characters (a tab?). It seems to happen after reloading the page (hard refresh) or even directly navigating to a challenge URL. to and complete the step. to the next challenge and check the cursor position, it should be fine. the page (hard refresh) and check the cursor position again, it is now off. ! Doesn't seem to happen in Firefox or when I tried it in the JS curriculum. Is this reproducible for anyone else? The only PR I found briefly looking at the commits for the editor is Might be causing this? Edit: I tried reverting the code from the PR and it didn't seem to help so I'm guessing that isn't it. Honestly not sure what is causing it but it seems to have happened between the Feb 28 build and the later production build. Edit 2: For anyone reading this looking for a fix. A normal (soft) page refresh should fix it. Firefox seems unaffected. The cursor position should not be borked after a page reload. 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] Forum:
couldn't replicate on edge version 111.0.1661.44 on chrome version 111.0.5563.65, I did have the issue tho, with some area isn't formatted correctly This picture from step 4 on cafe menu !
Make sure it is a hard refresh. I didn't think it would matter but it seems like it does. I will update the repro steps.
Forum report
Yeab, still show sometime in chrome , couldn't replicate on edge Don't need to reload btw, Edit: I forgot to mute system sounds
Added another forum report on this bug. I'm actually surprised we have not yet seen more reports of this bug. But I'm guessing it is because it doesn't seem to trigger when just going through the curriculum using the normal ways of advancing between challenge steps. But man when this bug hits you it makes helping with challenges on the forum an absolute nightmare. I pretty much have to use Firefox (which I don't mind).
Thanks for opening this issue, and for all of the helpful details you provided to reproduce the issue. We've had one report of this issue in the support inbox so far. I wasn't able to reproduce the issue in Chrome on macOS, or in Chromium on an Ubuntu 22.04 VM. But I was able to reproduce the issue with your steps in Chrome on a Windows 11 VM. Once I did opened a challenge in Chrome on Windows and did a hard reload, the cursor position was off when I clicked into the editor or used the arrow keys to move around. The only fix I found is to do a regular reload of the page. Clicking the reset button in the UI, doing a hard reload, or right clicking on the reload button and selecting "Empty Cache and Hard Reload" didn't work on my end. Granted the VMs are ARM versions of Ubuntu and Windows running through Parallels, so that might have some effect on reproducing the issue and the workaround. if you do a regular reload of the page, is the cursor position fixed? Or is the position still off?
You are right, a normal reload does seem to fix it, at least 99% of the time (sometimes it takes two reloads). I guess because the opposite is usually the case I didn't even check it. I didn't think to look before, but the offset of the cursor position in the CSS is different and if you navigate using the arrow keys it doesn't jump the same amount of pixels between keyboard inputs (bugged cursor vs normal).
Wow, this is a weird bug. Just confirming as well that the only time I can trigger this is by doing a hard refresh (Shift + Reload button) using either Chrome or Edge on Win11. Firefox does not seem to be affected on Win11. None of these browsers seem to be affected on Linux. A soft refresh fixes the problem.
Had this happen to me too. Refreshing didn't help, had to move to Firefox for a while.
Could you give us more details about your setup, What browser were you using when you experienced this issue, and what version was it? Also, which OS are you running?
Chrome, latest version, Windows 10

accessibilitySupport: accessibilityMode ? 'on' : 'auto' }); <ins> document.fonts.ready .then(() => monaco.editor.remeasureFonts()) .catch(err => console.error(err)); </ins> // Focus should not automatically leave the 'Code' tab when using a keyboard // to navigate the tablist. if (!isMobileLayout || !isUsingKeyboardInTablist) {


Question:
Step 96Passed Give wave four waypoints starting at 10%, and incrementing by 10%. tests allow duplicate waypoints for the four required percentages. tests allow other waypoint values not specified in the instructions. wave { 10% { } 20% { } 10% { } 30% { } 10% { } 40% { } 10% { } 50% { } } When I read the instructions, I thought it said do four wave points starting at ten and add ten to each one. Once I failed. I calculated it to do each ten and add ten percent to each one after. I guess even though I did not read the instructions the way they were adviced I found a bug. I passed and when I went to next step it automatically fixed my mistake and removed the 50% also. 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] The instructions from what I read confused me to do four tens and add ten percent under each one. I was able to find the bug due to this so yay I am pleased to help. By doing a total of four I was able to add 50 percent, on the last one too. My suggestion to fix the sentence on instructions, would be to not say make four waves starting at ten. Instead maybe you could say make four waves start at 10 percent and then for the rest add ten percent to each one for a total of four waves only.
We should add new test with hint as following Here is the test 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.
Can I work on this ?
go for it. Edit: btw if you solve one of the two issue, leave the other for first timer.
This test should be at the last of the other tests right? I mean after completing the other tests. Checking for 4 wavepoints should be the last one right? like this : !
Good point , if it's earlier it would trigger before the other, and wouldn't provide coherent hints for different issues.
, I am a first-timer so I do not really know where to make these changes . Also do I need to add the logic using jest or can I just add it to the call-back function of the event listener of that button which submits the user input for that challenge. can i assist you ?
Im working on this. Find another issue.
I have made the changes (addition of code which is mentioned in the above screenshot) in this file : ! This should work now right?
yeah you can work since obviously you got it assigned to yourself first . I am just here to learn . I just want to get familiar with the workflow that's it .

assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); ``` <ins> You should have 4 waypoints in your keyframe. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4); ``` </ins> # --seed-- ## --seed-contents--


Question:
On the initial loading of a Step the preview is showing in the preview pane, but if you either open the preview in the pop-out window or toggle the preview pane off/on then the preview does not load again. All Steps in New RWD preview in pop-out window (preview does not load) page Preview button to toggle preview pane off/on (preview does not load) Preview should load in both pop-out window and after the preview pane has been toggled off/on. No response Verified with Chrome/Firefox on both Linux and Win11. Possibly related to issue , but I think this is newer and slightly different.
Just discovered that if you make any change in the editor (such as adding a single space) then the preview will refresh and display again. But you have to do that every time you either open the pop-out window or toggle the preview pane.
When the preview is blank the iframe attributes are not updated either (which makes sense I guess, it looks to be the default values). Blank before updating: After updating: It feels like a state issue.
The preview also disappears if you toggle the Instructions on any of the certification projects.
Yes, that's a separate issue. I dig around at this a bit, seems to have caused the problem. Before it, these issues aren't present.

}; const StepPreview = ({ <del> disableIframe }: Pick<PreviewProps, 'disableIframe'>) => { </del> <ins> disableIframe, previewMounted }: Pick<PreviewProps, 'disableIframe' | 'previewMounted'>) => { </ins> return ( <Preview className='full-height'

savedChallenges, isChallengeCompleted, output, <del> executeChallenge </del> <ins> executeChallenge, previewMounted </ins> }: ShowClassicProps) { const { t } = useTranslation(); const [resizing, setResizing] = useState(false);

showToolPanel: false })} notes={<Notes notes={notes} />} <del> preview={<StepPreview disableIframe={resizing} />} </del> <ins> preview={ <StepPreview disableIframe={resizing} previewMounted={previewMounted} /> } </ins> testOutput={ <Output defaultOutput={defaultOutput} output={output} /> }

isFirstStep={isFirstStep} layoutState={layout} notes={<Notes notes={notes} />} <del> preview={<StepPreview disableIframe={resizing} />} </del> <ins> preview={ <StepPreview disableIframe={resizing} previewMounted={previewMounted} /> } </ins> resizeProps={resizeProps} testOutput={ <Output defaultOutput={defaultOutput} output={output} />


Question: I've come across two forum posts from Safari users in the past few days saying that they can't pass step 47 even though their CSS is correct. Based on the hint they are getting, the test that is not passing is: I'm wondering if Safari has recently changed the string being returned for the border properties when set to ? I don't have a mac so I can't test this for myself. Opening this issue with the hopes that a Safari user can figure out what is going on here. Should be tested on a very recent version of Safari. This is the correct CSS but it is apparently not passing for Safari users. Correct CSS should pass. No response For both posters, user agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15 No response

```js const borderBottom = new __helpers.CSSHelp(document).getStyle('fieldset:last-of-type')?.borderBottom; <del> assert(borderBottom === 'none' || borderBottom === 'medium none'); </del> <ins> assert(borderBottom === 'none' || borderBottom === 'medium none' || borderBottom === 'medium'); </ins> ``` # --seed--


Question:
When the user uses FreeCodeCamp on narrow screens like the Samsung galaxy fold, the FreeCodeCamp logo overlaps with the drop-down menu button and profile picture at the top of the page. to '' the developer tools dimensions select "Galaxy fold". the .png example in the screenshots section As a suggestion in this type of screens <= 280px * 653px we could remove the FCC fire logo or remove the profile picture to follow the responsive design rules. ! Device: [Laptop, Samsung Galaxy Fold, Pc] OS: [Android 12L ,Windows 11] Browser: [Chrome, OperaGx] No response
Bruce mentioned the possibility of changing the logo in this PR too I am kinda in favor, because of how many people started to associate freeCodeCamp with fCC, so change in logo may be possible. Note: that screens with size lower than aren't required to be supported as mentioned in his comment as well.
btw, the logo is on higher stack above the menu, so it isn't possible to click the menu. If we aren't changing the logo, changing the layout is the other option.
Hi What do you think about leaving only the "FreeCodeCamp" logo and removing the symbol? I think it would look more aesthetic xD and all the space would be fixed.
I think a part of the menu will still be blocked , but I hope I am wrong. Your suggestion may be better than fCC, but I don't know the workflow on removing and how important it's. Another dev or prolific contributor with more experience can indicate how important is the glyph.
I have solved this issue by dropping the fire icon. This is how it looks like. https://user-
Hey If you are working from a mobile Android device we recommend downloading the freeCodeCamp mobile app, which has a good mobile experience for the Responsive Web design certification.
Hey Thank you for making this change, although this works, it is in violation of our style guidelines. Please see them here: https://design-style-
yeah, I was thinking that it will go against the guidelines. I think putting the "sign in" button inside the "hamburger menu" for small screens can be a possible solution.
If I am reading the guidelines correctly then just the glyph can be used. I'm sure the app is fine, but the web-based version should provide just as good an experience as the mobile app or we are doing something wrong. Also, just to be clear, since I might have started this in the first place, I am not insisting in any way that we adjust the header for very small widths. It was just an offhand suggestion in another PR that was somewhat related.
Yes. It probably wouldn't hurt to have a breakpoint that switched to the glyph, though I feel like this has been brought up (and turned down) before? might have more insight.
Hello, I am available to work on this issue. I believe I can solve this up you can Assignees the issue to me
I have resolved the Navbar logo responsiveness bug in the Galaxy Fold This is how it looks like.And i can Make a PR !
diff my name is vivek
diff my name is vivek my name is vivek yadav
We could go with the glyph or make the logo a bit more responsive. Either way would work.
Because there are 4 PRs opened doing the same thing, I want to clear the requirement to close this issue. The CSS solution, the issue is cased by the existing property of in , removing it and refactoring the layout of the navbar, will sort the issue as shown below, without the need to add another break point. Why am I against adding a break point? because it's a solution to a side effect and not the solution to the real cause of the issue The HTML solution, use element with fallback to glyph SVG. You can find the glyph in the .
For context, either solution is an enhancement to the navbar, so if a PR is fixing the CSS, while the other is changing the picture element, I wouldn't mind approving both, as both will be an enhancement to the current navbar. But maybe it's better to choose one option, before opening this for contribution so I am pushing it to triage again.
Shouldn't the element be conditionally rendered using the component instead of just being empty? That way it won't push the logo and the logo doesn't have to be position absolute. Code we have now wrapping the element instead. I only looked at this briefly so I will admit I might have missed something. Edit: I made a PR just to show what I mean.
Yeab, you are correct.

} #universal-nav-logo { <del> display: flex; position: absolute; </del> padding-top: 0.2em; <del> top: 0; </del> } .expand-nav {

className={`universal-nav${displayMenu ? ' expand-nav' : ''}`} id='universal-nav' >  <div className={`universal-nav-left${displayMenu ? ' display-search' : ''}`} > <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media>
   <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}> <div className={`universal-nav-left${ displayMenu ? ' display-search' : '' }`} > {search}
 </Media>  <Link id='universal-nav-logo' to='/learn'> <NavLogo /> </Link>


Question:
The wording on this step is a bit awkward. Based on , the wording isn't quite accurate. This resulted in the camper writing the following code: I'm not sure how to better describe this, tbh. No response System info isn't relevant for a verbiage issue (: No response
Agreed, that is clunky. Just to get the ball rolling.
is anyone working on this, but i can take this up
Hey there, This issue is still under discussion and has not been opened up for contribution yet.
Hi there, I read through the issue related to the wording in step 5 of the 'Learn CSS Colors by Building a Set of Colored Markers' challenge, and I think I might have a suggestion for how to improve the wording. Here's a revised version of the step that I came up with: 'Add a new meta element for each attribute that you want to specify. To specify the viewport attributes, add the following meta element to the head of your HTML document: <meta name='viewport' content='width=device-width, initial-scale=1.0'' I hope this helps clarify the step for other campers. Let me know if you have any feedback or if there's anything else I can do to help with this issue.
What about :
Simpler language is better. Complex sentence structure is harder for learners (and non-learners tbh) to understand. I like wording, as its close to MDN's. We really need to go on a linguistic simplification campaign though the lessons. I just haven't had the time to do so.
I like this wording, it's much clearer than the current instructions. Can I open a PR with these changes?
What did we finalize?
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: The of the challenge should be updated to the following text: 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.

# --description-- <del> You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify. </del> <ins> You can have multiple self-closing `meta` elements on a web page. Each `meta` element adds information about the page that cannot be expressed by other HTML elements. </ins> Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.


Question:
In chapter, we have files that run scripts when the is finished, it use and for this, we can do the same here to solve the issues related to installing needed files, copy and stuff a like, and provide a easier way to setup the curriculum for newer developers. This should stop issues which these PRs try to solve, like and , that are related to setting up freeCodeCamp. Here is the file in chapter , for more context.
I dislike post/pre -install scripts a lot. Actually, I dislike most life-cycle scripts. However, I would be fine with adding a script. Essentially, what is missing with the seed step is:
can we not add to the npm script?
Adding it to the postinstall script would duplicate the run in the CI and deployment pipelines, since it is also included in prebuild. I'd lean more toward Shaun's solution.
I don't mind, as long as the issue is solved, one more agreement and we can open it for contribution.
I see what you mean, it does add a bit of an overhead. It does solve this particular issue albeit with a bit of an overhead. I am not sure of the overall impact, but I'd presume it is minimal? I am happy to re-write it to what was suggested above. But does it make more sense for it to be part of the install lifecycle () script or the develop () lifecycle? let me know your thoughts. Thanks.
I have no idea, I don't meddle with the config files, or scripting tools. This is outside my scope, I just hate that new contributors are facing issues installing the repo.
It should be as a script, like Shaun suggested:
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.

"lint:ts": "tsc && tsc -p config && tsc -p tools/ui-components && tsc -p utils && tsc -p api", "lint:prettier": "prettier --list-different .", "reload:server": "pm2 reload api-server/ecosystem.config.js", <ins> "preseed": "npm-run-all create:*", </ins> "seed": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seed-demo-user", "seed:certified-user": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seed-demo-user certified-user", "serve:client": "cd ./client && pnpm run serve",


Question:
Please check this commit: There is a missing }) on line 524! Should look like this: ! Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: The intended change appears to be: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi is anyone working on this issue? If not can I fix it?
Thanks for mentioning the issue. Its seems really easy to fix and I see some pull requests are already there. I am also looking for my first contribution but as per the ethics I should not create pull request for this issue.
Hi, is it still open can i work on it

date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" <ins> }).replaceAll(',', '') </ins> }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST',


Question:
Currently, the instructions within the module happen to be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes. Consider : For the sake of clarity, the above instructions should also explicitly point out which bits within the given code snippet are vendor prefixes, instead of just simply mentioning the word vendor prefixes within the instructions and expecting the users to figure out themselves as in which parts within the given code snippet are vendor prefixes. The instructions within the module should be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes ( , , etc ). Consider the property below: <img width="522" alt="image" src="https://user-"- Device: Laptop OS: macOS 13.0.1 Browser: Google Chrome Version: 107.0.5304.110 Would love to get some feedback from other members before I proceed ahead with making a PR for this issue. Thanks !
I would be fine with it being more explicit. Not sure if it is really needed but it wouldn't hurt. As an aside, using vendor prefixing to teach Mixins isn't a bad idea but the challenge just hasn't aged well. New features are now hidden behind feature flags and the standards have moved away from vendor prefixing. The box-shadow example seems very outdated.
Hey thanks for sharing the article. After reading the article which you have shared, I can think of the following options: Get rid of vendor prefixing from this challenge ( since the main focus of this challenge is to educate the users about Mixins ) and create a separate challenge to teach users about vendor prefixing. Get rid of the property in this challenge and instead, use such a CSS property in the example, which requires vendor prefixing ( came across an that lists some CSS properties that require vendor prefixing as of 2021 ) Let me know what you think about it.
I wouldn't mind if this was rewritten but everything except parts of the challenge text would need to be changed (the challenge text, the example, the seed code, the requirements, the tests). Motivation for rewriting the challenge: challenge is introducing an unnecessary topic of vendor prefixing. information about vendor prefixing is out of date. Suggestion: Give a simple example in the challenge text. The mixin will take a font size and a bottom margin, it will reset all other margins. Seed code, in plain CSS to help make the challenge less copy-pasty. Solution/requirements
Thanks for the suggestion I'm happy to work on this issue. I will make a PR for this issue shortly, cheers !
You may want to wait with the PR until we get more consensus. You can start working on it but I can't guarantee that it will be approved if others disagree with the change.
Thanks for letting me know if that's the case, then I will wait and see what others think about the suggested change.
Let's go ahead and open this up, following lasjorg's suggestion above to rewrite the challenge. The entire front-end libraries certification is pretty outdated, and next on our roadmap for a complete overhaul. But this is a pretty low-hanging fruit to hit now.
Hi there, first of all I just want to thank you for the opportunity. This is my first time contributing and I decided to have a go at this issue and this is my attempt: As per suggestions, I removed any references to vendor prefixing as they are unnecessary and outdated. In this rewrite, I kept the general structure of the challenge text but modified to suit the new example code. However, I didn't use the example given by as I think it'll be better to build on the previous challenges. So I did my own simple example about individual styles on headings, which is covered in previous challenges. As for the task itself, I used suggestion with some add-ons. Tagging for visibility. Thank you! :)
Please open a pull request if you'd like your changes reviewed.
Oh right, I have opened a pull request however, I haven't tested the new code at all. Could someone point me to a guide on how to do that?
Hi, I've opened a new PR because I messed up my commit history and the previous PR got closed. Very sorry for the inconveniences, please let me know if there's anything I need to fix. Thank you!

# --description-- <del> In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet. Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: </del> <ins> In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. </ins> ```scss <del> div { -webkit-box-shadow: 0px 0px 4px #fff; -moz-box-shadow: 0px 0px 4px #fff; -ms-box-shadow: 0px 0px 4px #fff; box-shadow: 0px 0px 4px #fff; </del> <ins> @mixin reset-list { margin: 0; padding: 0; list-style: none; } nav ul { @include reset-list; } ``` Compiles to: ```css nav ul { margin: 0; padding: 0; list-style: none; </ins> } ``` <del> It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: </del> <ins> Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. </ins> ```scss <del> @mixin box-shadow($x, $y, $blur, $c){ -webkit-box-shadow: $x $y $blur $c; -moz-box-shadow: $x $y $blur $c; -ms-box-shadow: $x $y $blur $c; box-shadow: $x $y $blur $c; </del> <ins> @mixin prose($font-size, $spacing) { font-size: $font-size; margin: 0; margin-block-end: $spacing; } p { @include prose(1.25rem, 1rem); } h2 { @include prose(2.4rem, 1.5rem); </ins> } ``` <del> The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive: </del> <ins> You can make arguments optional by giving the parameters default values. </ins> ```scss <del> div { @include box-shadow(0px, 0px, 4px, #fff); </del> <ins> @mixin text-color($color: black) { color: $color; } p { @include text-color(); /* color: black */ } nav a { @include text-color(orange); </ins> } ``` # --instructions-- <del> Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. </del> <ins> Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. </ins> # --hints-- <del> Your code should declare a mixin named `border-radius` which has a parameter named `$radius`. </del> <ins> You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. </ins> ```js <del> assert(code.match(/@mixins+?border-radiuss*?(s*?$radiuss*?)s*?{/gi)); </del> <ins> assert.match(code, /@mixins+shapes*(s*$w,s*$h,s*$bg-colors*)s*{/gi); </ins> ``` <del> Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `width` property that uses the `$w` parameter. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:$radius;/gi) ); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /width:$w;/gi); </ins> ``` <del> Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `height` property that uses the `$h` parameter. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/-moz-border-radius:$radius;/gi) ); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /height:$h;/gi); </ins> ``` <del> Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `background-color` property that uses the `$bg-color` parameter. </ins> ```js <del> assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:$radius;/gi)); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /background-color:$bg-color;/gi); </ins> ``` <del> Your code should include the general `border-radius` rule that uses the `$radius` parameter. </del> <ins> You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/border-radius:$radius;/gi).length == 4 ); </del> <ins> assert.match(code, /#squares*{s*@includes+shape(s*50px,s*50px,s*reds*)s*;s*}/gi); </ins> ``` <del> Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. </del> <ins> You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. </ins> ```js <del> assert(code.match(/@includes+?border-radius(s*?15pxs*?)s*;/gi)); </del> <ins> assert.match(code, /#rect-as*{s*@includes+shape(s*100px,s*50px,s*blues*)s*;s*}/gi); ``` You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. ```js assert.match(code, /#rect-bs*{s*@includes+shape(s*50px,s*100px,s*oranges*)s*;s*}/gi); </ins> ``` # --seed--

```html <style type='text/scss'> <ins> #square { width: 50px; height: 50px; background-color: red; } #rect-a { width: 100px; height: 50px; background-color: blue; } </ins> <del> #awesome { width: 150px; height: 150px; background-color: green; } </del> <ins> #rect-b { width: 50px; height: 100px; background-color: orange; } </ins> </style> <del> <div id="awesome"></div> </del> <ins> <div id="square"></div> <div id="rect-a"></div> <div id="rect-b"></div> </ins> ``` # --solutions-- ```html <style type='text/scss'> <del> @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } #awesome { width: 150px; height: 150px; background-color: green; @include border-radius(15px); } </del> <ins> @mixin shape($w, $h, $bg-color) { width: $w; height: $h; background-color: $bg-color; } #square { @include shape(50px, 50px, red); } #rect-a { @include shape(100px, 50px, blue); } #rect-b { @include shape(50px, 100px, orange); } </ins> </style> <del> <div id="awesome"></div> </del> <ins> <div id="square"></div> <div id="rect-a"></div> <div id="rect-b"></div> </ins> ```


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

# --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 {

} } <del> function countOnline(usersObj) { </del> <ins> function countOnline(allUsers) { </ins> // Only change code below this line // Only change code above this line

# --solutions-- ```js <del> function countOnline(usersObj) { let online = 0; for(let user in usersObj){ if(usersObj[user].online) { online++; </del> <ins> function countOnline(allUsers) { let numOnline = 0; for(const user in allUsers){ if(allUsers[user].online) { numOnline++; </ins> } } <del> return online; </del> <ins> return numOnline; </ins> } ```


Question:
A lot of campers do not understand they have to use the parameters and keep creating an object inside the function. I know this is verbose. Not sure if we need an example that uses a function as well: We might also want to add a call to the function in the seed code Campers should understand the function signature with its parameters and use them properly. 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]
I would be fine changing the description to what you have suggested. Might as well. But, this is after many lessons teaching/involving arguments and parameters. Did we not recently spend time removing a bunch of these?
I think so but I'm not entirely sure why? Seeing the function invocation can help in understanding the function definition. I think we are taking it for granted that they should look at the test output to see the invocation when in fact it is just the test status people look at. Yes, they should know better by now, but they don't. In fact, not understanding parameters/arguments is an overall issue we see. It can not have been reinforced properly because we see it all the time. My best guess is that too many of the challenges have premade functions and in not forcing people to write the function definition and invocation campers are left not fully understanding it.
I think they were confusing Campers . Campers would write their function as though only the example call was what was being tested - they hard-coded based on the seed example call.
I guess that makes some sense but that too points to the same issue. There is a disconnect between writing and running the code.
I like the more explicit instructions. I'm not sure if the sample function call is the right band-aid for learners not understanding what a function call does?
Do you mean the example function or adding the function call to the seed code? I believe it can help with pattern recognition. Seeing the definition and invocation in close proximity can help connect the dots between the parameters and arguments.
There's a non-insignificant number of learners who don't seem to understand much about how a function call works. I'm not sure that giving more examples of the thing they don't understand will target the underlying reason of why they don't understand it. The problem is though, I'm not sure why the idea of a function call's arguments giving values to the parameters is such a mysterious idea for some of the learners.
Because not having the definition and invocation in close proximity throughout the course is part of the underlying problem. The pattern isn't getting reinforced correctly (both through seeing and writing). Not enough functions are written from scratch and we (almost) never require the camper to execute the function with the correct arguments. One exception would be the recursion challenges. The TDD setup is creating a disconnect for beginners and I believe the way the test runner is implemented isn't helping. I have said this before, but I would prefer if the test running was embedded and exposed better in the UI, for example, the way it is on Codewars. It would require explaining the interface in the beginning as it is a bit technical. But the function getting called for the camper is a detail that often is lost until we explain it.

# --description-- <del> Sometimes it is useful to check if the property of a given object exists or not. We can use the `.hasOwnProperty(propname)` method of objects to determine if that object has the given property name. `.hasOwnProperty()` returns `true` or `false` if the property is found or not. </del> <ins> To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` returns `true` or `false` depending on if the property is found on the object or not. </ins> **Example** ```js <del> const myObj = { top: "hat", bottom: "pants" }; </del> <ins> function checkForProperty(object, property) { return object.hasOwnProperty(property); } </ins> <del> myObj.hasOwnProperty("top"); myObj.hasOwnProperty("middle"); </del> <ins> checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false </ins> ``` <del> The first `hasOwnProperty` returns `true`, while the second returns `false`. </del> <ins> The first `checkForProperty` function call returns `true`, while the second returns `false`. </ins> # --instructions-- <del> Modify the function `checkObj` to test if an object passed to the function (`obj`) contains a specific property (`checkProp`). If the property is found, return that property's value. If not, return `"Not Found"`. </del> <ins> Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. If not, return `Not Found`. </ins> # --hints--


Question:
Some users are encountering the error in the linked video. See the forum for more discussion. All Console error messages should clear so users can run code No response various No response
If I revert the change from it seems to fix it.
I am also facing this issue while doing javascript datastructures and algorithms course. The console errors are stuck and the solution is to refresh the page everysingle time.
I also face this issue while doing a JavaScript data structures and algorithms course. The console errors are stuck and the solution is to refresh the page every single time.
Thanks for tracking that down, it was defintiely the culprit.

challengeFile.fileKey === fileKey ? { ...challengeFile, ...updates } : { ...challengeFile } <del> ) </del> <ins> ), isBuildEnabled: true </ins> }; }, [actionTypes.storedCodeFound]: (state, { payload }) => ({


Question: Describe the bug When you try to make api call in the setting page, to change your subscription to Quincy newsletter, you will see a failed API call before the new one. To Reproduce Steps to reproduce the behavior: to 'Email Settings' in on unsubscribe from Quincy news-letter alert show before the success alert shown. Expected behavior Wait until the api fail before showing the alert

</FullWidthRow> <Spacer size='medium' /> <FullWidthRow> <del> <form id='form-quincy-email' onSubmit={handleSubmit}> </del> <ins> <form id='form-quincy-email' onSubmit={e => e.preventDefault()}> </ins> <ToggleButtonSetting action={t('settings.email.weekly')} flag={sendQuincyEmail}