Add files via upload

bothness · Jan 14, 2020 · eb8e8c5 · eb8e8c5
1 parent 537815a
commit eb8e8c5
Show file tree

Hide file tree

Showing 2 changed files with 253 additions and 0 deletions.
diff --git a/index.htm b/index.htm
@@ -0,0 +1,111 @@
+<html>
+<head>
+<title>Lebanese Lira Converter</title>
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+</head>
+<body class="d-flex flex-column h-100">
+
+<main role="main" class="flex-shrink-0">
+<div class="container">
+<div class="row pt-3 pb-4">
+<div class="col-lg-6">
+<h1>Lebanese Lira Converter</h1>
+
+<div>This tool is based on the unofficial/parallel market rate for Lebanese Lira (LBP) currency exchange, based on Lira rates provided by <a href="http://lebaneselira.org/" target="_blank">LebaneseLira.org</a>, and foreign exchange rates from <a href="https://support.google.com/docs/answer/3093281?hl=en">Google Finance API</a>.</div>
+
+</div>
+</div>
+
+<div class="row">
+
+<div class="card col-lg-6 bg-light">
+<div class="card-body">
+
+<p>1 <span id="fcname">US Dollar</span> =<br>
+<span class="h4"><span id="fcrate"></span> Lebanese Lira</span></p>
+
+<form name="converter">
+<div class="form-group row">
+<div class="col-6 pr-2">
+<input type="text" id="fc" value="1.00" class="form-control">
+</div>
+<div class="col-6 pl-2">
+<select id="dropdown" class="form-control">
+   <option value="USD" name=>US Dollar</option>
+   <option value="EUR">Euro</option>
+   <option value="GBP">Pound Sterling</option>
+   <option>----------</option>
+   <option value="AUD">Australian Dollar</option>
+   <option value="BHD">Bahrain Dinar</option>
+   <option value="BRL">Brazilian Real</option>
+   <option value="CAD">Canadian Dollar</option>
+   <option value="CLP">Chilean Peso</option>
+   <option value="CNY">Chinese Yuan</option>
+   <option value="COP">Colombian Peso</option>
+   <option value="CZK">Czech Koruna</option>
+   <option value="EGP">Egyptian Pound</option>
+   <option value="HKD">Hong Kong Dollar</option>
+   <option value="HUF">Hungarian Forint</option>
+   <option value="INR">Indian Rupee</option>
+   <option value="IDR">Indonesian Rupiah</option>
+   <option value="JPY">Japanese Yen</option>
+   <option value="JOD">Jordanian Dinar</option>
+   <option value="MYR">Malaysian Ringgit</option>
+   <option value="MXN">Mexican Peso</option>
+   <option value="MAD">Moroccan Dirham</option>
+   <option value="NZD">New Zealand Dollar</option>
+   <option value="NOK">Norwegian Krone</option>
+   <option value="OMR">Omani Rial</option>
+   <option value="PHP">Philipine Peso</option>
+   <option value="PLN">Polish Zloty</option>
+   <option value="QAR">Qatari Riyal</option>
+   <option value="RON">Romanian Leu</option>
+   <option value="RUB">Russian Ruble</option>
+   <option value="SAR">Saudi Real</option>
+   <option value="SGD">Singapore Dollar</option>
+   <option value="ZAR">South African Rand</option>
+   <option value="KRW">South Korean Won</option>
+   <option value="SEK">Swedish Kroner</option>
+   <option value="CHF">Swiss Franc</option>
+   <option value="TWD">Taiwan Dollar</option>
+   <option value="THB">Thai Baht</option>
+   <option value="TND">Tunisian Dinar</option>
+   <option value="TRY">Turkish Lira</option>
+   <option value="AED">UAE Dirham</option>
+</select>
+</div>
+</div>
+
+
+<div class="form-group row">
+<div class="col-6 pr-2">
+<input type="text" id="lbp" value="" class="form-control">
+</div>
+<label for="lbp" class="col-6 pl-2 col-form-label">Lebanese Lira</label>
+</div>
+</form>
+
+<small class="text-muted">Last updated on <span id="todaydate"></span>. Based on LebaneseLira.org and Google rates. This data is provided 'as is' and solely for informational purposes, not for trading purposes or advice.</small>
+
+</div>
+</div>
+
+<div id="myDiv" class="col-lg-6"></div>
+
+</div>
+</div>
+</main>
+
+<footer class="footer mt-auto py-2 bg-secondary">
+<div class="container">
+<p class="text-light">Coded by Ahmad Barclay. No rights reserved. Get the code.</p>
+</div>
+</footer>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js" integrity="sha256-zGo0JbZ5Sn6wU76MyVL0TrUZUq5GLXaFnMQCe/hSwVI=" crossorigin="anonymous"></script>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,142 @@
+// SCRIPTS FOR UNOFFICIAL LEBANESE LIRA CURRENCY CONVERTER
+// Coded by Ahmad Barclay. No rights reserved.
+
+// SET GLOBAL VARIABLES
+
+// URL of CSV file containing unofficial and official LBP rates
+var csvurl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRbB3FUCo45T0XcPvODVZeLhECABwixfilwLGF3eG2Xj06GC86DlTkMTaKXJLSHniX6ZYPTjZZg6JqV/pub?gid=0&single=true&output=csv";
+// Today's date in yyyy-mm-dd format
+var today = new Date().toISOString().split('T')[0];
+// Default foreign currency
+var fc = "USD";
+var fcoff = "USDo";
+
+
+// INITIALIZE VALUES
+
+// read CSV file, convert to json format, get all of today's rates & set rate for default foreign currency
+fetch(csvurl).then((response) => {
+    return response.text();
+})
+.then((csvdata) => {
+    window.jsondata = $.csv.toObjects(csvdata);
+    window.todayrates = jsondata[jsondata.length - 1];
+    window.fcrate = parseFloat(todayrates[fc]);
+    window.today = todayrates["Date"];
+    document.getElementById("fcrate").innerHTML = fcrate.toFixed(2);
+    document.getElementById("lbp").value = fcrate.toFixed(2);
+    document.getElementById("todaydate").innerHTML = today;
+});
+
+
+// CURRENCY CONVERSION FUNCTIONS
+
+// Set listeners for user currency entry fields, to automatically update conversion when values are changed
+var fcvalue = document.getElementById("fc");
+var lbpvalue = document.getElementById("lbp");
+
+fcvalue.addEventListener("change", function(){
+	document.converter.lbp.value = (document.converter.fc.value * fcrate).toFixed(2);
+});
+
+lbpvalue.addEventListener("change", function(){
+	document.converter.fc.value = (document.converter.lbp.value / fcrate).toFixed(2);
+});
+
+
+// CURRENCY SELECTOR
+
+// Set listener for currency seletion dropdown, to automatically update fields & chart
+var dropdown = document.getElementById("dropdown");
+
+dropdown.addEventListener("change", function(){
+	fc = dropdown.value;
+  fcoff = fc + "o";
+	fcname = dropdown.selectedOptions[0].label;
+	fcrate = parseFloat(todayrates[fc]);
+    document.getElementById("fcname").innerHTML = fcname;
+    document.getElementById("fcrate").innerHTML = fcrate.toFixed(2);
+    document.getElementById("lbp").value = (document.getElementById("fc").value * fcrate).toFixed(2);
+    document.fc = fc;
+    document.fcoff = fcoff;
+    document.fcname = fcname;
+    document.fcrate = fcrate;
+    doplot();
+});
+
+
+// FUNCTION TO PLOT RATE TREND CHART USING PLOT.LY
+// Based on this Plot.ly example
+// https://plot.ly/javascript/time-series/#time-series-with-rangeslider
+
+var doplot = function() {
+
+Plotly.d3.csv(csvurl, function(err, rows){
+  function unpack(rows, key) {
+  	return rows.map(function(row) { return row[key]; });
+  }
+
+var data = [
+  {
+    type: "scatter",
+    mode: "lines",
+    name: "unofficial",
+    x: unpack(rows, 'Date'),
+    y: unpack(rows, fc),
+    line: {color: '#17BECF'}
+  },
+  {
+    type: "scatter",
+    mode: "lines",
+    name: "official",
+    x: unpack(rows, 'Date'),
+    y: unpack(rows, fcoff),
+    line: {color: '#7F7F7F'}
+  }
+];
+
+var layout = {
+	xaxis: {
+    autorange: true,
+    range: ['2019-11-06', today],
+    rangeselector: {buttons: [
+        {
+          count: 7,
+          label: '7 days',
+          step: 'day',
+          stepmode: 'backward'
+        },
+        {
+          count: 28,
+          label: '28 days',
+          step: 'day',
+          stepmode: 'backward'
+        },
+        {step: 'all'}
+      ]},
+    rangeslider: {range: ['2019-11-06', today]},
+    type: 'date'
+  },
+  yaxis: {
+    autorange: true,
+    type: 'linear'
+  },
+  margin: {
+    l: 40,
+    r: 40,
+    b: 20,
+    t: 20,
+    pad: 4
+  },
+  height: 300
+};
+
+Plotly.newPlot('myDiv', data, layout, {displayModeBar: false, responsive: true});
+});
+
+};
+
+
+// INITIAL CALL OF PLOT FUNCTION
+
+doplot();