Byte Calculator in Bootstrap

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.
  1. <form name="value_units_Form" method="post">
  2. <div>
  3. <label>Numeric Value</label>
  4. <input type="text" name="numeric_value"placeholder="Value . . . . ." autofocus="autofocus" />
  5. </div>
  6. <div>
  7. <label>Select Units</label>
  8. <select size="1" name="units">
  9. <option value="Bytes">Bytes</option>
  10. <option value="Kb">Kb</option>
  11. <option value="Mb">Mb</option>
  12. <option value="Gb">Gb</option>
  13. </select>
  14. </div>
  15. <button type="submit" onClick="value_to_units_Results()">Calculate . . .</button>
  16. </form>
For converting Bytes
  1. if (selectunit == "Bytes")
  2. value_Of_Bytes = the_Value
For converting KiloBytes
  1. else if (selectunit == "Kb")
  2. value_Of_Bytes = the_Value * 1024
For converting MegaBytes
  1. else if (selectunit == "Mb")
  2. value_Of_Bytes = the_Value * 1024 * 1024
For converting GigaBytes
  1. else if (selectunit == "Gb")
  2. 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.
  1. 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.
  1. <script>
  2. var value_Of_Bytes = 0
  3.  
  4. function value_to_units_Results() {
  5. var the_Value = document.value_units_Form.numeric_value.value
  6. var selectunit = document.value_units_Form.units.options[document.value_units_Form.units.selectedIndex].value
  7.  
  8. if (selectunit == "Bytes")
  9. value_Of_Bytes = the_Value
  10.  
  11. else if (selectunit == "Kb")
  12. value_Of_Bytes = the_Value * 1024
  13.  
  14. else if (selectunit == "Mb")
  15. value_Of_Bytes = the_Value * 1024 * 1024
  16.  
  17. else if (selectunit == "Gb")
  18. value_Of_Bytes = the_Value * 1024 * 1024 * 1024
  19.  
  20. 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")
  21. }
  22. </script>

Output

Result 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