<!DOCTYPE html>
<!-- Form will be submitted - symbol, date, amount and plaintext name sent in query string - M -->
<html>
<head>
<title>Stockchoker: figure out what you could've made on a past investment</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" lang="en-US" content="past investment, stock, stock market, invest, investment, company interest, annual interest, market, current worth">
<meta name="description" lang="en-US" content="With Stockchoker, you can easily figure out what a past investment would be worth today. Pick any company, mutual fund or index fund.">
<meta property="og:title" content="Stockchoker">
<meta property="og:type" content="website">
<meta property="og:image" content="http://stockchoker.com/img/stockchokerOG.png">
<meta property="og:image:width" content="1500">
<meta property="og:image:height" content="1500">
<meta property="og:url" content="http://stockchoker.com">
<meta property="og:description" content="Ever wonder what a hypothetical investment would be worth today?">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!--<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
<link href="http://fonts.googleapis.com/css?family=Raleway:500,900,200" rel="stylesheet" type="text/css">
<!-- Production only -->
<link data-devonly="false" rel="stylesheet" href="css/css.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Production only -->
<script data-devonly="false" src="js/production.min.js"></script>
<script>
var phpData = false;
Global.setData(phpData);
var width = window.innerWidth;
if (window.innerWidth >= 1216) {
Global.setScreenSize("l");
}
else if (window.innerWidth >= 1024 ) {
Global.setScreenSize("m");
}
else {
Global.setScreenSize("s");
}
</script>
</head>
<body>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65010777-1', 'auto');
ga('send', 'pageview');
</script>
<!-- This makes the left side white on full-size screens -->
<div id="whiteLeft"></div>
<div id="container">
<div id="logoContainer">
<div id="logo"></div>
<div id="switchArea" data-hasresult="0">
<div id="resultContainer">
<br>
<div class="text">If you'd invested <span class="amountHolder dollar bold"></span> in <span id="stock"></span> on <span class="dateHolder"></span>, today the investment would be worth:</div>
<div id="currValue" class="dollar"></div>
<div id="resultBullets">
<div id="rateContainer">Annual rate of return: <span id="rateOfReturn" class="value percent"></span></div>
<div>Total increase: <span id="increase" class="value percent"></span></div>
<div>Total profit: <span id="profit" class="value dollar"></span></div>
<br>
<button id="moreInfoBtn" class="tinyBtn">Is this good?!</button>
<a id="compareBtn" alt="Compare Tool" href="#" target="_blank" class="tinyBtn black">Stock Wars</a>
<div id="buyText"></div>
<br>
<div id="disclaimer">These figures are based on Alpha Vantage's historical stock data, which takes into account splits and dividends. The most recent closing price is used for the selected symbol.</div>
</div>
</div>
<div id="textContainer">
<div id="logoText" class="animated tada">
How much could you have made?
</div>
<div id="logoSubtext">
Do you ever second-guess yourself for not investing in a certain stock?<br><br>
It's time to find out what you could've made.<br><br>
Did you choke?
</div>
</div>
</div>
</div>
<div id="sectionContainer">
<img id="curve" src="img/curve.svg">
<p id="header">Figure out what a hypothetical investment would be worth today</p>
<!-- sections -->
<div class="section chart">
<div class="hint">
Step 1: select a U.S. stock
</div>
<div class="sectionCell">
<input id="stockInput">
<input type="hidden" id="hiddenStockData" data-symbol="" data-full="">
</div>
</div>
<div class="section calendar">
<div class="hint">
Step 2: select a purchase date
</div>
<div class="sectionCell">
<div id="dateContainer">
<!-- Month select -->
<select class="select widget" id="monthSelect">
<option value="01" data-type="l">January</option>
<option value="02" data-type="s">February</option>
<option value="03" data-type="l">March</option>
<option value="04" data-type="m">April</option>
<option value="05" data-type="l">May</option>
<option value="06" data-type="m">June</option>
<option value="07" data-type="l">July</option>
<option value="08" data-type="l">August</option>
<option value="09" data-type="m">September</option>
<option value="10" data-type="l">October</option>
<option value="11" data-type="m">November</option>
<option value="12" data-type="l">December</option>
</select>
<select class="select widget" id="daySelect">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
</select>
<select class="select widget" id="yearSelect">
<!-- Dynamically generated -->
</select>
</div>
<script>
if (Global.screenSize == "s") {
document.write("<div class='smallAdContainer ad'>" + Global.helper.ADS[Global.screenSize] + "</div>");
}
</script>
</div>
</div>
<div class="section money">
<div class="hint">
Step 3: select the investment amount
</div>
<div class="sectionCell">
<div id="amountLabel">$</div>
<input id="amountInput" type="number" class="widget" value="1000" min="1" max="1999999">
</div>
</div>
<div class="section laptop">
<div class="hint">
Step 4: find out what you could've made
</div>
<div class="sectionCell">
<button id="submitButton" class="widget popHover">Calculate</button>
<script>
if (Global.screenSize == "s") {
document.write("<div class='smallAdContainer ad'>" + Global.helper.ADS[Global.screenSize] + "</div>");
}
</script>
</div>
</div>
<div class="section">
<!-- This is the black section -->
<div id="copyright">Copyright 2015-2017 Todd Froemling - <a href="mailto:stockchoker@gmail.com">email</a> with any questions, comments or suggestions</div>
</div>
<!-- Ad stuff -->
<div id="rightAdContainer" "="">
<div id="rightAdTop">
<script>
if (Global.screenSize != "s") {
document.write("<div class='adLabel'>Advertisement</div>");
document.write(Global.helper.ADS[Global.screenSize]);
if (Global.screenSize == "l") {
document.write("<div class='adLabel padTop'>Advertisement</div>");
document.write(Global.helper.ADS[Global.screenSize + "2"]);
}
}
</script>
</div>
</div>
</div>
</div>
<footer id="footer">
<div id="footerContent">
<nav id="navLinks">
<a href="dollar-a-day" alt="If you invested $1 a day">Dollar-a-day</a>
<a href="stockwatch/?s=AppleMicrosoftIBM" alt="Compare stocks over time">Stockwatch</a>
<a href="compare" alt="Stock Wars" class="gold">Stock Wars</a>
<!--<a href="quiz" alt="Quizzes">Quizzes</a> -->
<!-- <a href="http://blog.stockchoker.com" target="_blank">Blog</a> -->
</nav>
<div id="socialContainer">
<a href="#" id="twit" class="share social twit"></a>
<a href="#" id="fb" class="share social fb"></a>
<a href="#" id="email" class="social email"></a>
</div>
<div id="shareLabel">sharing is caring</div>
</div>
</footer>
<div class="md-modal md-effect-7" id="moreInfoModal" data-init="false">
<div class="md-content">
<!-- Title area -->
<div class="modalSection">
<div id="mod1">
<div id="modHeader"><span id="modSymbol" class="symbolHolder"></span> <span class="dropOnPhone">versus the world</span></div>
</div>
</div>
<!-- Subhead / description area -->
<div class="modalSection">
<div>How would the <span class="amountHolder dollar bold"></span> have done in the S&P 500 instead of <span class="symbolHolder"></span>? Or in a bank account? Take a look:</div>
</div>
<!-- Chart area -->
<div class="modalSection">
<div id="chartTitle">Current value of a <span class="amountHolder dollar bold"></span> investment</div>
<div id="chartSubtitle">Made on <span class="dateHolder"></span></div>
<canvas id="chart"></canvas>
</div>
<!-- Synopsis -->
<div class="modalSection">
<div id="synopsis"></div>
</div>
<!-- Fine print -->
<div class="modalSection">
<div>Notes: The S&P 500 is used to measure the overall stock market's performance. The bank account figure is calculated using a 0.50% interest rate compounded annually.</div>
</div>
<!-- Close Button area -->
<div class="modalSection">
<button id="closePopBtn" class="widget popHover">Close</button>
</div>
</div>
</div>
<div class="md-overlay" id="overlay"></div>
</body>
</html>