feat(curriculum): add first debugging project to JS curriculum #54622
Conversation
jdwilkin4
added
the
new javascript course
github-actions
bot
added
scope: curriculum
jdwilkin4
added
the
status: waiting review
...rn-basic-debugging-by-building-a-random-background-color-changer/663250b42513ef5975599c49.md
Outdated
Show resolved
Hide resolved
| You should not call the `changeBackgroundColor` function. You should instead assign the function reference to the `onclick` property. | ||
|
|
||
| ```js | ||
| assert.strictEqual(btn.onclick, changeBackgroundColor); |
There was a problem hiding this comment.
Not necessarily blocking, buuuuuut this means that the valid code won't pass:
btn.onclick = (() => changeBackgroundColor());Not sure if we want to account for that.
There was a problem hiding this comment.
I am having a hard time get both solutions to pass with the updated tests
Each additional test I try, I can only get the btn.onclick = changeBackgroundColor to pass but not the other solution.
|
This is a priority for the day. I will drop my suggestions before the end of the day. |
|
Spoke with Oliver and he will look into seeing how we can teach syntax errors and have hints show when syntax errors are present. For now, I will label this as blocked until I hear back from Oliver |
jdwilkin4
added
status: blocked
|
|
||
| A `ReferenceError` is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use `math` but JavaScript doesn't have a `math` object. | ||
|
|
||
| Fix CamperBot's error in the `math.random()` line. Then open up the console to see the error message disappear. |
There was a problem hiding this comment.
| Fix CamperBot's error in the `math.random()` line. Then open up the console to see the error message disappear. | |
| Fix CamperBot's error in the `math.random()` line. Then open up the console to see if the error message disappeared or not. |
There was a problem hiding this comment.
I don't think we should change this to if the error message disappeared or not. Because that implies after making the change, the error message might still be there. But if done correctly, the error message shouldn't be there.
We could change this to be
Fix CamperBot's error in the `math.random()` line and open up the console again.
Because the goal is to show campers that there is an error and get them in the habit of checking console statements. Then have them fix the error. and get them in the habit of checking the console again.
There was a problem hiding this comment.
the code linting looks off, seems as if the css and html tags are not highlighted. can you please check from your end if some syntax is missing or not ?
There was a problem hiding this comment.
I checked and couldn't find anything.
I even copied and pasted the same HTML and CSS from other steps and it is the exact same.
So I don't know why the syntax looks different here.
|
|
||
| # --hints-- | ||
|
|
||
| You should not call the `changeBackgroundColor` function. You should instead assign the function reference to the `onclick` property. |
There was a problem hiding this comment.
| You should not call the `changeBackgroundColor` function. You should instead assign the function reference to the `onclick` property. | |
| You should not call the `changeBackgroundColor` function, instead assign the function reference to the `onclick` property. |
Summary of changes
Currently the new JS curriculum does not have a debugging section like the old one did.
Originally there was going to be project to cover basic debugging, there were issues on how to deal with teaching syntax errors with the current editor. So that project was scrapped.
But we still need to teach debugging. This small project teaches campers how to resolve common issues and read common errors messages like
TypeErrorandReferenceError. They learn this by helping camperbot fix their code.Checklist:
mainbranch of freeCodeCamp.