building example page

Grimmopher · Jan 14, 2018 · 84f31e9 · 84f31e9
1 parent d827bd2
commit 84f31e9
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 54 deletions.
diff --git a/docs/gold-exchange.js b/docs/gold-exchange.js
diff --git a/docs/gold-exchange.js.map b/docs/gold-exchange.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Gold Exchange</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.36/css/uikit.min.css" />
+
+        <script>
+            let getInput = () => {
+                return document.getElementById("input").value;
+            }
+
+            let setOutput = (output) => {
+                let display = document.getElementById("output");
+                display.textContent = output;
+            }
+
+            let beginExchange = () => {
+                let input = getInput();
+                let output = this["gold-exchange"].exchangeCoins(input);
+                setOutput(output);
+            }
+        </script>
+    </head>
+    <body>
+        <div class="uk-container uk-text-center">
+                <h1 class="uk-margin-large-top uk-heading-line uk-text-center"><span>Gold Exchange</span></h1>
+
+                <div class="uk-margin-large-top" uk-grid>
+                    <div class="uk-dark uk-background-muted uk-padding uk-width-2-3@s uk-width-1-2@m uk-margin-auto">
+                        <input type="text" class="uk-input uk-text-center" id="input" oninput="beginExchange()" />
+                        <div id="output" class="uk-margin-large-top uk-text-large uk-text-bold">0g 0e 0s 0c</div>
+                    </div>
+                </div>
+        </div>
+    <script type="text/javascript" src="gold-exchange.js"></script></body>
+</html>
diff --git a/src/example.js b/src/example.js
@@ -0,0 +1,51 @@
+import { Exchanger } from './gold-exchange';
+
+let exchanger;
+let getExchanger = () => {
+    if (exchanger === null || exchanger === undefined) {
+        exchanger = new Exchanger({ rate: 1/50, newCurrency: [
+            { symbol: 'g', value: 1000 },
+            { symbol: 'e', value: 100 },
+            { symbol: 's', value: 10 },
+            { symbol: 'c', value: 1 }
+        ]});
+    }
+    return exchanger;
+}
+
+let parseInput = (input) => {
+    let inputCoins = new Map();
+    input = input.toLowerCase().split(' ');
+    input.forEach( (i) => {
+        let symbol = i.match(/[a-z]/);
+        if (symbol) {
+            let quantity = parseInt(i);
+            if (inputCoins.has(symbol)) {
+                inputCoins.set(symbol, inputCoins.get(symbol) + quantity);
+            } else {
+                inputCoins.set(symbol, quantity);
+            }
+        }
+    })
+    let coins = [];
+    inputCoins.forEach( (quantity, symbol) => {
+        coins.push({ symbol: symbol[0], quantity: quantity });
+    })
+    return coins;
+};
+
+let parseCoins = (coins) => {
+    return coins.reduce( (output, coin) => {
+        return output += `${coin.quantity}${coin.symbol} `;
+    }, '');
+}
+
+let exchangeCoins = (input) => {
+    let coins = parseInput(input);
+    let newCoins = getExchanger().exchange(coins);
+    let output = parseCoins(newCoins);
+
+    return output;
+}
+
+export  { exchangeCoins };
diff --git a/src/gold-exchange.js b/src/gold-exchange.js
@@ -7,7 +7,7 @@
 // oldCurrency and newCurrency default to 5e coin types, ie: p, g, e, s, c
 class Exchanger {
     constructor({rate, oldCurrency, newCurrency} = {}) {
-        this.convertToCopper = this.convertToBase.bind(this);
+        this.convertToBase = this.convertToBase.bind(this);
         this.convertToCoins = this.convertToCoins.bind(this);
         this.exchange = this.exchange.bind(this);
 

diff --git a/src/index.html b/src/index.html
@@ -6,16 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.36/css/uikit.min.css" />
 
-        <script type="text/javascript" src="https://unpkg.com/gold-exchange"></script>
         <script>
-            let newCurrency = [
-                { symbol: 'g', value: 1000 },
-                { symbol: 'e', value: 100 },
-                { symbol: 's', value: 10 },
-                { symbol: 'c', value: 1 }
-            ];
-            let exchanger = new this["gold-exchange"].Exchanger({ rate: 1/50, newCurrency: newCurrency });
-
             let getInput = () => {
                 return document.getElementById("input").value;
             }
@@ -25,46 +16,11 @@
                 display.textContent = output;
             }
 
-            let parseInput = (input) => {
-                let inputCoins = new Map();
-                input = input.toLowerCase().split(' ');
-                input.forEach( (i) => {
-                    let symbol = i.match(/[a-z]/);
-                    if (symbol) {
-                        let quantity = parseInt(i);
-                        if (inputCoins.has(symbol)) {
-                            inputCoins.set(symbol, inputCoins.get(symbol) + quantity);
-                        } else {
-                            inputCoins.set(symbol, quantity);
-                        }
-                    }
-                })
-                let coins = [];
-                inputCoins.forEach( (quantity, symbol) => {
-                    coins.push({ symbol: symbol[0], quantity: quantity });
-                })
-                return coins;
-            };
-
-            let parseCoins = (coins) => {
-                return coins.reduce( (output, coin) => {
-                    return output += `${coin.quantity}${coin.symbol} `;
-                }, '');
-            }
-
-            let exchangeCoins = (input) => {
-                let coins = parseInput(input);
-                let newCoins = exchanger.exchange(coins);
-                let output = parseCoins(newCoins);
-
-                setOutput(output);
-            }
-
             let beginExchange = () => {
                 let input = getInput();
-                exchangeCoins(input);
+                let output = this["gold-exchange"].exchangeCoins(input);
+                setOutput(output);
             }
-
         </script>
     </head>
     <body>

diff --git a/webpack.config.js → webpack.common.js b/webpack.config.js → webpack.common.js
@@ -3,14 +3,7 @@ const webpack = require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = {
-  entry: './src/gold-exchange.js',
   devtool: 'source-map',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'gold-exchange.js',
-    library: 'gold-exchange',
-    libraryTarget: 'umd'
-  },
   module: {
     loaders: [
         {

diff --git a/webpack.github.js b/webpack.github.js
@@ -0,0 +1,9 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const server = require('./webpack.server.js');
+const merge = require('webpack-merge');
+
+module.exports = merge(server, {
+  plugins: [
+    new CleanWebpackPlugin(['docs'])
+  ]
+});