Merge pull request #5 from tgerring/master

Added live preview rate conversion
hivewallet · Nov 21, 2013 · c062979 · c062979
2 parents 127ed8e + 5b2045f
commit c062979
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 50 deletions.
diff --git a/css/seans_outpost.css b/css/seans_outpost.css
@@ -8,6 +8,11 @@ body {
     background-attachment:fixed;
     background-position:center;
     margin: 0px;
+    font-family: "AllerDisplay";
+}
+
+input {
+    font-family: "AllerDisplay";
 }
 
 div#header{
@@ -40,42 +45,35 @@ div#border_radius{
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
+    line-height: 30px;
+    padding-bottom: 7px;
 }
 
-ul#display-inline-block,
-ul#display-inline-block li {
-    color: black;
-    margin: 0;
-    padding: 1px;
+div#border_radius input {
+    border-style: none;
+    background:#EEEEEE;
+    color: #969696;
+    width: 65px;
+    height:30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 24px;
 }
 
-ul#display-inline-block li {
-    display: inline-block;
-    vertical-align: middle;
-    padding-left:2px;
+div#border_radius img {
+    vertical-align: bottom;
+    margin-bottom: -7px;
 }
 
 div.container-button{
     display:table;
-	width:60%;
+	width:75%;
     margin-left: auto;
     margin-right: auto;
     min-width: 340px;
     max-width: 380px;
 }
 
-input.small{
-    width: 60px;
-    height:30px;
-    text-align: center;
-    font-size: 20px;
-}
-
-input#in_cash{
-    border-style: none;
-    background:#EEEEEE;
-}
-
 div.fixed{
     bottom:60px;
     text-align: center;
@@ -84,8 +82,7 @@ div.fixed{
     width:100%;
 }
 
-div.small{
-    font-family: "AllerDisplay";
+.styledtext {
     font-size: x-large;
     text-align: left;
     line-height:80%;

diff --git a/index.html b/index.html
@@ -3,23 +3,22 @@
     <title>Sean's Outpost</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/seans_outpost.css">
+
+    <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
     <script src="js/hive_mock.js" type="text/javascript"></script>
     <script src="js/seans_outpost.js" type="text/javascript"></script>
 
     <head>
         <title>Sean's Outpost</title>
     </head>
-    <body onload="init()">
+    <body>
         <div id="header"></div>
         <div class="fixed">
             <div class="container-button">
-                <div class="small">Help the less<br/>fortunate among us</div>
+                <div class="styledtext">Help the less<br/>fortunate among us</div>
                 <div id="border_radius">
-                    <ul id="display-inline-block">
-                        <li><h4>Donate:</h4></li>
-                        <li><img src="css/image/B.png"/></li>
-                        <li><input id="in_cash" class="small" type="text" value="1.00" onchange="validateValue(this);return false;"/></li>
-                    </ul>
+                    <img src="css/image/B.png" /><input id="in_cash" type="text" value="0.05" />
+                    feeds <input id="persons_fed" type="text" value="" readonly /> people
                 </div>
             </div>
         </div>

diff --git a/js/jquery-2.0.3.min.js b/js/jquery-2.0.3.min.js
diff --git a/js/seans_outpost.js b/js/seans_outpost.js
@@ -2,40 +2,74 @@
  * Created by marcinra on 10/19/13.
  */
 var address = '1M72Sfpbz1BPpXFHz9m3CdqATR44Jvaydd';
-
 var separator;
+var perPersonCostUSD = 1.25;
+var rateBTCUSD = 0.00;
+var userBTC;
+var ratesURI = 'https://bitpay.com/api/rates';
 
-var init = function(){
-    bitcoin.getSystemInfo(function(info) {
-        separator = info.decimalSeparator;
-        var amount_val = document.getElementById('in_cash');
-        amount_val.value = '1'+ separator + '00';
-    });
-}
+$(document).ready(function() {
+    init();
+    $('#in_cash').keyup(function(){ updateEstimate(); });
+});
 
 function isNumber(n) {
-      return !isNaN(parseFloat(n)) && isFinite(n);
+    'use strict';
+    n = n.replace(',', '.');
+    if (!isNaN(parseFloat(n)) && isFinite(n)) {
+        userBTC = n;
+        return true;
     }
+    return false;
+}
 
-var validateValue = function(temp){
-    if (temp.indexOf(separator)>0){
-        temp.replace(separator,'.');
-    }
-    if(!isNumber(temp.value)){
-        temp.value='1'+separator+'00';
-        alert("can't read value it's not a number");
+function updateEstimate() {
+    var amountBTC = $('#in_cash').val();
+    if (isNumber(amountBTC)) {
+        //console.log('Got decimal number ' + userBTC.toString());
+        //console.log('rateBTCUSD = ' + rateBTCUSD)
+        var amountUSD = userBTC * rateBTCUSD;
+        //console.log('amountUSD = ' + amountUSD.toString())
+        var peopleFed = amountUSD / perPersonCostUSD;
+        //console.log('peopleFed = ' + peopleFed.toString())
+        $('#persons_fed').val(parseInt(peopleFed).toString());
+    } else {
+        $('#persons_fed').val('0');
     }
 }
 
+function setRates() {
+    $.ajax({
+      dataType: "json",
+      url: ratesURI,
+      success: function(data) {
+        $.each( data, function( key, val ) {
+            if (val.code == 'USD') { rateBTCUSD = val.rate; console.log('Set rate to ' + val.rate.toString() + ' ' + val.code); }
+          });
+        updateEstimate();
+      }
+    });
+}
+
+var init = function(){
+    bitcoin.getSystemInfo(function(info) {
+        separator = info.decimalSeparator;
+        var amount_val = document.getElementById('in_cash');
+        amount_val.value = '0'+ separator + '05';
+    });
+    setRates();
+    updateEstimate();
+}
+
 var success = function(success, transaction_id){
     if (success){
-        alert("thanks for donate!");
+        alert("Thanks for donating!");
     }
 }
 
 var send = function(){
-    var amount_val = document.getElementById('in_cash');
-    var amount = btc_string_to_satoshi(amount_val.value, separator);
+    var amount_val = $('#in_cash').val();
+    var amount = btc_string_to_satoshi(amount_val, separator);
     if(amount!=0){
         bitcoin.sendMoney(address, amount, success);
     }