CPT Feature Article

Student-Developed Procedure Requirements

Define the Procedure’s Name, Return Type, and Parameters

Requirement Met: The function fetchCryptoData is a student-developed function that fulfills the following requirements:

Procedure Name: fetchCryptoData
Return Type: void as the function does not explicitly return any value, but it performs asynchronous operations and updates the UI with a success/error message
Parameters: No direct parameters, but the function relies on the value of an input field with the id cryptoSymbol to determine the symbol of the cryptocurrency to fetch data for, which is a user-provided parameter

async function fetchCryptoData() {
    const symbol = document.getElementById('cryptoSymbol').value;
    console.log(`Fetching data for symbol: ${symbol}`);
            
    const response = await fetch(`https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_DAILY&symbol=${symbol}&market=USD&apikey=REDACTED`);

    if (response.ok) {
        const data = await response.json();
        displayCryptoData(data);
    } else {
        console.error('Failed to fetch cryptocurrency data.');
        document.getElementById('cryptoData').innerHTML = 'Failed to fetch cryptocurrency data.';
    }
}

Implements an Algorithm with Sequencing, Selection, and Iteration

Requirement Met: Within the function fetchCryptoData a student-developed algorithm exists which satisfies:

Sequencing: The function sequentially retrieves the cryptocurrency symbol from the UI input, stores this as a variable, asynchronously sends a request to the Alpha Vantage API with the symbol taken from the variable, and recieves/processes the response data from the backend, either displaying the data or handling/displaying errors.
Selection: The function uses a conditional statement to check if the response for the API is successful (response.ok). If it is, the function proceeds to extract and display the fetched data. Otherwise, the function logs an error message and updates the UI output to show a failure in fetching the data.
Iteration: There’s no explicit iteration in the function currently as it is designed to handle a single request for cryptocurrency data based on user input. However, this is an easy fix as it could be extended to support iteration if needed, such as fetching data for multiple cryptocurrencies in a loop.

async function fetchCryptoData() {
    const symbol = document.getElementById('cryptoSymbol').value;
    console.log(`Fetching data for symbol: ${symbol}`);
            
    const response = await fetch(`https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_DAILY&symbol=${symbol}&market=USD&apikey=REDACTED`);

    if (response.ok) {
        const data = await response.json();
        displayCryptoData(data);
    } else {
        console.error('Failed to fetch cryptocurrency data.');
        document.getElementById('cryptoData').innerHTML = 'Failed to fetch cryptocurrency data.';
    }
}

Procedure Call in the Program

Requirement Met: The function fetchCryptoData is called in the program as a button immediately after it is defined, ensuring that it is used after the user input. This demonstrates the integration of the student-developed procedure into the program, fulfilling its purpose of fetching and displaying crypto data upon initialization.

<button onclick="fetchCryptoData()">Fetch Crypto Data</button>

List Management Requirements

Storing Data in a List

Requirement Met: The following code demonstrated data is being storred in a list/array after it is fetched from the backend. The array (data) manages complex data structures by organizing the fetched crypto information into a iterable and readable format for the user output. The program would not be able to run without this list as it stores all the data that is displayed to the user in the output.

const response = await fetch(`https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_DAILY&symbol=${symbol}&market=USD&apikey=REDACTED`);
const data = await response.json();

Utilizing List Data

Requirement Met: The function fetchCryptoData retrieves cryptocurrency data from an API based on user input, represented by the symbol obtained from an HTML input field. While it does not explicitly utilize list data, it indirectly interacts with list data through the response obtained from the Alpha Vantage API (stored in response). The API response contains cryptocurrency data organized in lists/arrays, which is then processed further by the displayCryptoData function.

async function fetchCryptoData() {
    const symbol = document.getElementById('cryptoSymbol').value;
    console.log(`Fetching data for symbol: ${symbol}`);
            
    const response = await fetch(`https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_DAILY&symbol=${symbol}&market=USD&apikey=REDACTED`);

    if (response.ok) {
        const data = await response.json();
        displayCryptoData(data);
    } else {
        console.error('Failed to fetch cryptocurrency data.');
        document.getElementById('cryptoData').innerHTML = 'Failed to fetch cryptocurrency data.';
    }
}

function displayCryptoData(data) {
    if (!data['Time Series (Digital Currency Daily)']) {
        document.getElementById('cryptoData').innerHTML = 'No data available for this symbol.';
        return;
    }

    const timeSeries = data['Time Series (Digital Currency Daily)'];
    const latestDate = Object.keys(timeSeries)[0];
    const latestData = timeSeries[latestDate];

    const content = `
        <p>Date: ${latestDate}</p>
        <p>Open: ${latestData['1a. open (USD)']}</p>
        <p>High: ${latestData['2a. high (USD)']}</p>
        <p>Low: ${latestData['3a. low (USD)']}</p>
        <p>Close: ${latestData['4a. close (USD)']}</p>
        <p>Volume: ${latestData['5. volume']}</p>
    `;

    document.getElementById('cryptoData').innerHTML = content;
}

Purpose of Project

The purpose of this project is to provide users with an easy-to-use tool to find prices and latest info on cryptocurrencies. The user simply inputs a crypto symbol into the input box, clicks the “Fetch Crypto Data” button which runs the processes described above, and recieves an output with the latest data on the requested cryptocurrency, including prices at the open, close, high, low, and volume of crypto sold. There is also a useful “Info” section on the webpage that allows users to interpret the output and understand what they are seeing.

Proof of Work

Key Commit - Backend

class StockDataAPI(Resource):
    ALPHA_VANTAGE_API_KEY = "NN5Z6YJMAC2LMUNP"  # Replace with your actual API Key
    ALPHA_VANTAGE_BASE_URL = "https://www.alphavantage.co/query"

This was the commit where I committed the API url and key to my backend repository. The whole project and feature was based off this API and this commit, and it was very important because it came after hours of research for the best fitting API for my project and my feature.

Key Commit - Frontend

https://github.com/eshaank1/csp2/commit/de0e6e8b60ae37c84370f22c3e70d05d6d9ce7ba

This is the commit where I committed my full crypto fetch feature to the frontend repository. The whole feature was committed as one because I tested it on my local using make until I was satisfied with everything.

CryptoSense Feature Planning

Color Theme: Blue and Black
Simple box for input and output
Button to run the program
Add info legend at the top to help users
https://github.com/users/eshaank1/projects/4