Stock Price UI (Mock / API) | HTML, CSS & JavaScript

Stock Price UI (Mock / API) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #25

Project Overview

Stock Price UI is a beginner-friendly project built with HTML, CSS, and JavaScript that creates a simple interface for viewing stock prices and daily percentage changes. This project uses a mock stock data to simulate how a stock price tracker can work in a frontend application. Users can select a stock such as Apple, Google, Amazon, Microsoft etc. from the dropdown menu. After clicking the Get Price button, JavaScript finds the selected stock in the stockData object and displays its current mock price along with the daily percentage change.

Additionally, the project uses different visual indicators for positive and negative price changes. This project currently uses fixed mock data, its structure can later connect to a real stock API, making it a useful starting point for learning financial data interfaces.

Key Features

Stock Selection: Users can select a company from the dropdown menu, including Apple, Google, Amazon etc. which provides a simple way to choose which stock information they want to view.
Mock Stock Data: This project stores sample stock prices and daily percentage changes inside a JavaScript object.
Price Display: After selecting a stock, the application displays its corresponding price in the result area and JavaScript retrieves the price directly from the selected stock’s data.
Daily Percentage Change: The result also shows the stock’s daily percentage change. Positive and negative values help demonstrate how market movements can appear in a stock tracking interface.
Positive Change Indicator: When the stock change is zero or above, JavaScript applies the up class to the percentage value.
Negative Change Indicator: When the stock change is below zero, JavaScript applies the down class.
Dynamic Results: The result section updates whenever the user clicks Get Price. Therefore, users can select different stocks and view their corresponding information without refreshing the page.
Dropdown Interface: The <select> element provides a simple stock selection menu. This keeps the interface compact and prevents users from having to type stock symbols manually.
API-Ready Structure: Although this version uses mock data, the JavaScript separates stock information from the display logic.
Clean UI: The project uses a centered card layout with a dropdown, button, and result area. Therefore, the important stock information remains easy to find and read.
Frontend Data Handling: The project demonstrates how JavaScript can store structured data in an object and retrieve the correct values based on a user’s selection.
Beginner-Friendly Project: The application keeps the logic straightforward by combining a small JavaScript data object with DOM manipulation.

What You'll Learn

How to store structured stock information inside a JavaScript object.
How to access values from an object using a selected key.
How to read the selected value from a <select> element.
How to use document.getElementById() to access HTML elements.
How to create functions that respond to button clicks.
How to use conditional expressions with the ternary operator.
How to dynamically assign CSS classes with JavaScript.
How to use template literals to generate result content.
How to update an element using innerHTML.
How to represent positive and negative values visually.
How mock data can simulate an API-based application.

HTML Code

HTML creates the basic structure of the Stock Price Tracker. This .stock-container holds the complete application, while the <h2> displays the project title and the #stockSelect dropdown contains five stock options: Apple, Google, Amazon, Microsoft, and Tesla.

Next, the Get Price button calls the getStock() function when the user clicks it. The #result element starts empty and provides the area where JavaScript displays the selected stock’s price and daily percentage change. Finally, the page loads script.js after the main HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Stock Price UI</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="stock-container">
    <h2>Stock Price Tracker</h2>

    <select id="stockSelect">
      <option value="AAPL">Apple (AAPL)</option>
      <option value="GOOGL">Google (GOOGL)</option>
      <option value="AMZN">Amazon (AMZN)</option>
      <option value="MSFT">Microsoft (MSFT)</option>
      <option value="TSLA">Tesla (TSLA)</option>
    </select>

    <button onclick="getStock()">Get Price</button>

    <div id="result" class="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the layout and appearance of the Stock Price Tracker. The universal * selector sets box-sizing: border-box and applies the Segoe UI font, while the body uses Flexbox to center the application against the dark blue background.

The .stock-container creates the main white card with a fixed width, padding, rounded corners, centered text, and a box shadow. Next, the select and button selectors make the controls full width and add consistent spacing, borders, padding, and rounded corners, .result class controls the spacing and typography of the stock information. Finally, the .up class uses green for positive changes, while the .down class uses red for negative changes.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stock-container {
  background: #ffffff;
  width: 330px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 15px;
}

select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.result {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
}

.up {
  color: green;
}

.down {
  color: red;
}

Javascript Code

JavaScript handles the stock selection and result display. First, the code selects the #result element and creates a stockData object containing mock prices and daily percentage changes for AAPL, GOOGL, AMZN, MSFT, and TSLA. The getStock() function then reads the selected stock from #stockSelect and retrieves its matching data from stockData. Next, a ternary operator checks whether data.change is positive or negative and assigns either the up or down CSS class. The same approach adds a + sign when the change is positive.

Finally, result.innerHTML creates the displayed stock information using a template literal. It shows the stock symbol, price, and percentage change, while the dynamically selected CSS class controls whether the change appears in green or red.

const result = document.getElementById("result");

// Mock stock prices (for frontend demo)
const stockData = {
  AAPL: { price: 189.25, change: +1.35 },
  GOOGL: { price: 138.10, change: -0.82 },
  AMZN: { price: 145.60, change: +0.55 },
  MSFT: { price: 378.90, change: +2.10 },
  TSLA: { price: 212.45, change: -1.75 }
};

function getStock() {
  const stock = document.getElementById("stockSelect").value;
  const data = stockData[stock];

  const changeClass = data.change >= 0 ? "up" : "down";
  const sign = data.change >= 0 ? "+" : "";

  result.innerHTML = `
    📈 <strong>${stock}</strong><br><br>
    Price: $${data.price}<br>
    <span class="${changeClass}">
      Change: ${sign}${data.change}%
    </span>
  `;
}