- "Website Interactivity" Exercise
- "Crunch the Data" Exercise
- "Dataviz" Exercise
- "Fetch the Data" Exercise
- Obtain an AlphaVantage API Key (or use one of the prof's premium keys) and consult the API Documentation
You've been hired by an investment firm to make a decision support tool, an interactive financial data dashboard, to help them decide whether to buy, sell, or hold a given stock.
The dashboard should allow a user to select from a predefined list of valid stock symbols, and click a button to fetch information about that stock.
The dashboard should then display the selected stock's latest closing price, and a line chart depicting its closing prices over time.
After a user inputs their API Key and selects a stock and clicks the "Go" button, the dashboard should:
- Capture these input values
- Compile the right URL given the provided inputs
- Fetch data from that URL
- Crunch the data
- Overwrite the HTML display values (symbol, latest close)
- Make a dataviz of closing prices over time
Create a new repository on GitHub, then download or "clone" the repository onto your local computer, then open the repository in a text editor, create a new "index.html" file, and paste inside the provided "index.html" starter code.
Preview this file in the browser to see the form inputs and placeholder outputs.
Iteratively develop the contents of your "index.html" page, using JavaScript to tackle the objectives.
You may modify the page's HTML contents if necessary, although it might not be necessary.
HINT: when crunching the time series data returned by this API, it might be helpful to use Object
methods like Object.keys()
and Object.values()
to convert the nested time series object into easier-to-work-with arrays.
Finally, configure GitHub Pages to host your website so it is publicly-accessible over the Internet.
Note the URL of your hosted site, and use this URL for deliverable submission purposes, and for sharing with friends.