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.
