Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angle Converter
<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>
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";
}
}
}
}
<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>
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%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment