The web interface for a Binary-to-Decimal converter.

binToDecConvert.html

  <!--*********************************************************
      * Converts from binary to decimal (and vice versa).
      * Note: uses Bootstrap for the "well" class.
      * Copy-paste this code below into your HTML file.
      * This code will generate the user interface.
      **********************************************************
      -->
      
  <!-- Start of yellow-green container -->
  <div class="well" style="background-color:#99FF00">
  
    <!-- Title and subtitle for "applet" -->
  	<h3> Binary/Decimal Converter </h3>
  	<h4><em> Converts from binary to decimal (and vice versa).</em></h4>
  	<div style="padding:5px"></div>
  	
  	<!-- User instructions and input fields to follow. -->
  	
  	<!-- User enters a number to convert into a text field. -->
  	<h4> 1) Enter a positive integer in the field below. </h4>
  	<input type="text" id="startField" placeholder="Starting Value"/>
  	
  	<!-- User selects a base to convert FROM in a drop-down menu. -->
  	<h4> 2) Select the base for the number entered. </h4>
  	<select id="startBaseSelect">
  		<option value="2" selected> Binary (Base 2) </option>
  		<option value="10"> Decimal (Base 10) </option>
  	</select>
  	
  	<!-- User selects a base to convert TO in a drop-down menu. -->
   	<h4> 3) Select the base to convert to. </h4>
  	<select id="endBaseSelect">
  		<option value="2" selected> Binary (Base 2) </option>
  		<option value="10"> Decimal (Base 10) </option>
  	</select>
  	
  	<!-- User clicks a button to begin conversion process. -->
  	<h4> 4) Click "Convert" when ready. </h4>
  	<input type="button" id="convertButton" class="btn btn-primary" value="Convert" onclick="buttonClick()"/>
  	<div style="padding:10px"></div>
  	
  	<!-- The results of the calculation are displayed in a green box. -->
  	<div class="well" style="background-color:#00FF33; display:none" id="resultArea">
  	   <!-- Result message will appear here. -->
  	</div>
  	
  </div>
  <!-- End of yellow-green container. -->