SOVANN / Utility

Number Converter

1. The Hook & The Concept

6/24/2026Views: 0Launches: 0
Back to indexLaunch app
  1. The Hook & The Concept

For this one-day sprint, I built Number Converter, a simple browser-based web app for converting numbers between Binary, Octal, Decimal, and Hexadecimal. It also supports ASCII conversion, including ASCII Code to Text and Text to ASCII Code.

The app is for students, beginners, and anyone learning number systems or ASCII encoding. I chose this idea because it is small enough for a one-day sprint, but still has enough real logic to make the build interesting: validation, automatic conversion, copy buttons, and step-by-step explanations.

The main goal was not just to show the final converted value. I wanted the app to help users understand how the conversion works, especially for learners who are still getting familiar with base systems.

  1. The Tech Stack & AI Co-Pilots

#

The Stack

This project was intentionally kept lightweight. The app can run by opening index.html directly in a browser.

#

The AI Assist

The main AI assistant used was Codex, which helped with:

The human role was to guide the direction, provide screenshots, describe expected behavior, and approve the visual/functional changes through iteration.

  1. The 1 Day Sprint: How It Went Down

#

Morning: Hour 1

The sprint started with a handoff document describing the app requirements. The first version needed to be a simple one-page Number Converter using only HTML, CSS, and JavaScript.

The initial plan was clear:

The first working version had three modes: Base Converter, ASCII Code to Text, and Text to ASCII Code.

#

Afternoon: Hours 2-6

Most of the afternoon was spent improving the app through UI feedback and screenshots.

The Base Converter was changed from a single input and dropdown into four separate fields:

When the user enters a value in one field, the other fields update automatically. For example, entering 1010 in Binary fills Decimal as 10, Octal as 12, and Hexadecimal as A.

Next, the ASCII Text Converter was refined. The placeholder for ASCII input now changes depending on the selected base:

The Text to ASCII Code mode also received a custom result layout with separate fields for Binary, Octal, Decimal, and Hexadecimal.

After that, I added inline validation. Invalid input now shows a red border around the specific field and a helpful error message with an example, such as:

``text Illegal input! Binary only allows 0 and 1 (e.g., 01001000). ``

#

The Finish Line: Hours 7-8

The final part of the sprint focused on polish and usability.

The app gained:

The How it works section became one of the most useful parts of the app. It explains repeated division for Decimal conversion and positional value for Binary, Octal, and Hexadecimal conversion.

For example, Binary 1111 explains:

``text 1 × 2^3 = 8 1 × 2^2 = 4 1 × 2^1 = 2 1 × 2^0 = 1 Sum = 8 + 4 + 2 + 1 Decimal result: 15 ``

By the end, the app was not just a converter. It became a learning tool.

  1. The AI Plot Twist: Roadblocks & Pivots

The biggest roadblock was keeping the UI behavior consistent across multiple modes.

At first, the Result section existed for every mode. Later, it was removed, then brought back only for specific ASCII modes. That created a few edge cases because some JavaScript functions still expected result elements to exist in the HTML.

The fix was to make the result-related functions safer. Instead of assuming every element always exists, the code now checks for the element before updating it.

Another challenge was clipboard behavior in the automated browser test. The copy buttons were wired correctly, but the browser automation environment sometimes blocked clipboard writes. To improve the real browser experience, fallback copy logic was added using input selection and document.execCommand("copy").

The AI was very helpful for fast iteration, but it needed specific guidance. When the request included screenshots and exact behavior, the output was much closer to the desired result.

  1. Key Takeaways & Lessons Learned

#

What Worked Best

The best results came from clear, visual requests.

When I provided screenshots and explained the exact behavior, the AI was able to update the layout quickly and accurately. For example, the Base Converter field layout and the Text to ASCII result form improved a lot after screenshot-based feedback.

The AI also worked well for repetitive implementation tasks, such as:

#

What Worked Worst

The hardest part was managing changing requirements across many iterations.

Some features were added, removed, and then partially restored. For example, the Result section was removed, then restored for Text to ASCII Code, and then restored for ASCII Code to Text too. This made the code more conditional and required careful testing.

Another weak point was clipboard testing. The automated browser did not always behave like a normal user browser, so the copy feature required extra fallback logic and judgment.

#

Final Thought

If I had one more day, I would refactor the JavaScript into cleaner sections inside the same file:

I would also add a small built-in test panel or test checklist inside the project documentation so future changes can be verified faster.

If I could redo the app, I would define the final UI states earlier before coding. The app changed direction several times, which is normal in an AI-assisted sprint, but a clearer UI map at the start would make the implementation cleaner.

Overall, this sprint showed that AI can move very fast when the goal is clear, the feedback is specific, and the human keeps checking the real behavior in the browser.