Free Online Crypto Portfolio Profit and Loss Analyzer

Overview

A clean, professional, and high-performance browser-based utility designed to help cryptocurrency investors calculate their ROI, potential profit/loss, and portfolio weighted average price. This tool is built for speed and privacy, operating entirely client-side without any persistent storage.

Core Features

• Single Trade Calculator: Quickly calculate profit or loss for an individual position by entering buy price, quantity, fees, and current price.
• Portfolio Average (DCA) Module: A dynamic list builder where users can add multiple buy transactions. The app calculates the weighted average entry price and current total portfolio value in real-time.
• Dynamic Visuals: Automatic color-coding of results: vibrant green for profit, soft red for loss, and neutral gray for break-even.
• Currency Formatting: Intelligent input handling that formats numbers as currency automatically for better readability.
• Result Sharing: A "Copy Results" button that formats the calculation summary into a clean text block for easy sharing or notes.
• In-Memory Logic: Uses JavaScript memory objects to hold state. No data is written to the disk or localStorage.

UI/UX Specification

• Layout:
  • Top: Application Title and brief usage instructions.
  • Middle: A two-column desktop layout (Left: Input forms; Right: Live results dashboard).
  • Mobile: A stacked single-column layout.
  • Results: A sticky "summary card" that stays visible while the user scrolls through transaction lists.
• Design Aesthetic:
  • Professional, SaaS-style light theme.
  • Card-based containers with soft shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
  • Use of rounded corners (border-radius: 0.75rem) for a modern feel.
• Color Palette:
  • Background: #F8FAFC (Cool Gray 50)
  • Cards/Containers: #FFFFFF
  • Primary Brand/Action Color: #2563EB (Blue 600)
  • Profit Indicator: #10B981 (Emerald 500)
  • Loss Indicator: #EF4444 (Red 500)
  • Text: #1E293B (Slate 800)

Technical Directives

• Single File Constraint: All HTML, CSS (Tailwind CDN), and Vanilla JS must be inside one .html file.
• No Persistent Storage: Do not use localStorage, sessionStorage, IndexedDB, or Cookies. If the user refreshes the page, the state will reset (this is the intended behavior for privacy).
• Sandboxed Compatibility: Avoid all alert(), confirm(), or prompt() calls. Build custom modal overlays for any necessary confirmations.
• Performance: Use Event Delegation for the transaction list to ensure the UI remains snappy even if a user adds dozens of transactions.
• Responsive Design: Ensure mobile-first breakpoints. Touch targets for buttons should be at least 44px high for mobile usability.