Hello visitor, in this article we are going to discuss about How to create byte converter in Bootstrap using JavaScript. A computer memory unit could be a sequence of 8 bits “enough to represent one alphanumerical character ” processed as one unit of data. One letter or character would use one computer memory unit of memory “8 bits”, two characters would use two bytes “16 bits”. Put is a different way , a bit is either ‘ON’ or ‘OFF’ which is processed by a computer processor, we represent ‘on’ ass ‘1’ and ‘off’ as ‘0’. 8 bits are known as a byte, and it is bytes which are used to pass our information in it is basic form characters.The basic unit used in computer data storage is called a bit. computers use these little bits, which are composed of ones and zeros, to do things and talk to other computers. All your files, for instance, are kept in the computer as binary files and translated into words and pictures by the software . Computer data and file size is normally measured in binary code using the binary number system counted by factors of two 1, 2, 4, 8, 32, 64 etc, The prefixes for the multiples are based on the metric system, The nearest binary number to 1000 is 2^10 or 1024; thus 1024 bytes was named a kilobyte. So although a metric ‘kilo’ equals 1000 “one kilogram = 1000 grams”, a binary ‘kilo’ equals 1024 “one kilobyte = 1024 bytes”. This post we are create byte converter.
How To Create Byte Converter in Boostrap using JavaScript
Getting Bootsrap
Bootstrap can be Download to your needs from their Getting Started page but i would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.
Adding Bootstrap Library
after download bootstrap we need to bootstrap library file in your page and in this step we going to add library file.
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script>
Creating Form For getting Value to Convert using HTML
in this step we are going to create form for get numeric value to convert byte to Kilobyte , Megabyte and Gigabyte .
<form name="value_units_Form" method="post" class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Numeric Value</label>
<input type="text" name="numeric_value" class="form-control" id="exampleInputName2" placeholder="Value . . . . ." autofocus="autofocus" />
</div><br><br>
<div class="form-group">
<label for="exampleInputEmail2">Select Units</label>
<select size="1" name="units" class="form-control">
<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()" class="btn btn-success">Calculate . . .</button>
</form>
Creating Script for Byte converter using Javascript
Next step is creating script for byte converter.
<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>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.
Nice post