Skip to content

Instantly share code, notes, and snippets.

@rexfordkelly

rexfordkelly/index.html

Created May 3, 2017 07:39
Show Gist options
  • Save rexfordkelly/c798be2d346b1acb1d5843fea191287b to your computer and use it in GitHub Desktop.
Save rexfordkelly/c798be2d346b1acb1d5843fea191287b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/pevunaniqo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="shortcut icon" href="/images/quicklistings/favicon.ico" type="image/x-icon">
<!-- CSS -->
<link href="http://carpe.quicktours.net/css/reset.css" rel="stylesheet">
<link href="http://carpe.quicktours.net/css/forms.css" rel="stylesheet">
<link href="http://carpe.quicktours.net/css/global.css?20170501172111" rel="stylesheet">
<style>
/* Reset Buttons */
section .global_button {
text-transform: uppercase;
clear:both;
font-size: 14px;
padding: 12px 18px;
border-radius: 20px;
float:none;
margin: 0, auto;
max-width: 200px;
display:block;
margin: 0 auto;
}
#next-steps span {
width: 100%;
text-align: center;
margin: 0 auto;
max-width: 200px;
display: block;
padding: 10px;
}
.global_input_simple {
width: 25%;
float: left;
padding-right: 2%;
}
#calculator{
width: 86%;
margin: 0 auto;
max-width: 1024px;
}
form#calculator-form {
padding: 40px;
margin: 10px;
background-color: #222d38;
display: block;
padding-bottom: 6%;
border-radius: 10px;
margin-top: 40px;
}
form div {
top: -11px;
}
.dark-bg input, .dark-bg select {
border-color: #59626a;
width: 100%;
height: 40px;
}
.global_input_simple label {
color: white;
opacity: 0.8;
}
#calculator h1 {
margin: 0 auto;
width: 98%;
padding-top: 31px;
margin-bottom: -20px;
font-size: 37px;
font-weight: 100;
}
.donut-chart-block.chart-block {
width: 61%;
float: left;
clear: none;
}
section {
display: inline-block;
margin: 0 auto;
width: 100%;
padding-bottom: 50px;
}
#next-steps {
float: right;
padding: 5%;
border-left: 1px solid #2c3a48;
width: 32%;
}
#calculator-details {
margin-top: 49px;
}
.donut-chart-block.chart-block {
width: 63%;
float: left;
clear: none;
}
form#calculator-form {
padding: 40px;
margin: 10px;
background-color: #222d38;
display: block;
padding-bottom: 8%;
border-radius: 10px;
margin-top: 40px;
}
.results-list ul {
width: 100%;
}
.results-list li span {
float: right;
}
.results-list li {
height: 30px;
width: 100%;
}
.results-list {
float: right;
padding-top: 41px;
width: 41%;
}
form .msg {
position: relative;
top: -22px;
left: -16px;
color: #e64c65;
}
@media (max-width: 985px) {
form#calculator-form{
padding-bottom: 0px;
}
.global_input_simple{
width:100%;
}
.donut-chart-block.chart-block {
width: 91%;
}
#calculator-form{
float:left;
}
.calculator-results {
width:91%;
}
.donut-chart {
margin-left: 10%!important;
}
#next-steps {
width: 100%;
border: none;
border-top: 1px solid;
margin-top: 44px;
border-color: #394856;
}
#next-steps a {
width: 45%;
float: left;
margin: 0px;
display: inline;
clear: none;
}
#next-steps span {
width: 10%;
margin: 0px;
float: left;
text-align: center;
}
#next-steps span {
width: 10%;
}
.links {
margin: 0 auto;
width: 83%;
max-width: 490px;
}
}
@media (max-width: 628px) {
.results-list {
clear: both;
width: 75%;
float: none;
margin: 0 auto;
}
.donut-chart {
left: 25%;
}
#next-steps a, #next-steps span{
width: 55%;
text-align: center;
margin-left: 25%;
}
}
/******************************************
Donut Chart CSS
******************************************/
#calculator-details * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chart-block {
margin: 25px 25px 0 0;
border-radius: 5px;
float: left;
width: 200px;
overflow: hidden;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 3px 13%;
border-radius: 100%;
float: left;
margin-right: -200px;
}
p.center-data {
background: #171f29;
position: absolute;
text-align: center;
font-size: 20px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 150px;
height: 150px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 23% 0 0;
font-weight: 200;
}
.ring {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.segment {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
.pie-360{
float:left;
}
.ring.right {
transform: rotate(180deg);
}
.ring.right .segment {
background-color: #E64C65;
transform: rotate(180deg);
}
.ring.left {
transform: rotate(0deg);
}
.ring.left .segment {
background-color: #E64C65;
transform: rotate(180deg);
}
.center-data i.monthly-total {
font-size: 24px;
color: white;
margin: 0px;
margin-bottom: -16px;
}
.center-data i {
font-weight: 100;
font-size: 17px;
color: grey;
margin-top: -16px;
display: block;
font-style: normal;
}
/**
Result Colors
**/
.dark-bg { background-color:#171f29; color: #fff; }
.dark-bg .accent-bg{ background-color:#222d38;}
.dark-bg .bold-bg{ background:#2fa6cd;}
.dark-bg .outline { border-color: #2f363f;}
.dark-bg input { border-color: #59626a; }
.dark-txt{ color:#ffffff; }
.pni-bg { background-color:#2fa6cd; }
.pni-txt { color:#2fa6cd; }
.pt-bg { background-color:#55dde0; }
.pt-txt { color:#55dde0; }
.hi-bg { background-color:#e28413; }
.hi-txt { color:#e28413; }
.other-bg { background-color:#5c2751; }
.other-txt{ color:#5c2751; }
/** End of Donut Chart**/
</style>
</head>
<body>
<section class="dark-bg">
<div id="calculator">
<h1>Monthly Payment Calculator</h1>
<form id="calculator-form">
<div class="msg"> User Message </div>
<div class="global_input_simple underline">
<label>Home Price</label>
<input id="home-price" min="1" step="any" type="number"/>
</div>
<div class="global_input_simple underline">
<label>Down Payment</label>
<input id="down-payment" min="1" step="any" type="number"/>
</div>
<div class="global_input_simple">
<label>Interest Rate</label>
<input id="interest-rate" min="0.00" step="any" type="number"/>
</div>
<div class="global_input_simple">
<label>Loan-Term</label>
<select id="loan-term" >
<option value=""> Term Length </option>
<option value="10">10 Year</option>
<option value="15">15 Year</option>
<option value="30">30 Year</option>
<option value="40">40 Year</option>
<option value="50">50 Year</option>
</select>
</div>
</form>
<div id="calculator-details">
<div id="calculator-results">
<div class="donut-chart-block chart-block ">
<style>
/*
#portion1 {
transform: rotate(0deg);
}
#portion1 .segment {
background-color: #E64C65;
transform: rotate(76deg);
}
#portion2 {
transform: rotate(76deg);
}
#portion2 .segment {
background-color: #11A8AB;
transform: rotate(140deg);
}
#portion3 {
transform: rotate(215deg);
}
#portion3 .segment {
background-color: #4FC4F6;
transform: rotate(113deg);
}
#portion3 {
transform: rotate(215deg);
}
#portion3 .segment {
background-color: #4FC4F6;
transform: rotate(113deg);
}
#portionLast {
transform: rotate(-32deg);
}
#portionLast .segment {
background-color: #FCB150;
transform: rotate(32deg);
} */
.360:nth-last-child(1) .segment {
background-color:orange;
}
</style>
<div class="donut-chart">
<div class="pie-360">
<div class="ring right">
<div class="segment" data-rel="10"></div>
</div>
<div class="ring left">
<div class="segment" data-rel="10"></div>
</div>
</div>
<div class="pie-360">
<div class="ring right">
<div class="segment" data-rel="10"></div>
</div>
<div class="ring left">
<div class="segment" data-rel="10"></div>
</div>
</div>
<p class="center-data"><i class="monthly-total"> $1,142</i> <br><i>/ month</i></p>
</div>
<div class="results-list">
<style>
li{
background-repeat: no-repeat;
padding-left: 25px;
background-position-y: 1px;
}
.principal-and-interest{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OTY1MTI0NC0zZmUyLTQ3YjgtOWQ0OC0yZDUwYWRlNzdmYTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTQyQjk2QzMyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTQyQjk2QzIyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNmFmOGEwMS05YjQwLTRlNTktOWI3ZS01NGFkN2RiOTNmMGMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZWY4NzU1ZC01YjM5LTExN2EtYjg3MS1mOGI0ZWI1YWY5ZGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6tnSPWAAAA50lEQVR42qSTTQrCMBBGQyyKx7Ag+AP2DuKiosco6MKNF1EEBYW69QaCi+INXFkFNwUPIULF4jcykeii2HTgQZn2fQnpxHI2B/FTDeCBLqhwLwI74IOz/rHUnotgDo5gDGqgxNS5R++WoKwkS5O3oCPSixYcgCrvMFY7mP4h69UGE5XY5NSsNSRX8oEVDALI8SjAFeblUoCdI8CWIl+9/0KUI+AqecJMK6CANXgayOT4FBCClUEAOaE6RJrzIIO8Z+dzmWLQAwuQpIgJr9xn5+s2UmMEWmAGLuABbuDEPYdH+K6klwADAEAMK1AHU/6MAAAAAElFTkSuQmCC');
}
.property-taxes{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OTY1MTI0NC0zZmUyLTQ3YjgtOWQ0OC0yZDUwYWRlNzdmYTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTQyQjk2QkYyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTQyQjk2QkUyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNmFmOGEwMS05YjQwLTRlNTktOWI3ZS01NGFkN2RiOTNmMGMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZWY4NzU1ZC01YjM5LTExN2EtYjg3MS1mOGI0ZWI1YWY5ZGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7aRh2HAAAA5klEQVR42qSTTQrCMBBGYxTFY1gQ/AG9g7io6NYbFHThxosogoJCPYbgongJq+DCoocQoWLxG5lIdFFsOvCgTPu+hHSS6Z8v4qdqwAEdUOJeALbABUf9Y6k958Ec7MEYVECBqXKP3i1BUUk5Td6AtogvWnAAyrzDUO1g+oesVwtMVGKdU5PWkFzJB5Y1CCDHoQBbmJdNAVaKAEuKdPX+C0GKgKvkCTMtjwLW4Gkgk+NSgA9WBgHk+OoQac69BPKOnc9lCkEXLEAUI0a8co+dr9tIjRFogBk4gQe4gQP3mjzCdyW9BBgA+h4rvafP4skAAAAASUVORK5CYII=');
}
.home-insurance{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OTY1MTI0NC0zZmUyLTQ3YjgtOWQ0OC0yZDUwYWRlNzdmYTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkU3MUEwODgyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkU3MUEwODcyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNmFmOGEwMS05YjQwLTRlNTktOWI3ZS01NGFkN2RiOTNmMGMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZWY4NzU1ZC01YjM5LTExN2EtYjg3MS1mOGI0ZWI1YWY5ZGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz50OcyxAAAA6UlEQVR42mJ81CLMgAa0gDgFiD2BWBEqdg+IdwDxHCC+hqyYEckANiDuA+JMIGZiwA7+AfFsIC4E4u8gARYkzVuB2IUBPwAZnA7EqlAX/oLZ1E+EZmTgBHUt2AvaQPoiEDMzkAb+ArE+EzTASNXMANWTAjLAg4F84AEyQIkCA5SYGCgD4Fi4R4EBD5mgKYxcsAdkwFxolDCQEY1zQAZcAeKZZBgA0nMFFoigtL2HBM37oHrgmeYXEHsD8VRohmHAk5lANvtA9aDkOpBADhDrAfFEIL4JxL+B+CsQX4WK6QNxBiwnggBAgAEA7Ewu+FLi00IAAAAASUVORK5CYII=');
}
.other{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OTY1MTI0NC0zZmUyLTQ3YjgtOWQ0OC0yZDUwYWRlNzdmYTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkU3MUEwODQyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkU3MUEwODMyNzhBMTFFN0IyQjNFQzZFNzEyNDFGMEEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNmFmOGEwMS05YjQwLTRlNTktOWI3ZS01NGFkN2RiOTNmMGMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZWY4NzU1ZC01YjM5LTExN2EtYjg3MS1mOGI0ZWI1YWY5ZGQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7JC1GTAAAA5klEQVR42qSTPQrCQBBG11UUj2FA/AO9g1hEtLG3DGhh40UUQUEhHkOwCF7CKNgEPIQIEYPfyKysFsFsBh6ESd63y2Y2M6wMxE/VgQO6oMS9AOyBC876x1J7zoMlOIIpqIICU+MevVuDopJymrwDHRFftOAIlHmHodrB/A9ZrzaYqcQGpyatMbmSDyxrEECOQwG2MC+bAqwUAZYU6er9F4IUAVfJE2ZaHgVswdNAJselAB9sDALI8dUh0px7CeQDO5/LFIIeWIEoRox45T47X7eRGhPQBAtwAQ9wAyfutXiE70p6CTAA8QUqf9Vr6BwAAAAASUVORK5CYII=');
}
</style>
<ul>
<li class="principal-and-interest"> Principal & Interest <span> ($714) </span> </li>
<li class="property-taxes"> Property taxes <span> ($353) </span> </li>
<li class="home-insurance"> Home insurance <span> ($75) </span> </li>
<li class="other"> Other <span> ($0) </span> </li>
</ul>
</div>
</div>
<div id="next-steps">
<div class="links">
<a class="global_button blue" href="/contact">Get Pre-Approved </a>
<span>or</span>
<a class="global_button white hollow padded all-caps" href="/contact">Contact an Agent</a>
</div>
</div>
</div>
</div>
</section>
<script id="jsbin-javascript">
/**
*
* MorgCal - Simple Morgage Calculator V 0.0.1
* Copyright 2017 by Onsors/rexfordkelly
*
* You are free to use this script, on your site or project.
*
**/
var calculator = (function(){
function isNumber(fieldinput){
return typeof Number(fieldInput) === 'number';
}
function myPayment(){
// Reset user messages.
clearMsgs();
// Input Validation
if ((document.mortgagecalc.loan.value === null) || (document.mortgagecalc.loan.value.length === 0) || (isNaN(document.mortgagecalc.loan.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('loanError').innerHTML = 'Numeric value required. Example: 165000';
} else if ((document.mortgagecalc.years.value === null) || (document.mortgagecalc.years.value.length === 0) || (isNaN(document.mortgagecalc.years.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('yearsError').innerHTML = 'Numeric value required. Example: 30';
} else if ((document.mortgagecalc.rate.value === null) || (document.mortgagecalc.rate.value.length === 0) || (isNaN(document.mortgagecalc.rate.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('rateError').innerHTML = 'Numeric value required. Example: 5.25';
} else {
// Set variables from form data
var loanprincipal = document.mortgagecalc.loan.value;
var months = document.mortgagecalc.years.value * 12;
var interest = document.mortgagecalc.rate.value / 1200;
// Calculate mortgage payment and display result
document.getElementById('monthlyPayment').innerHTML = 'Your monthly mortgage payment will be ' + '$' + (loanprincipal * interest / (1 - (Math.pow(1/(1 + interest), months)))).toFixed(2)+'.';
document.getElementById('friendlyReminder').style.display = 'block';
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}
function resetCalculator(){
}
function validateInputs(inputs){
for(input in inputs ){
if( isNaN(Number(inputs[input].value)) ){
if(inputs[input] === '') return false;
} else {
if(Number(inputs[input].value) === 0 ) return false;
}
}
return true;
}
function calculateResults(inputs, rtn = {}){
for(input in inputs){
console.log(inputs[input].value)
}
return rtn;
}
function initialize(options){
// reset input values...
var inputs = {}
options.inputs.forEach(function(input){
// attach listeners...
var el = document.getElementById(input);
inputs[input] = el;
function handleUpdates(inputs){
if( validateInputs(inputs) ){
calculateResults(inputs);
}
}
el.addEventListener('change', function(){ handleUpdates(inputs); });
el.addEventListener('focus', function(){ handleUpdates(inputs); });
});
}
function dial(start, end, color = "#E64C65"){
this.start = start || 0;
this.end = start && end ? start + end : 360;
this.background-color = color;
}
function renderDial( vars ){
}
return {
dial: renderDial,
calculate:'',
clearFields: '',
getValues:'',
init: initialize
}
})()
calculator.init({
inputs: ["home-price", "down-payment", "interest-rate", "loan-term"]
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">/**
*
* MorgCal - Simple Morgage Calculator V 0.0.1
* Copyright 2017 by Onsors/rexfordkelly
*
* You are free to use this script, on your site or project.
*
**/
var calculator = (function(){
function isNumber(fieldinput){
return typeof Number(fieldInput) === 'number';
}
function myPayment(){
// Reset user messages.
clearMsgs();
// Input Validation
if ((document.mortgagecalc.loan.value === null) || (document.mortgagecalc.loan.value.length === 0) || (isNaN(document.mortgagecalc.loan.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('loanError').innerHTML = 'Numeric value required. Example: 165000';
} else if ((document.mortgagecalc.years.value === null) || (document.mortgagecalc.years.value.length === 0) || (isNaN(document.mortgagecalc.years.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('yearsError').innerHTML = 'Numeric value required. Example: 30';
} else if ((document.mortgagecalc.rate.value === null) || (document.mortgagecalc.rate.value.length === 0) || (isNaN(document.mortgagecalc.rate.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('rateError').innerHTML = 'Numeric value required. Example: 5.25';
} else {
// Set variables from form data
var loanprincipal = document.mortgagecalc.loan.value;
var months = document.mortgagecalc.years.value * 12;
var interest = document.mortgagecalc.rate.value / 1200;
// Calculate mortgage payment and display result
document.getElementById('monthlyPayment').innerHTML = 'Your monthly mortgage payment will be ' + '$' + (loanprincipal * interest / (1 - (Math.pow(1/(1 + interest), months)))).toFixed(2)+'.';
document.getElementById('friendlyReminder').style.display = 'block';
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}
function resetCalculator(){
}
function validateInputs(inputs){
for(input in inputs ){
if( isNaN(Number(inputs[input].value)) ){
if(inputs[input] === '') return false;
} else {
if(Number(inputs[input].value) === 0 ) return false;
}
}
return true;
}
function calculateResults(inputs, rtn = {}){
for(input in inputs){
console.log(inputs[input].value)
}
return rtn;
}
function initialize(options){
// reset input values...
var inputs = {}
options.inputs.forEach(function(input){
// attach listeners...
var el = document.getElementById(input);
inputs[input] = el;
function handleUpdates(inputs){
if( validateInputs(inputs) ){
calculateResults(inputs);
}
}
el.addEventListener('change', function(){ handleUpdates(inputs); });
el.addEventListener('focus', function(){ handleUpdates(inputs); });
});
}
function dial(start, end, color = "#E64C65"){
this.start = start || 0;
this.end = start && end ? start + end : 360;
this.background-color = color;
}
function renderDial( vars ){
}
return {
dial: renderDial,
calculate:'',
clearFields: '',
getValues:'',
init: initialize
}
})()
calculator.init({
inputs: ["home-price", "down-payment", "interest-rate", "loan-term"]
});
</script></body>
</html>
Raw
jsbin.pevunaniqo.js
/**
*
* MorgCal - Simple Morgage Calculator V 0.0.1
* Copyright 2017 by Onsors/rexfordkelly
*
* You are free to use this script, on your site or project.
*
**/
var calculator = (function(){
function isNumber(fieldinput){
return typeof Number(fieldInput) === 'number';
}
function myPayment(){
// Reset user messages.
clearMsgs();
// Input Validation
if ((document.mortgagecalc.loan.value === null) || (document.mortgagecalc.loan.value.length === 0) || (isNaN(document.mortgagecalc.loan.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('loanError').innerHTML = 'Numeric value required. Example: 165000';
} else if ((document.mortgagecalc.years.value === null) || (document.mortgagecalc.years.value.length === 0) || (isNaN(document.mortgagecalc.years.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('yearsError').innerHTML = 'Numeric value required. Example: 30';
} else if ((document.mortgagecalc.rate.value === null) || (document.mortgagecalc.rate.value.length === 0) || (isNaN(document.mortgagecalc.rate.value) === true)){
document.getElementById('monthlyPayment').innerHTML = 'Please enter the missing information.';
document.getElementById('rateError').innerHTML = 'Numeric value required. Example: 5.25';
} else {
// Set variables from form data
var loanprincipal = document.mortgagecalc.loan.value;
var months = document.mortgagecalc.years.value * 12;
var interest = document.mortgagecalc.rate.value / 1200;
// Calculate mortgage payment and display result
document.getElementById('monthlyPayment').innerHTML = 'Your monthly mortgage payment will be ' + '$' + (loanprincipal * interest / (1 - (Math.pow(1/(1 + interest), months)))).toFixed(2)+'.';
document.getElementById('friendlyReminder').style.display = 'block';
}
// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
}
function resetCalculator(){
}
function validateInputs(inputs){
for(input in inputs ){
if( isNaN(Number(inputs[input].value)) ){
if(inputs[input] === '') return false;
} else {
if(Number(inputs[input].value) === 0 ) return false;
}
}
return true;
}
function calculateResults(inputs, rtn = {}){
for(input in inputs){
console.log(inputs[input].value)
}
return rtn;
}
function initialize(options){
// reset input values...
var inputs = {}
options.inputs.forEach(function(input){
// attach listeners...
var el = document.getElementById(input);
inputs[input] = el;
function handleUpdates(inputs){
if( validateInputs(inputs) ){
calculateResults(inputs);
}
}
el.addEventListener('change', function(){ handleUpdates(inputs); });
el.addEventListener('focus', function(){ handleUpdates(inputs); });
});
}
function dial(start, end, color = "#E64C65"){
this.start = start || 0;
this.end = start && end ? start + end : 360;
this.background-color = color;
}
function renderDial( vars ){
}
return {
dial: renderDial,
calculate:'',
clearFields: '',
getValues:'',
init: initialize
}
})()
calculator.init({
inputs: ["home-price", "down-payment", "interest-rate", "loan-term"]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment