Learn Recursion by Building a Decimal to Binary Converter - Step 64

JavaScript
1

Tell us what’s happening:

I completely understand why it is counting down, but why does it count back up? why does the function continue to execute the code after the recursive call has been returned?
I added the string " why is this here" to the console.log after the recursive call in the else part of the loop.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Decimal to Binary Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Decimal to Binary Converter</h1>
    <div class="input-container">
      <label for="number-input">Enter a decimal number:</label>
      <input
        value=""
        type="number"
        name="decimal number input"
        id="number-input"
        class="number-input"
      />
      <button class="convert-btn" id="convert-btn">Convert</button>
    </div>
    <output id="result" for="number-input"></output>
    <div id="animation-container"></div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  background-color: var(--dark-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--light-grey);
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  font-size: 2.3rem;
  margin: 20px 0;
}

.input-container {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.convert-btn {
  background-color: var(--orange);
  cursor: pointer;
  border: none;
  padding: 4px;
}

.number-input {
  height: 25px;
}

#result {
  margin: 10px 0;
  min-width: 200px;
  width: fit-content;
  min-height: 80px;
  word-break: break-word;
  padding: 15px;
  border: 5px solid var(--orange);
  font-size: 2rem;
  text-align: center;
}

#animation-container {
  margin: auto;
  max-width: 300px;
}

.animation-frame {
  margin: 250px auto 0;
  padding: 15px 10px;
  border: 5px solid var(--orange);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 500px) {
  .input-container {
    flex-direction: row;
  }

  #result {
    max-width: 460px;
  }
}

/* file: script.js */
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");

const countDownAndUp = (number) => {
  console.log(number);

  if (number === 0) {
    console.log("Reached base case");
    return;
  } else {

// User Editable Region

    countDownAndUp(number - 1);
    console.log(number + " Why is this here")

// User Editable Region

  }
};

countDownAndUp(3);

const decimalToBinary = (input) => {
  let binary = "";

  if (input === 0) {
    binary = "0";
  }

  while (input > 0) {
    binary = (input % 2) + binary;
    input = Math.floor(input / 2);
  }

  result.innerText = binary;
};

const checkUserInput = () => {
  if (!numberInput.value || isNaN(parseInt(numberInput.value))) {
    alert("Please provide a decimal number");
    return;
  }

  decimalToBinary(parseInt(numberInput.value));
  numberInput.value = "";
};

convertBtn.addEventListener("click", checkUserInput);

numberInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    checkUserInput();
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

Learn Recursion by Building a Decimal to Binary Converter - Step 64

1 Like
2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

There I edited the template

4

that’s because of how Call-Stack of functions work and at the end of your project you will see that you will build that visually using boxes on top of each other so you can understand it better.

but i will try to explain it concisely.

When you call a function, in memory what is called a “stack” your function is loaded in what is like a rectangle box “Frame” to execute.

so, in recursion you call that function again during its execution.

Basically, another rectangle of your function is loaded on top of your existing one and then executed (Notice that your previous rectangle box didn’t finish executing ‘its execution is paused’ cause it’s waiting for the function call to end which is loaded on top of it).

and then if that one on top finishes executing, the below one continues its execution.

I know, it’s a bit hard to understand at first. But don’t worry as you continue in your project you will see that graph you build using rectangles.

You can look at that image and rethink of what you read.

image
image1329×600 76.9 KB

1 Like
5

Thank you very much! That image is helpful.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.