xmichaelx/wallet_worth_estimator.html

## wallet_worth_estimator.html
<!DOCTYPE html>
<html>
  <head>
      <title>Wallet worth estimator</title>
      <meta name="description" content="Small snippet of code for estimating worth of your crypto wallet">
      <meta name="author" content="Michał Drzał - michal.drzal@gmail.com">
      <meta name="version" content="0.1.1">
      <script>
        var portfolio = (function() {
            function add(currency, amount, usdValue) {
              var tr = document.createElement('tr');
              tr.innerHTML = [
                "<td><input maxlength=\"6\"  type=\"text\" value=\"" + currency + "\" /></td>",
                "<td><input type=\"number\" step=\"0.0001\" value=\"" + amount + "\" /></td>",
                "<td><b>" + usdValue + "</b></td>"
              ].join(" ");

              document.getElementById("table").appendChild(tr);
            }

            function parsePortfolio() {
              return Array.from(document.getElementsByTagName("tr")).slice(1)
                .map(x=> {
                  return [x.children[0].children[0].value, x.children[1].children[0].valueAsNumber]
                });
            }

            function save() {
              localStorage.setItem("portfolio", JSON.stringify(parsePortfolio()));
            }

            function update(useLocalStorage) {
              getData(useLocalStorage).then(data => {
                var portfolio = useLocalStorage ? JSON.parse(localStorage.getItem("portfolio")) : parsePortfolio();

                if (!portfolio) {
                  return;
                }

                document.getElementById("table").innerHTML = "<tr><th>symbol</th><th>amount</th><th>$</th></tr>";

                var total = 0;
                portfolio.forEach(item => {
                  var currency = data ? data.find(x=> x["symbol"].toLowerCase() == item[0].toLowerCase().trim()) : null;
                  var dollarAmount = currency ? parseFloat(currency["price_usd"]) * item[1] : 0;
                  total += dollarAmount;
                  add(item[0], item[1], dollarAmount);
                });
                document.getElementById("total").innerHTML = "Total wallet worth: " + total.toFixed(3) + " $";
                document.getElementById("updated").innerHTML = "Updated: " + new Date(+localStorage.getItem("last_update")).toISOString();
              });
            }

            function getData(useLocalStorage) {
              var diff = Math.abs(Date.now() - localStorage.getItem("last_update"));
              if ((diff < 10000) || useLocalStorage) { // wait at least 10s between requests, don't be a dick
                return new Promise((resolve) => resolve(JSON.parse(localStorage.getItem("data"))));
              } else {
                return fetch("https://api.coinmarketcap.com/v1/ticker/")
                  .then(x=>x.json()).then(data => {
                    localStorage.setItem("last_update", Date.now().toString());
                    localStorage.setItem("data", JSON.stringify(data));
                    return data;
                  });
              }
            }

            function clear() {
              localStorage.clear();
              document.getElementById("table").innerHTML = "<tr><th>symbol</th><th>amount</th><th>$</th></tr>";
              add("",0,0);
            }

            return { add, save, update, clear };
          })();

          window.onload = () => portfolio.update(true);
      </script>
  </head>
  <body>
    <button onclick="portfolio.add('', 0.0, 0.0)" title="Adds new item to portfolio">Add</button>
    <button onclick="portfolio.save()" title="Persists portfolio value in local storage">Save</button>
    <button onclick="portfolio.update(true)" title="Restores portfolio values saved in local storage">Restore</button>
    <button onclick="portfolio.update(false)" title="Recalculates values and if new data is available then it is used">Recalculate</button>
    <button onclick="portfolio.clear()"  title="Clears all local data">Clear</button>
    <h3 id="updated">Updated: </h3>
    <h3 id="total">Total wallet worth: 0$</h3>
    <table id="table">
        <tr><th>symbol</th><th>amount</th><th>$</th></tr>
        <tr>
          <td><input maxlength="6"  type="text" value="" /></td>
          <td><input type="number" step="0.0001" value="0" /></td>
          <td><b>0</b></td>
        </tr>
    </table>
    Donate <a href="https://coinmarketcap.com/">CoinMarketCap</a> for providing their API<br/>
    License: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Wallet worth estimator</title>
	<meta name="description" content="Small snippet of code for estimating worth of your crypto wallet">
	<meta name="author" content="Michał Drzał - michal.drzal@gmail.com">
	<meta name="version" content="0.1.1">
	<script>
	var portfolio = (function() {
	function add(currency, amount, usdValue) {
	var tr = document.createElement('tr');
	tr.innerHTML = [
	"<td><input maxlength=\"6\" type=\"text\" value=\"" + currency + "\" /></td>",
	"<td><input type=\"number\" step=\"0.0001\" value=\"" + amount + "\" /></td>",
	"<td><b>" + usdValue + "</b></td>"
	].join(" ");

	document.getElementById("table").appendChild(tr);
	}

	function parsePortfolio() {
	return Array.from(document.getElementsByTagName("tr")).slice(1)
	.map(x=> {
	return [x.children[0].children[0].value, x.children[1].children[0].valueAsNumber]
	});
	}

	function save() {
	localStorage.setItem("portfolio", JSON.stringify(parsePortfolio()));
	}

	function update(useLocalStorage) {
	getData(useLocalStorage).then(data => {
	var portfolio = useLocalStorage ? JSON.parse(localStorage.getItem("portfolio")) : parsePortfolio();

	if (!portfolio) {
	return;
	}

	document.getElementById("table").innerHTML = "<tr><th>symbol</th><th>amount</th><th>$</th></tr>";

	var total = 0;
	portfolio.forEach(item => {
	var currency = data ? data.find(x=> x["symbol"].toLowerCase() == item[0].toLowerCase().trim()) : null;
	var dollarAmount = currency ? parseFloat(currency["price_usd"]) * item[1] : 0;
	total += dollarAmount;
	add(item[0], item[1], dollarAmount);
	});
	document.getElementById("total").innerHTML = "Total wallet worth: " + total.toFixed(3) + " $";
	document.getElementById("updated").innerHTML = "Updated: " + new Date(+localStorage.getItem("last_update")).toISOString();
	});
	}

	function getData(useLocalStorage) {
	var diff = Math.abs(Date.now() - localStorage.getItem("last_update"));
	if ((diff < 10000) \|\| useLocalStorage) { // wait at least 10s between requests, don't be a dick
	return new Promise((resolve) => resolve(JSON.parse(localStorage.getItem("data"))));
	} else {
	return fetch("https://api.coinmarketcap.com/v1/ticker/")
	.then(x=>x.json()).then(data => {
	localStorage.setItem("last_update", Date.now().toString());
	localStorage.setItem("data", JSON.stringify(data));
	return data;
	});
	}
	}

	function clear() {
	localStorage.clear();
	document.getElementById("table").innerHTML = "<tr><th>symbol</th><th>amount</th><th>$</th></tr>";
	add("",0,0);
	}

	return { add, save, update, clear };
	})();

	window.onload = () => portfolio.update(true);
	</script>
	</head>
	<body>
	<button onclick="portfolio.add('', 0.0, 0.0)" title="Adds new item to portfolio">Add</button>
	<button onclick="portfolio.save()" title="Persists portfolio value in local storage">Save</button>
	<button onclick="portfolio.update(true)" title="Restores portfolio values saved in local storage">Restore</button>
	<button onclick="portfolio.update(false)" title="Recalculates values and if new data is available then it is used">Recalculate</button>
	<button onclick="portfolio.clear()" title="Clears all local data">Clear</button>
	<h3 id="updated">Updated: </h3>
	<h3 id="total">Total wallet worth: 0$</h3>
	<table id="table">
	<tr><th>symbol</th><th>amount</th><th>$</th></tr>
	<tr>
	<td><input maxlength="6" type="text" value="" /></td>
	<td><input type="number" step="0.0001" value="0" /></td>
	<td><b>0</b></td>
	</tr>
	</table>
	Donate <a href="https://coinmarketcap.com/">CoinMarketCap</a> for providing their API<br/>
	License: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a>
	</body>
	</html>