The furniture repairman finally repaired Tommy’s dresser. I was even mansplained how to use the dresser: “Always open the drawers from the center and not the side.” I’ve never heard of anyone trying to open drawers from the side. That almost seems physically impossible. Why would anyone open drawers from the side? But anyway, the dresser is fixed. There was a part of the dresser that was missing, and Tommy couldn’t use the drawer.
During lunch, I watched RawBeautyKristi. I haven’t watched beauty channels in a while. I watch skincare videos, but I don’t usually watch makeup channels. But I’ve watched her for years, so I thought I’d watch her recent video. I can’t believe that freckle sticks are still a thing. These products typically come in a pencil or pen with a fine tip, allowing users to easily apply small dots to mimic the look of natural freckles. They’ve gained popularity recently as freckles have become a desired aesthetic in makeup trends. It is cute, except I’ve been teased about my freckles when I was younger, and now people are faking them! She applied it well, and it looked like she had freckles.
Coding was fun today. It’s like solving puzzles and building things with your virtual toolbox. Plus, the satisfaction of seeing your code come to life and work as intended is a rewarding feeling. Right now, the code is just for fun. We had to remove all the code we had written and start with the actual code for the binary converter. Which I still cannot count in binary. I can see the pattern, but I’m having a hard time continuing the pattern. I also found that if you Google a number, it will tell you the binary number. That’s the easy way to get the binary number. We have ten digits (0 through 9) in the decimal system. Each digit’s position represents a power of 10. We only have two digits in the binary system: 0 and 1. Each digit’s position represents a power of 2. To convert a decimal number to binary, you repeatedly divide by two and keep track of the remainder. That sounds easy on paper, but my brain has a different story. I can see the pattern and know the equation, but I still have a question mark in my head.
Today, Mimi and Everest are in the office with me. They are finally taking a nap. I must wake them up soon since I want to get on the bike. I’m going to post this now so I can get started on exercising. I need to keep myself motivated to exercise. It takes a lot of work to get that motivation.
JavaScript notes…
————————————
Decimal to Binary Converter steps 35 – 50
Step 35
Within the body of the if statement, set the innerText property of result equal to the string 0. Then, use an early return statement to break out of the function early.
if (input === 0) {
result.innerText = "0";
return;
}
Step 36
Now your decimalToBinary function is complete. Feel free to play around with it.
But there are some ways to improve it. For example, it’s not necessary to keep track of the inputs and quotients. We can clean things up so the function is more efficient.
First, remove everything in the body of the decimalToBinary function. Then, use let to create a variable named binary and assign it an empty string.
let binary = "";
Step 37
Since you’ll want to display the result of the conversion, assign the binary variable to the innerText property of result at the end of the function.
result.innerText = binary;
Step 38
Create a while loop that runs as long as input is greater than 0. Inside the loop, assign 0 to input for now.
Note: Be careful not to trigger the decimalToBinary function before you set input equal to 0 inside the loop. Otherwise, you could cause an infinite loop.
while (input > 0) {
input = 0;
}
Step 39
Recall that, each time the loop runs, input is the quotient of the previous value of input divided by 2, rounded down. Eventually, input is less than 1, and the loop stops running.
You can do this in a single step.
Inside your while loop, set input equal to the quotient of input divided by 2. Also, remember to use Math.floor() to round the quotient down.
input = Math.floor(input / 2)
Step 40
In the previous version of this function, you pushed the remainder of input divided by 2 to binaryArray. Then later you reversed and joined the entries into a binary number string.
But it would be easier to use string concatenation within the loop to build the binary string from right to left, so you won’t need to reverse it later.
First, use the remainder operator (%) to set binary equal to the remainder of input divided by 2.
binary = input % 2;
Step 41
Then, use the addition operator to add the current value of binary to the end of the equation input % 2. This is what will build the binary string from right to left.
binary = input % 2 + binary;
Step 42
To clean things up a bit, wrap input % 2 in parentheses. This can sometimes change the order of operations, but in this case, it just makes your code easier to read.
binary = (input % 2) + binary;
Step 43
Finally, you need to handle cases where input is 0. Rather than update the DOM and return early like you did before, you can update the binary string and let the rest of the code in the function run.
Create an if statement that checks if input is equal to 0. If it is, set binary equal to the string “0”.
if (input === 0) {
binary = "0";
}
Step 44
Awesome. Now you have a more efficient way to convert decimal numbers into binary. After learning a bit about the call stack and recursion, you’ll refactor the decimalToBinary function to use recursion instead of a while loop.
Create a function named a that returns the following: “freeCodeCamp ” + b().
const a = () => {
return "freeCodeCamp " + b();
}
Step 45
Next, create a function named b that returns the following: “is ” + c().
Also, create a function named c that returns the following: “awesome!”.
const b = () => {
return "is " + c()
}
const c = () => {
return "awesome!"
}
Step 46
Finally, call a() from within a console.log() statement to log the output to the console.
console.log(a());
Step 47
In computer science, a stack is a data structure where items are stored in a LIFO (last-in-first-out) manner. If you imagine a stack of books, the last book you add to the stack is the first book you can take off the stack. Or an array where you can only .push() and .pop() elements.
The call stack is a collection of function calls stored in a stack structure. When you call a function, it is added to the top or of the stack, and when it returns, it is removed from the top / end of the stack.
You’ll see this in action by creating mock call stack.
Initialize a variable named callStack and assign it an empty array.
const callStack = [];
Step 48
When your code runs, the a() function is added to the call stack first.
In your callStack array, add the following string: a(): returns “freeCodeCamp ” + b(). This represents the function call and the code that will be executed.
Note: Since the string you’re adding includes double quotation marks, wrap it in single quotation marks (‘) or backticks (`).
const callStack = [ 'a(): returns "freeCodeCamp " + b()' ];
Step 49
Then, since a() calls b(), the function b() is added to the call stack.
Next, add the following string to your callStack array: b(): returns “is ” + c().
Remember that the call stack is a LIFO data structure, so the last function is added to the top or end of the stack, similar to pushing an element into an array.
const callStack = [ 'a(): returns "freeCodeCamp " + b()', 'b(): returns "is " + c()' ];
Step 50
And since b() calls c(), the function c() is added to the call stack.
Add the following string to your callStack array: c(): returns “awesome!”.
const callStack = [ 'a(): returns "freeCodeCamp " + b()', 'b(): returns "is " + c()', 'c(): returns "awesome!"' ];
