Byte Calculator in Bootstrap

Submitted by azalea zenith on Monday, October 10, 2016 - 16:29.

In this tutorial, we are going to create Byte Calculator in Bootstrap. This tutorial creates using JavaScript. If you are looking for this kind of tutorial then you are at the right place. Using this tool to convert the size of one file of one unit to another. The results turn in these possible units option. Like, Byte, KiloByte, MegaByte, and GigaByte. After downloading this source code, kindly insert the desired numeric value in the TextBox then select what units do you want to convert it and click the "Calculate . . ." button. In the list below, an example for the units converted to another unit. Take a look ad study.

1 Byte = 8 Bit
1 Kilobyte = 1,024 Bytes
1 Megabyte = 1,048,576 Bytes
1 Gigabyte = 1,073,741,824 Bytes

First, we are going to create our markup and it contains TextBox where the user types their desired numeric value, select tag to select what's unit to be calculated, and one button.

<form name="value_units_Form" method="post">
   <div>
      <label>Numeric Value</label>
      <input type="text" name="numeric_value"placeholder="Value . . . . ." autofocus="autofocus" />
   </div>
   <div>
      <label>Select Units</label>
      <select size="1" name="units">
         <option value="Bytes">Bytes</option>
         <option value="Kb">Kb</option>
         <option value="Mb">Mb</option>
         <option value="Gb">Gb</option>
      </select>
   </div>
   <button type="submit" onClick="value_to_units_Results()">Calculate . . .</button>
</form>

For converting Bytes

if (selectunit == "Bytes")
    value_Of_Bytes = the_Value

For converting KiloBytes

else if (selectunit == "Kb")
    value_Of_Bytes = the_Value * 1024

For converting MegaBytes

else if (selectunit == "Mb")
    value_Of_Bytes = the_Value * 1024 * 1024

For converting GigaBytes

else if (selectunit == "Gb")
    value_Of_Bytes = the_Value * 1024 * 1024 * 1024

This simple script used where the results show / display on the web page after a type of the user the desired numeric value and selected units.

alert(the_Value + " " + selectunit + " is equal to:\n\n- " + value_Of_Bytes + " Bytes\n- " + Math.round(value_Of_Bytes / 1024) + " Kb\n- " + Math.round(value_Of_Bytes / 1024 / 1024) + " Mb\n- " + Math.round(value_Of_Bytes / 1024 / 1024 / 1024) + " Gb\n"

This is the full script.

<script>
    var value_Of_Bytes = 0
 
    function value_to_units_Results() {
        var the_Value = document.value_units_Form.numeric_value.value
        var selectunit = document.value_units_Form.units.options[document.value_units_Form.units.selectedIndex].value
 
        if (selectunit == "Bytes")
            value_Of_Bytes = the_Value
 
        else if (selectunit == "Kb")
            value_Of_Bytes = the_Value * 1024
 
        else if (selectunit == "Mb")
            value_Of_Bytes = the_Value * 1024 * 1024
 
        else if (selectunit == "Gb")
            value_Of_Bytes = the_Value * 1024 * 1024 * 1024
 
        alert(the_Value + " " + selectunit + " is equal to:\n\n- " + value_Of_Bytes + " Bytes\n- " + Math.round(value_Of_Bytes / 1024) + " Kb\n- " + Math.round(value_Of_Bytes / 1024 / 1024) + " Mb\n- " + Math.round(value_Of_Bytes / 1024 / 1024 / 1024) + " Gb\n")
    }
</script>

Output

If you have a question for this tutorial, don't hesitate to comment below. For the full source code, kindly click the download button below. Enjoy coding. Thank you.

Add new comment

99 views