Decimal to Binary Converter FreeCodeCamp Solution

This is a solution to the Learn Recursion by Building a Decimal to Binary Converter challenge on FreeCodeCamp. This challenge focuses on using recursion to convert a decimal number into its binary representation.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Input a decimal number.
• Click a button to convert the decimal number into its binary representation.
• View an animation demonstrating how recursion is used to perform the conversion.

Screenshot

Links

• Live Demo: Live

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavaScript (ES6)
• Recursive Algorithm

What I learned

Working on this project enhanced my understanding of:

• Recursion: Implementing a recursive function to convert decimal numbers to binary and understanding how the call stack works.
• JavaScript Event Handling: Handling user interactions such as button clicks and processing form inputs.
• DOM Manipulation: Updating the content of the page based on user input and displaying both the result and an animation illustrating the recursion process.

Code snippets I’m proud of:

const decimalToBinary = (input) => {
  if (input === 0 || input === 1) {
    return String(input);
  } else {
    return decimalToBinary(Math.floor(input / 2)) + (input % 2);
  }
}

const showAnimation = () => {
  result.innerText = "Call Stack Animation";

  animationData.forEach((obj) => {
    setTimeout(() => {
      animationContainer.innerHTML += `
        <p id="${obj.inputVal}" style="margin-top: ${obj.marginTop}px;" class="animation-frame">
          decimalToBinary(${obj.inputVal})
        </p>
      `;
    }, obj.addElDelay);

    setTimeout(() => {
      document.getElementById(obj.inputVal).textContent = obj.msg;
    }, obj.showMsgDelay);

    setTimeout(() => {
      document.getElementById(obj.inputVal).remove();
    }, obj.removeElDelay);
  });

  setTimeout(() => {
    result.textContent = decimalToBinary(5);
  }, 20000);
}

.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;
}

Continued development

In future projects, I aim to:

• Enhance Recursion Animation: Improve the clarity and detail of recursion animations to better illustrate complex recursion processes.
• Add More Features: Implement additional features such as converting binary to decimal and supporting negative numbers.
• Improve Error Handling: Provide more robust error handling for edge cases and user inputs.

Useful resources

• MDN Web Docs - Recursion - Understanding recursion in JavaScript.
• JavaScript.info - Recursion - A detailed guide on recursion and its applications.
• GeeksforGeeks - Recursion - Helpful explanations and examples of recursion.

Author

• LinkedIn - Yashi Singh

Acknowledgments

A special thank you to FreeCodeCamp for providing this engaging challenge. It was a valuable opportunity to practice and apply recursion in a practical scenario. Thanks to the community for their support and feedback, and to MDN Web Docs for their comprehensive documentation and tutorials.