CPT Feature Article

↑ FIRST 2 BULLETS ARE COLLEGEBOARD REQUIREMENTS ↑

Student-Developed Procedure Requirements

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

Requirement Met: The fetchStocks function is a student-developed procedure that fulfills the following:

Procedure’s Name: fetchStocks
Return Type: Implicitly returns Promise<void> due to its asynchronous nature (async keyword), although this is not explicitly defined in JavaScript.
Parameters: This is the only requirement not exactly met b/c my function can’t exactly take different parameters. This is an easy fix but it would require backend work
```
async function fetchStocks() {
  // Initialization and fetch operations here
}
```

ii. Implements an Algorithm with Sequencing, Selection, and Iteration

Requirement Met: Within fetchStocks, we implement an algorithm that includes:

Sequencing: The function sequentially fetches stock data, processes each stock, and updates the UI.
Selection: Uses conditional logic (profitLoss >= 0 ? 'profit' : 'loss') to determine the class for profit/loss display.
Iteration: Iterates over the fetched stock data using stocks.forEach(stock => {...}).

async function fetchStocks() {
    let overallBalance = 0;
    const response = await fetch('http://127.0.0.1:8055/api/stock/stocks');
    const stocks = await response.json();

    const stocksTableBody = document.getElementById('stocksTable').getElementsByTagName('tbody')[0];
    stocksTableBody.innerHTML = '';

    stocks.forEach(stock => {
        const profitLoss = (stock.current_price - stock.purchase_price) * stock.shares;
        overallBalance += profitLoss;
        const row = stocksTableBody.insertRow();
        // Cell content setup here
        const profitLossCell = row.insertCell(4);
        profitLossCell.textContent = profitLoss.toFixed(2);
        profitLossCell.className = profitLoss >= 0 ? 'profit' : 'loss';
    });

    document.getElementById('overallBalance').textContent = `Overall Balance: $${overallBalance.toFixed(2)}`;
    document.getElementById('overallBalance').className = overallBalance >= 0 ? 'profit' : 'loss';
}

iii. Procedure Call in the Program

Requirement Met: The fetchStocks function is called right after its definition, ensuring the stock table is populated as soon as the page loads or the script is executed.

document.addEventListener('DOMContentLoaded', fetchStocks);

This demonstrates the integration of the student-developed procedure into the program, fulfilling its purpose of fetching and displaying stock data upon initialization.

List Management Requirements

i. Storing Data in a List

Requirement Met: The following code segment demonstrates data being stored in a list (array) after fetching from the backend. This array (stocks) manages complex data structures by organizing stock information into an iterable format.

const response = await fetch('http://127.0.0.1:8055/api/stock/stocks');
const stocks = await response.json();

ii. Utilizing List Data

Requirement Met: The utilization of the stocks array is shown in the processing and UI updating part of the fetchStocks function. This demonstrates creating new data from existing data (calculating profit/loss) and accessing multiple elements in the list to fulfill the program’s purpose.

stocks.forEach(stock => {
    const profitLoss = (stock.current_price - stock.purchase_price) * stock.shares;
    // UI update operations here
});

This code segment not only iterates over the list to access and manipulate data but also dynamically updates the web page based on the content of the same list, showcasing effective complexity management within the program.

Each of these segments explicitly meets the outlined requirements, demonstrating how my code incorporates a student-developed procedure with sequencing, selection, and iteration, and how it effectively manages complexity through the use of lists for storing and utilizing data.

Component B: Video https://www.youtube.com/watch?v=Q-KidYJ3zDY

Following Collegeboard Requirements Met

□ Input to your program
□ At least one aspect of the functionality of your program
□ Output produced by your program

Your video may NOT contain:
□ Any distinguishing information about yourself
□ Voice narration (though text captions are encouraged)
Your video must be:
□ Either .webm, .mp4, .wmv, .avi, or .mov format
□ No more than 1 minute in length
□ No more than 30MB in file size

Work Proof

Key Backend Commit

This was a commit in which I created the database and the ability to fetch that database in the format of a good looking table. This would a larger portion of work.

Key Frontend Commit

This was a commit in which I created my feature. This included the profit/loss function, style, coloration, overall balance calculation, and also the tip message box.

Financial Log Feature Planning

-Stock Purchase Logging
-Enable users to log stock purchases, including company name, number of shares, purchase price, and purchase date.
-Profit/Loss Calculation:
Calculate the profit or loss for each stock based on current market prices versus purchase prices.
-Overall Portfolio Performance Aggregate data to display the total investment, overall profit or loss, and portfolio diversity.
Give some sort of advice so that the finacial log can help you either maintain or improve your performance in the stock market.
This is what will differentiate our stock logger from other ones online.
Ensure all user data is saved and can be retrieved across sessions.

Sketch initial designs for the financial log interface, focusing on simplicity and usability.
Plan for responsive design to accommodate various device sizes. Decide on a color scheme that distinguishes profit (e.g., green) from loss (e.g., red).

Technical Plan Frontend: Design, Profit/Loss function. Find a way to add a column to the table that reflects the profit/loss without having to alter the backend table fetch. Display the total balance, display a message and help to ther user. Also try and dynamic color the profit/loss. Backend: Create a stock.py file that will allow me to add stocks to the database, fetch the database, and create a data table that can be shown to the user on the website. Database: Use SQLITE to store user stock data in a secure fashion.
What I pictured the final product would look like: