feat: add decimal to binary converter project #50438

scissorsneedfoodtoo · 2023-05-19T05:33:31Z

Checklist:

I have read and followed the contribution guidelines.
I have read and followed the how to open a pull request guide.
My pull request targets the main branch of freeCodeCamp.
I have tested these changes either locally on my machine, or GitPod.

Closes #XXXXX

Edit: ~~Converted to draft to ensure this doesn't get merged before the tests are in.~~ Will open this up for early feedback now that the tests are passing.

codesee-maps · 2023-05-19T05:35:10Z

👀 Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

…the mock call stack steps

naomi-lgbt

Hey Kris,

Saw this was reverted back to draft, but thought I'd provide early feedback on the instruction copy.

naomi-lgbt · 2023-05-19T21:19:11Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/63db7f4677d06d7500a13321.md

+
+# --description--
+
+<dfn>Recursion</dfn> is when a function calls itself. A good understanding of what recursion is an when to use it can make solving some problems much easier. For this project, you'll build a decimal to binary converter and use recursion to perform the calculations.


Do we want to define recursion before we teach it?

naomi-lgbt · 2023-05-19T21:20:11Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/63e9d64d7439bec882442311.md

+
+# --description--
+
+Use the `.getElementById()` method to get the button element with the id `convert` and store it in a variable called `convertBtn`. Then use the same method to get the `h2` element with the id `result` and store it in a variable called `result`.


Should we combine this with the previous step? Campers should be pretty comfortable with selecting a bunch of elements by now.

naomi-lgbt · 2023-05-19T21:21:13Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/63e9eb5b2328eed3d194b28a.md

+
+Remove the `console.log()` statement from the callback function and add an `if` statement that checks if `e.key` is equal to the string `Enter`. Leave the body of your `if` statement empty for now.
+
+Note: Since the `Enter` and `Return` keys have similar functions, they both have the same value of `"Enter"`.


Suggested change

Note: Since the `Enter` and `Return` keys have similar functions, they both have the same value of `"Enter"`.

Note: Since the `Enter` and `Return` keys have similar functions, they both have the same string value of `Enter`.

naomi-lgbt · 2023-05-19T21:25:41Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/6448d62ce222044458b75931.md

+
+The `keydown` event fires every time a user presses a key on their keyboard, and is a good way to add more interactivity to `input` elements.
+
+Chain `.addEventListener()` to `numberInput`. Pass the string `keydown` as the first parameter, and pass an empty callback function as the second parameter to `.addEventListener()`.


Suggested change

Chain `.addEventListener()` to `numberInput`. Pass the string `keydown` as the first parameter, and pass an empty callback function as the second parameter to `.addEventListener()`.

Chain `.addEventListener()` to `numberInput`. The event listener should listen for `keydown` events and take an empty callback function.

This is the seventh project where campers use event listeners - do we want to take a more vague but thought provoking wording?

naomi-lgbt · 2023-05-19T21:25:57Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/6448e475f904ad580cd7e722.md

+
+Now that your `checkUserInput()` function is set up for testing, you can use an event listener to call the function when users click the `Convert` button.
+
+Chain the `.addEventListener()` method to `convertBtn`. Pass the string `click` as the first parameter, and pass a reference to the `checkUserInput` function as the second parameter to `.addEventListener()`. Remember that function references are not called with parentheses.


Same as step 6 above.

naomi-lgbt · 2023-05-19T22:29:05Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/646477c82475ffaf0c3c0771.md

+
+# --description--
+
+While asynchronous, or <dfn>async</dfn>, code can be difficult to understand at first, it has many advantages. One of the most important is that it allows you to write non-blocking code.


async is technically a reserved keyword in JavaScript. Do we want to define it as a term here? I worry that might get confusing.

naomi-lgbt · 2023-05-19T22:33:05Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/64649c6d77059edf80279a32.md

+
+# --description--
+
+Next, use string interpolation (`${}`) to set the `id` attribute to the `inputVal` property of the current object, `obj`.


Suggested change

Next, use string interpolation (`${}`) to set the `id` attribute to the `inputVal` property of the current object, `obj`.

Next, use string interpolation to set the `id` attribute to the `inputVal` property of the current object, `obj`.

This is the seventh project using template literals - shouldn't need an example.

naomi-lgbt · 2023-05-19T22:34:04Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/64649efb555939e30462c79b.md

+
+# --description--
+
+Add a `class` attribute set equal to `animation-frame`.


Suggested change

Add a `class` attribute set equal to `animation-frame`.

Add a `class` attribute set to `animation-frame`.

naomi-lgbt · 2023-05-19T22:36:51Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/6464a6d98c43acecb8a7867b.md

+decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.
+```
+
+Note that, since the string itself contains double quotation marks, you will need to use single quotation marks for your string value.


They could also use backticks or escape the quotes.

When testing this, probably best to look at the value of the object property:

assert.equal(animationData[2].msg, 'decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack');

naomi-lgbt · 2023-05-19T22:38:43Z

...res-22/learn-recursion-by-building-a-decimal-to-binary-converter/6464b25851863b0a119eb7b1.md

+
+# --description--
+
+Next, you'll remove the paragraph elements from the `div#show-animation` element after the delays you specified earlier.


Suggested change

Next, you'll remove the paragraph elements from the `div#show-animation` element after the delays you specified earlier.

Next, you'll remove the paragraph elements from the `#show-animation` element after the delays you specified earlier.

scissorsneedfoodtoo · 2023-05-21T08:18:40Z

Awesome, thank you for your helpful feedback @naomi-lgbt. I'll address all of your review comments ASAP.

Sembauke · 2023-08-02T10:45:44Z

Hey @scissorsneedfoodtoo, how's this going :) ?

feat: set up project, add steps, and prep for initial review

7164c1c

scissorsneedfoodtoo added 4 commits May 19, 2023 16:43

fix: remove multiline comments, use mock callStack array

45103d8

fix: remove inline comment step and seed code

a99bd89

fix: remove single line comment step and seed code

06e6000

fix: reorder animation objects in animationData to match ordering in …

30ea459

…the mock call stack steps

scissorsneedfoodtoo marked this pull request as ready for review May 19, 2023 12:55

scissorsneedfoodtoo requested a review from a team as a code owner May 19, 2023 12:55

scissorsneedfoodtoo marked this pull request as draft May 19, 2023 15:15

naomi-lgbt reviewed May 19, 2023

View reviewed changes

scissorsneedfoodtoo marked this pull request as ready for review May 21, 2023 08:17

Sembauke added the status: waiting update To be applied to PR if a maintainer/reviewer has left a feedback and follow up is needed from OP label Jun 8, 2023

scissorsneedfoodtoo added the front 3 2023 label Jul 12, 2023

feat: add decimal to binary converter project #50438

feat: add decimal to binary converter project #50438

scissorsneedfoodtoo commented May 19, 2023 •

edited

codesee-maps bot commented May 19, 2023 •

edited

Legend

naomi-lgbt left a comment

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

naomi-lgbt May 19, 2023

scissorsneedfoodtoo commented May 21, 2023

Sembauke commented Aug 2, 2023


		# --description--

		<dfn>Recursion</dfn> is when a function calls itself. A good understanding of what recursion is an when to use it can make solving some problems much easier. For this project, you'll build a decimal to binary converter and use recursion to perform the calculations.


		# --description--

		Use the `.getElementById()` method to get the button element with the id `convert` and store it in a variable called `convertBtn`. Then use the same method to get the `h2` element with the id `result` and store it in a variable called `result`.


		Remove the `console.log()` statement from the callback function and add an `if` statement that checks if `e.key` is equal to the string `Enter`. Leave the body of your `if` statement empty for now.

		Note: Since the `Enter` and `Return` keys have similar functions, they both have the same value of `"Enter"`.


		The `keydown` event fires every time a user presses a key on their keyboard, and is a good way to add more interactivity to `input` elements.

		Chain `.addEventListener()` to `numberInput`. Pass the string `keydown` as the first parameter, and pass an empty callback function as the second parameter to `.addEventListener()`.


		Now that your `checkUserInput()` function is set up for testing, you can use an event listener to call the function when users click the `Convert` button.

		Chain the `.addEventListener()` method to `convertBtn`. Pass the string `click` as the first parameter, and pass a reference to the `checkUserInput` function as the second parameter to `.addEventListener()`. Remember that function references are not called with parentheses.


		# --description--

		While asynchronous, or <dfn>async</dfn>, code can be difficult to understand at first, it has many advantages. One of the most important is that it allows you to write non-blocking code.


		# --description--

		Next, use string interpolation (`${}`) to set the `id` attribute to the `inputVal` property of the current object, `obj`.

	Next, use string interpolation (`${}`) to set the `id` attribute to the `inputVal` property of the current object, `obj`.
	Next, use string interpolation to set the `id` attribute to the `inputVal` property of the current object, `obj`.


		# --description--

		Add a `class` attribute set equal to `animation-frame`.

	Add a `class` attribute set equal to `animation-frame`.
	Add a `class` attribute set to `animation-frame`.


		# --description--

		Next, you'll remove the paragraph elements from the `div#show-animation` element after the delays you specified earlier.

feat: add decimal to binary converter project #50438

Are you sure you want to change the base?

feat: add decimal to binary converter project #50438

Conversation

scissorsneedfoodtoo commented May 19, 2023 • edited

codesee-maps bot commented May 19, 2023 • edited

Legend

naomi-lgbt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scissorsneedfoodtoo commented May 21, 2023

Sembauke commented Aug 2, 2023

scissorsneedfoodtoo commented May 19, 2023 •

edited

codesee-maps bot commented May 19, 2023 •

edited