Skip to main content

Decimal to Binary Converter

Decimal to Binary Converter Project Preview

The Project​

Interactive decimal-to-binary converter developed with recursive JavaScript functions. An application that demonstrates the power of recursion through numerical conversion, complete with call stack animation to visualize the recursive process.

Source Code​

<!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 <br />
      Converter
    </h1>
    <section 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>
    </section>
    <section class="output-container">
      <output id="result" for="number-input"></output>
      <h2>Call stack</h2>
      <div id="animation-container"></div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

Ten Productive Days of Recovery​

It was 10 challenging days but at the same time alternating between many activities helped me a lot to regenerate.
I completed course 4/7 of Google UX, laid the groundwork for 3 university exams and completed this project.
I realized that JavaScript has enormously increased my concentration capacity. All the activities I carried out seemed easier to me. Reading 150 pages of one exam, reading 100 of another, preparing the paper with my team for the pitching session related to an exam, as well as Google's course 4 regarding UX Research: I perceived them all with a much lower degree of complexity than last time.

The First Professional Recognition​

In addition to this, my self-esteem also received a boost by receiving a job interview proposal on LinkedIn from a company looking for a UX designer telling me they found my profile interesting. I declined, thanking them and explaining that I'm currently investing all my time in UX Google Certificate, JavaScript, university and work, but also sending her my freeCodeCamp portfolio and telling her I'd be interested in reconnecting when I've completed this path.

The Factory Perspective​

All the factories where I've worked have in common the perception that the workers themselves have towards the office employees. Here those who work in offices are seen as mythological figures, beings endowed with superior abilities and extraordinary intellect, like an unreachable world, often looked at with a mixture of admiration and envy.
As much as I try to maintain my critical thinking, I admit that my beliefs have also been influenced by this perception and I'm happy that the proposal I received confirmed that entering that world is possible.

The Discovery of Recursion​

Anyway, it was a very beautiful project! Recursive functions were a concept I never would have expected to exist. I had taken for granted within myself that for every purpose there was its specific tool. I didn't believe you could call the same function within itself creating a loop like that (it's even strange to say). For such purposes, I thought there were only while, for... I'm realizing that there's art here too, in what from the outside appears as a purely logical field.

The Inspiration from Antirez​

These days in my free time I had the pleasure of watching some videos of a god of computer science, namely Salvatore Sanfilippo (antirez). I was just a few minutes ago reading his article about comments (https://antirez.com/news/124), where, showing the comments he wrote in Redis, he traces back to the best practices for writing them, stating that writing good comments is as difficult as writing good code. I'm grateful to have discovered him right now because putting his teachings into practice right away is much simpler than doing it later with already consolidated habits.

What I Learned​

Recursive Functions:

  • Base case concept to terminate recursion
  • Recursive pattern: return function(newInput) + operation
  • Math.floor(input / 2) for integer division
  • Base case handling with input === 0 || input === 1

Call Stack Visualization:

  • Call stack animation to understand recursion
  • setTimeout() to create timed animations
  • Visualization of how calls stack up and then resolve

Advanced Input Validation:

  • parseInt() for string-to-number conversion
  • isNaN() for numeric validity checking
  • Handling negative numbers and empty inputs
  • Alert for immediate user feedback

Event Handling:

  • Event listeners for click and keydown
  • Enter key handling for alternative submit
  • e.key === "Enter" for specific key control

Dynamic DOM Manipulation:

  • innerHTML += template to add elements
  • document.getElementById().remove() for element removal
  • textContent manipulation for dynamic updates

Numerical Algorithms:

  • Decimal-to-binary conversion with successive divisions
  • Modulo operator % to get division remainder
  • Result string construction through concatenation

Reflection​

JavaScript continues to surprise me.
Recursion has opened a new dimension in my way of thinking about programming.
No longer just linear loops, but functions that call themselves creating powerful and elegant patterns.

Next Project: Build a Roman Numeral Converter Project (CERTIFICATION PROJECT!)