/Stock-Market-Analysis

A web Application to show all available stocks in your portfolio and also their data over different ranges of time

Primary LanguageJavaScriptMIT LicenseMIT

📈 Stock Market Analysis Web App

A Stock Market Analysis Dashboard built using HTML, CSS, JavaScript, Bootstrap, and Chart.js.
This project visualizes stock market data, displays stock statistics, and generates interactive charts for popular companies.

🚀 Features

✅ Real-Time Stock Data – Fetches live-like stock statistics from an external API.
✅ Dynamic Chart Generation – Displays stock price trends over multiple timeframes using Chart.js.
✅ Stock Summary Section – Shows key stock insights and summaries.
✅ Responsive Design – Built with Bootstrap for clean, mobile-friendly layout.
✅ Interactive UI – Users can click on any stock to view detailed trends and stats.
✅ Custom Timeframes – Toggle between 1 Month, 3 Months, 1 Year, and 5 Years charts.

🧩 Project Structure

📦 Stock-Market-Analysis ├── index.html # Main HTML file (structure of the web page) ├── index.js # JavaScript logic (API fetch, chart rendering, interactivity) ├── index.css # Styling for the app layout └── README.md # Project documentation

🌐 APIs Used

The app retrieves data from a custom backend hosted on Render:

Purpose API Endpoint
Stock Statistics Data https://stock-market-api-k9vl.onrender.com/api/stocksstatsdata
Stock Historical Data https://stock-market-api-k9vl.onrender.com/api/stocksdata
Stock Profile Summary https://stock-market-api-k9vl.onrender.com/api/profiledata

🧱 External Libraries / Dependencies

Library Purpose CDN / Source
Bootstrap 5.3.3 For responsive layout and UI styling jsDelivr CDN
Chart.js To render interactive line charts jsDelivr CDN

No additional build tools or frameworks are used — everything runs directly in the browser.

⚙️ How It Works

1️⃣ Fetch and Display Stock Stats

  • The app fetches stock symbols (AAPL, MSFT, GOOGL, etc.)
  • Displays Book Value and Profit % in a clean list format.

2️⃣ Generate Dynamic Charts

  • Clicking on a stock loads its historical price chart using Chart.js.
  • Displays highest and lowest price points dynamically.

3️⃣ Timeframe Controls

  • Users can switch between multiple timeframes:
    • 1 Month
    • 3 Months
    • 1 Year
    • 5 Years

4️⃣ Stock Summary

  • Additional details like company summary are displayed in a dedicated section below the chart.

🖼️ UI Overview

Sections:

  1. 🏠 Header – Displays the app title.
  2. 📊 Chart Section – Shows real-time stock chart and stats.
  3. 🕒 Timeframe Buttons – Lets users change data range.
  4. 📋 Stock List – Lists all available stock tickers with stats.
  5. 🧾 Details Section – Displays stock summary and insights.

🧠 Key JavaScript Functions

Function Description
fetchStockData() Fetches stock statistics for each symbol.
displayStockData() Renders the stock list with book value and profit.
createStockChart(symbol) Generates Chart.js line chart for selected stock.
updateTimeframe(timeframe) Updates chart data based on selected timeframe.
renderstockData(symbol) Fetches and displays stock profile summary.

🧑‍💻 Tech Stack

  • Frontend: HTML5, CSS3, JavaScript (ES6+)
  • Framework: Bootstrap 5
  • Visualization: Chart.js
  • Data Source: Custom Render-hosted API
  • Runtime: Client-side only (no Node.js required)

⚡ Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/stock-market-analysis.git