For this exercise, we will use data from the AlphaVantage API.
Specifically we will use the "Time Series Daily (Adjusted)" premium endpoint
to fetch historical stock prices about a given company. In this dataset we will focus on the adjusted closing price, which accounts for stock splits.
Consult the API documentation to learn more.
Setup
First obtain an AlphaVantage API Key, and supply it when prompted.
Unlike the other exercises, to fetch this stock data, we specifically need to use a "premium" key,
which can be obtained from an instructor.
Feel free to optionally modify the list of selectable stock symbols in the Stock Selection Form
by manually editing the options within the designated select element.
Part 1
Write JavaScript code to answer the questions below.
Log each of the answers to the console.
NOTE: Format all prices as currency using a dollar sign and rounding to two decimal places.
NOTE: Format all percentages with a percent sign and rounded to two decimals.
Define a function called updateDashboard. It should:
Identify the stock symbol that has been selected from the designated select element, and store it in a variable called symbol.
Dynamically compile a request URL for the specified company, and store it in a variable called requestUrl.
Fetch a CSV formatted dataset of historical daily adjusted stock prices from the API, using the specified request URL.
Display the number of datapoints provided. (i.e. 100).
Display the latest available date and the adjusted closing price on that day.
Display the earliest available date and the adjusted closing price on that day.
Calculate the rate of return (percent change) over the entire 100-day time period. To calculate the rate of return, use the earliest and latest adjusted closing prices.
Display the 100-day high and low price. To calculate the 100-day high and low, it is sufficient to use the maximum and minimum of all adjusted closing prices.
Invoke the function once when the page initially loads (no need for an event listener).
Add an event listener to also invoke the function whenever an option is selected from the dropdown menu in the Stock Selection Form.
Part 2
Write JavaScript code to answer the questions below.
Display the answers on the page in the designated areas.
Use the same currency and percent sign formatting as in Part 1 (except for the chart).
Revisit the updateDashboard from Part 1. It should also:
Display the following information on the page, using the designated span elements:
Display the earliest and latest available dates.
Display the adjusted closing price on the earliest day.
Display the adjusted closing price on the latest day.
Display the rate of return over the entire 100-day time period.
Display the 100-day high and low price.
Create a line chart of the adjusted closing prices over time. Include a chart title and axis labels. The chart title should include the selected stock symbol.