Angle Converter

angle-converter.markdown

Angle Converter

A Pen by JFarrow on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="text-center" id="header">
    <h1>Angle Converter</h1>
  </div>

  <div id="body">
    <div class="row">
      <div class="col-md-4" id="instructions">
        <h3 class="text-center">Instructions</h3>
        <p class="instruct">
          This converter can convert from degrees to radians, or from radians to degrees. Use the slider to select which mode you would like to use.
        </p>
        <hr>
        <p class="instruct">
          If you are converting from radians to degrees, it is strongly recommended that you use one of the following formats:
        </p>
        <ul class="instruct" id="acceptable-formats">
          <li>12pi/5</li>
          <li>12pi / 5</li>
        </ul>
        <p class="instruct">
          The input is designed to be pretty loose with formatting, but desired results are not guaranteed if one of the above formats is not used!
        </p>
      </div>

      <div class="col-md-8 text-center" id="converter-div">
        <h3>Entry Mode:</h3>
        <form class="form-inline">
          <div class = "form-group">
            <p>Degrees</p>
          </div>
          <div class = "form-group">
            <label class="switch">
              <input type = "checkbox" id = "toggle"/>
              <div class = "slider round"></div>
            </label>
          </div>
          <div class = "form-group">
            <p>Radians</p>
          </div>
        </form>
        
        <form class="form-inline">
          <div class="form-group">
            <input class="form-control" type="number" step = "0.01" placeholder="Deg" id="entry" />
          </div>
          <div class="form-group">
            <button type="button" class="btn" id="convert-btn">=</button>
          </div>
          <div class="form-group">
            <input class="form-control" readonly="readonly" type="text" id="result">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

script.js

var mode = "deg";

$("#toggle").click(function() {
  if (mode === "deg") {
    mode = "rad";
    $("#entry").attr({
      "placeholder": "Rad",
      "type": "text"
    });
    $("#entry").val("");
    $("#result").val("");
  } else {
    mode = "deg";
    $("#entry").attr({
      "placeholder": "Deg",
      "type": "number",
      "step": "0.01"
    });
    $("#result").val("");
  }
});

$("#convert-btn").click(function() {
  if (mode === "deg") {
    var fracObj = simplifyFraction($("#entry").val(), 180);
    if (fracObj.numerator !== "0") {
      fracObj.denominator !== "" ? $("#result").val(fracObj.numerator + "\u03C0 / " + fracObj.denominator + " rad") : $("#result").val(fracObj.numerator + "\u03C0 rad");
    } else $("#result").val("0 rad");
  } else if (mode === "rad") {
    var regex = /^(\s+)?(\-)?(\d+)?(\.\d+)?(\s+)?(pi)?(\s+)?(\/)?(\s+)?(\-)?(\d+)?(\s+)?$/gi;
    if ($("#entry").val().match(regex)) {
      if (!(toDeg($("#entry").val()).match(/ERROR/g))) {
        $("#result").val((toDeg($("#entry").val()) + "\u00B0"));
      } else {
        $("#result").val(toDeg($("#entry").val()));
      }
    } else $("#result").val("INVALID ENTRY");
  }
});

function simplifyFraction(num, denom) {
  for (var fac = Math.min(Math.abs(num), Math.abs(denom)); fac > 1; fac--) {
    if (num % fac == 0 && denom % fac == 0) {
      num /= fac;
      denom /= fac;
      fac = 1;
    }
  }

  var frac = {
    "numerator": num !== 1 ? num : "",
    "denominator": denom > 1 ? denom : ""
  };

  return frac;
}

function toDeg(entry) {
  var frac = entry.match(/\-?\d+/g);
  if (frac === null)
    return 180;

  if (frac.length === 2) {
    if(isNaN(frac[0] * 180/ frac[1]) || frac[0] * 180 / frac[1] === Infinity)
      return "ERROR: DIV BY ZERO";
    else if (entry.match(/pi/gi))
        return frac[0] * 180 / frac[1];
    else return (frac[0] * 180 / (frac[1] * Math.PI));
  }
  
  else if(frac.length === 1) {
    if(!entry.match("/")) {
      if(entry.match(/pi/gi))
        return frac[0] * 180;
      else return frac * (180 / Math.PI);
    }
    
    else {
      if(entry.match(/(\s+)?(pi)(\s+)?(\/)(\s+)?(\-)?(\d+)/gi)) {
        if(frac[0] !== "0") 
          return 180 / frac[0];
        else return "ERROR: DIV BY ZERO"
      }
     
      else {
        return "ERROR: BAD SYNTAX";
      }
    }
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
  font-family: "Cutive Mono", monospace;
  background-color: #333333;
  color: white;
}

h1 {
  font-size: 4em;
}

h3 {
  font-size: 2em;
}

.instruct {
  font-size: 1.5em;
}

#converter-div {
  margin-top: 25px;
}

.inline {
  display: inline-block;
  width: 100%;
}

#entry {
  font-size: 1.5em;
  color: #333333;
}

#entry:focus, #result:focus {
  outline: 0;
  box-shadow: none;
}

#convert-btn:hover {
  color: white;
}

#convert-btn:focus {
  outline: 0;
  box-shadow: none;
  color: white;
}

#convert-btn:active {
  background-color: white;
  color: #333333;
  outline: 0;
  box-shadow: none;
}

#convert-btn {
  background-color: black;
  font-size: 1.5em;
  padding-top: 0px;
  padding-bottom: 0px;
}

#result {
  font-size: 1.5em;
  color: black;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #666;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #666;
}

input:focus + .slider {
  box-shadow: 0 0 1px #666;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />