Medeco Biaxial to HPC Codemax Translator

by Pete Fecteau

HTML

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
  crossorigin="anonymous">
</script>
<h1>Medeco Biaxial to HPC Codemax Translator</h1>
    <h3>Use DSD# 3076</h3>
    <div id="code">
      <p>Enter Medeco Biaxial Key Bitting:</p>
      <form id="form" action="/action_page.php">
        <input type="text" id="i1" name="i1" maxlength="2">
        <input type="text" id="i2" name="i2" maxlength="2">
        <input type="text" id="i3" name="i3" maxlength="2">
        <input type="text" id="i4" name="i4" maxlength="2">
        <input type="text" id="i5" name="i5" maxlength="2">
        <input type="text" id="i6" name="i6" maxlength="2">
      </form>
      <div>
       <input type="reset" class="x1" value="Clear">
       <input type="submit" class="t1" value="Translate">
      </div>
    </div>

    <div id="result">
      <p>Code for HPC Codemax</p>
      <div id="rbox">
        <div id="r1" class="r"></div>
        <div id="r2" class="r"></div>
        <div id="r3" class="r"></div>
        <div id="r4" class="r"></div>
        <div id="r5" class="r"></div>
        <div id="r6" class="r"></div>
      </div>
    </div>

CSS

body {
        font-family: arial
      }
      h1 {
        margin-bottom:20px;
      }
      form {
        box-sizing: border-box;
        margin-left:40px;
      }
      input {
        display:block;
        float:left;
        font-size:18px;
        font-weight:bold;
        width:25px;
        padding:5px;
        margin-right:5px;
        text-transform:uppercase;
        background-color:
      }
      .t1 {
        display: block;
        width: 140px;
        background-color: rgb(0, 69, 219);
        color: #fff;
        border: 0px;
        margin: 20px 0 40px 0;
        cursor: pointer;
      }
      .x1 {
        display: block;
        clear: left;
        width: 100px;
        background-color: #777;
        color: #fff;
        border: 0px;
        margin: 20px 20px 40px 40px;
        cursor: pointer;
      }
      #code {
        float: left;
        width:100%;
        margin-bottom:20px;
      }
      #result {
        float:left;
        width:100%;
      }
      #rbox {
        box-sizing: border-box;
        margin-left:40px;
      }
      .r {
        display:block;
        float:left;
        height:21px;
        width:25px;
        font-size:18px;
        font-weight:bold;
        border:1px solid #767676;
        border-radius:2px;
        margin-right:5px;
        padding:6px;
        transform:uppercase;
      }

JavaScript

$(document).ready(function() {
  $(".t1").click(function() {
  	var i1 = $('#i1').val();
  	var i2 = $('#i2').val();
  	var i3 = $('#i3').val();
  	var i4 = $('#i4').val();
  	var i5 = $('#i5').val();
  	var i6 = $('#i6').val();
  	var num1 = i1.replace(/[^0-9\s]/g, "");
  	var num2 = i2.replace(/[^0-9\s]/g, "");
  	var num3 = i3.replace(/[^0-9\s]/g, "");
  	var num4 = i4.replace(/[^0-9\s]/g, "");
  	var num5 = i5.replace(/[^0-9\s]/g, "");
  	var num6 = i6.replace(/[^0-9\s]/g, "");
  	var char1 = i1.replace(/[^a-zA-Z\s]/g, "");
  	var char2 = i2.replace(/[^a-zA-Z\s]/g, "");
  	var char3 = i3.replace(/[^a-zA-Z\s]/g, "");
  	var char4 = i4.replace(/[^a-zA-Z\s]/g, "");
  	var char5 = i5.replace(/[^a-zA-Z\s]/g, "");
  	var char6 = i6.replace(/[^a-zA-Z\s]/g, "");

		if (char1 == 'q') {
    	$('#r1').html(num1+"B");
    } else if (char1 == 'b') {
    	$('#r1').html(num1+"C");
    } else if (char1 == 'k') {
    	$('#r1').html(num1+"D");
    } else if (char1 == 's') {
    	$('#r1').html("B"+num1);
    } else if (char1 == 'd') {
    	$('#r1').html("C"+num1);
    } else if (char1 == 'm') {
    	$('#r1').html("D"+num1);
    } else {
    	$('#r1').html("");
    }
    
    if (char2 == 'q') {
    	$('#r2').html(num2+"B");
    } else if (char2 == 'b') {
    	$('#r2').html(num2+"C");
    } else if (char2 == 'k') {
    	$('#r2').html(num2+"D");
    } else if (char2 == 's') {
    	$('#r2').html("B"+num2);
    } else if (char2 == 'd') {
    	$('#r2').html("C"+num2);
    } else if (char2 == 'm') {
    	$('#r2').html("D"+num2);
    } else {
    	$('#r2').html("");
    }
    
    if (char3 == 'q') {
    	$('#r3').html(num3+"B");
    } else if (char3 == 'b') {
    	$('#r3').html(num3+"C");
    } else if (char3 == 'k') {
    	$('#r3').html(num3+"D");
    } else if (char3 == 's') {
    	$('#r3').html("B"+num3);
    } else if (char3 == 'd') {
    	$('#r3').html("C"+num3);
    } else if (char3 == 'm') {
    	$('#r3').html("D"+num3);
    } else {
    	$('#r3').html("");
    }
    
    if...