Search

Introducing my online byte converter!

I’ve been meaning to try my hand at some real-world JavaScript, honestly one of the many reasons I wanted to start my own site. Now, get ready, ’cause this converter’s about to get heavy!

 function ByteConverter(valNum) {
            var selected = document.activeElement;
            if (selected && selected.id == "inputBytes") {
                document.getElementById("inputKilobytes").value = valNum / 1024;
                document.getElementById("inputMegabytes").value = valNum / 1048576;
                document.getElementById("inputGigabytes").value = valNum / 1073741824;
                document.getElementById("inputTerabytes").value = valNum / 1099511627776;
            }
            if (selected && selected.id == "inputKilobytes") {
                document.getElementById("inputBytes").value = valNum * 1024;
                document.getElementById("inputMegabytes").value = valNum / 1024;
                document.getElementById("inputGigabytes").value = valNum / 1048576;
                document.getElementById("inputTerabytes").value = valNum / 1099511627776;
            }
            if (selected && selected.id == "inputMegabytes") {
                document.getElementById("inputBytes").value = valNum * 1048576;
                document.getElementById("inputKilobytes").value = valNum * 1024;
                document.getElementById("inputGigabytes").value = valNum / 1024;
                document.getElementById("inputTerabytes").value = valNum / 1048576;
            }
            if (selected && selected.id == "inputGigabytes") {
                document.getElementById("inputBytes").value = valNum * 1073741824;
                document.getElementById("inputKilobytes").value = valNum * 1048576;
                document.getElementById("inputMegabytes").value = valNum * 1024;
                document.getElementById("inputTerabytes").value = valNum / 1024;
            }
            if (selected && selected.id == "inputTerabytes") {
                document.getElementById("inputBytes").value = valNum * 1099511627776;
                document.getElementById("inputKilobytes").value = valNum * 1073741824;
                document.getElementById("inputMegabytes").value = valNum * 1048576;
                document.getElementById("inputGigabytes").value = valNum * 1024;
            }
        }

This is the heart of it, the core, the function!!! Yes, I am sure there are some of you looking at the above code in horror because there are way more efficient ways of doing this math. Baby steps right? Basically, it’s a bunch of if statements that get triggered depending on the field the user clicked on. It was really important to me to have the number automatically update as I entered what I wanted to see converted. This was a must. I already have a good understanding of bits & bytes and converting them mentally or with a calculator (realistically I just open an Excel workbook…). Since computers and scripting are a thing, these days I usually just use an online converter. So I thought this would be the perfect beginners JavaScript project, something that is of use to me.

What’s Next?

My mental “roadmap” if you will for this will be to eventually include conversions to decimal (1 Megabyte = 1000000 bytes). Then probably fix the margins a little on mobile devices.

After that, probably more responsive CSS, cleaner UI, wider browser support. I’d also really like to have a loader that displays a fun fact about data sizes.

Share the Post:

Related Posts

PNG Press – Convert all those annoying .webp files quickly

PNG Press is a lightweight desktop application built using .NET Core 8. It features a simple drag-and-drop interface designed to convert one or multiple images to PNG format with ease. This project was born out of my own necessity for a straightforward image conversion tool, and I’m excited to finally share it with you.

Read More

Yu-Gi-Oh! Rarity Collection 2 Set Overview

The Yu-Gi-Oh! TCG set Rarity Collection 2 is getting mixed reviews to say the least. I’ve consulted with the Millennium items and searched the labyrinth of Atem’s mind to find this Yu-Gi-Oh! set’s stats, metrics, and other neat insights, let’s go!

Read More