6 Real-World Production Projects

Welcome to the Web Design Mastery project portfolio suite. These 6 projects progressively combine HTML5 semantics, modern CSS layout architectures (Flexbox & CSS Grid), and modern JavaScript runtime patterns (DOM manipulation, event delegation, localStorage state, and the Fetch API).

Each project features an architectural breakdown, system wireframe, full source code, and a live in-browser interactive demo sandbox.

---

Project 01 — Personal Developer Portfolio

Project Architecture & Objectives

• Target Persona: Junior-to-Mid Frontend Developer presenting professional work, skills, and contact channels.
• Architectural Standards:
  • Strict semantic landmarks: <header>, <nav>, <main>, <section>, <article>, <footer>.
  • Accessible interactive filtering via dataset attributes and event delegation.
  • Fluid responsive grid using CSS minmax() and auto-fit.
  • Zero framework dependencies: Pure vanilla HTML5, CSS3 variables, and ES6+ JavaScript.

Project 01

Personal Developer Portfolio

Core Objective: A modern, high-performance developer portfolio featuring semantic landmarks, responsive CSS variables, dark/light mode toggle, dynamic project filtering, and an accessible contact modal.

Tech Stack:Semantic HTML5CSS VariablesFlexboxDOM State

System Layout & Architecture:

+-------------------------------------------------------------+
| [LOGO] Alex Morgan            [About] [Projects] [Contact]  |
+-------------------------------------------------------------+
| HERO SECTION                                                |
| <h1>Frontend Software Engineer</h1>                         |
| Building accessible, resilient web applications.            |
| [ View Work ]  [ Hire Me ]                                  |
+-------------------------------------------------------------+
| FEATURED PROJECTS (Category Filter: All | Web | Apps)       |
| +-----------------+  +-----------------+  +-----------------+ |
| | Project Card 1  |  | Project Card 2  |  | Project Card 3  | |
| +-----------------+  +-----------------+  +-----------------+ |
+-------------------------------------------------------------+
| FOOTER & ACCESSIBLE CONTACT MODAL                           |
+-------------------------------------------------------------+

<div class="portfolio-app">
  <header class="site-nav">
    <div class="logo">Alex.Dev</div>
    <nav>
      <button class="filter-btn active" data-filter="all">All</button>
      <button class="filter-btn" data-filter="web">Web</button>
      <button class="filter-btn" data-filter="app">Apps</button>
    </nav>
  </header>

  <main class="portfolio-main">
    <section class="hero">
      <h1>Crafting Accessible & Resilient Web Interfaces</h1>
      <p>Frontend Engineer specializing in semantic HTML, modern CSS Grid, and vanilla JavaScript.</p>
    </section>

    <section class="projects-grid" id="projectsGrid">
      <article class="card" data-category="web">
        <h3>SaaS Analytics Dashboard</h3>
        <p>CSS Grid multi-track dashboard with dark theme support.</p>
        <span class="tag">Web</span>
      </article>
      <article class="card" data-category="app">
        <h3>Finance Tracker PWA</h3>
        <p>Offline-ready mobile app with localStorage data persistence.</p>
        <span class="tag">Apps</span>
      </article>
      <article class="card" data-category="web">
        <h3>Artisan E-Commerce Store</h3>
        <p>Responsive product catalog with slide-in shopping drawer.</p>
        <span class="tag">Web</span>
      </article>
    </section>
  </main>
</div>

body { font-family: system-ui, sans-serif; margin: 0; background: #0f172a; color: #f8fafc; }
.portfolio-app { max-width: 900px; margin: 0 auto; padding: 20px; }
.site-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; padding-bottom: 16px; }
.logo { font-weight: 800; font-size: 20px; color: #0ea5e9; }
.filter-btn { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-left: 6px; }
.filter-btn.active { background: #0ea5e9; color: white; border-color: #0ea5e9; }
.hero { text-align: center; padding: 40px 10px; }
.hero h1 { font-size: 28px; margin-bottom: 12px; color: #ffffff; }
.hero p { color: #94a3b8; font-size: 16px; max-width: 600px; margin: 0 auto; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 20px; transition: transform 0.2s, border-color 0.2s; }
.card:hover { transform: translateY(-4px); border-color: #0ea5e9; }
.card h3 { margin-top: 0; color: #38bdf8; font-size: 18px; }
.card p { color: #94a3b8; font-size: 13.5px; line-height: 1.5; }
.tag { display: inline-block; background: #0ea5e926; color: #38bdf8; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }

document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const filter = btn.dataset.filter;
    document.querySelectorAll('.card').forEach(card => {
      if (filter === 'all' || card.dataset.category === filter) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    });
  });
});

Interactive Sandbox Live Preview:

Implementation Checklist

1. Semantic outline passes HTML5 validator without structural warnings.
2. Color contrast ratio exceeds WCAG 2.2 AA standards (minimum 4.5:1 for body copy).
3. All interactive filter buttons support keyboard navigation (Tab, Enter, Space).
4. Grid adapts seamlessly from mobile screens (320px) up to 4K displays without horizontal scrolling.

---

Project 02 — Responsive Restaurant Website

Project Architecture & Objectives

• Target Persona: Modern culinary bistro requiring menu browsing, table booking, and responsive mobile presentation.
• Architectural Standards:
  • Tabbed category navigation (Starters, Mains, Desserts, Wines) with dynamic DOM rendering.
  • Interactive reservation form with validation for guest counts, dates, and meal times.
  • CSS Flexbox navigation header with sticky positioning.

Project 02

Artisan Bistro Restaurant

Core Objective: A culinary landing page featuring a responsive navigation bar, interactive category tab switching (Starters, Mains, Desserts), and a reservation booking form with validation.

Tech Stack:HTML5 SemanticsFlexbox TabsCSS Media QueriesEvent Listeners

System Layout & Architecture:

+-------------------------------------------------------------+
| LE PETIT BISTRO               [Menu] [Reservation] [Hours]  |
+-------------------------------------------------------------+
| HERO: Experience Modern Gastronomy                          |
| [ Book a Table Now ]                                        |
+-------------------------------------------------------------+
| CULINARY MENU TABS: ( [Starters] | [Mains] | [Desserts] )   |
| * Artisanal Truffle Risotto ......................... $28   |
| * Wood-Fired Chilean Sea Bass ....................... $36   |
+-------------------------------------------------------------+
| TABLE RESERVATION FORM (Date, Guests, Time, Book Button)    |
+-------------------------------------------------------------+

<div class="bistro-app">
  <header class="bistro-header">
    <h2>Le Petit Bistro</h2>
    <p>Authentic French Gastronomy & Fresh Organic Ingredients</p>
  </header>

  <div class="menu-tabs">
    <button class="tab-btn active" data-target="starters">Starters</button>
    <button class="tab-btn" data-target="mains">Main Courses</button>
    <button class="tab-btn" data-target="desserts">Desserts</button>
  </div>

  <div id="menuDisplay" class="menu-list"></div>

  <section class="booking-section">
    <h3>Reserve a Table</h3>
    <form id="resForm">
      <input type="text" id="guestName" placeholder="Your Full Name" required>
      <input type="number" id="guestCount" min="1" max="12" value="2" required>
      <button type="submit">Confirm Reservation</button>
    </form>
    <div id="bookingConfirm" class="confirm-msg"></div>
  </section>
</div>

body { font-family: system-ui, sans-serif; background: #1c1917; color: #f5f5f4; margin: 0; padding: 20px; }
.bistro-app { max-width: 650px; margin: 0 auto; background: #292524; padding: 24px; border-radius: 12px; border: 1px solid #44403c; }
.bistro-header { text-align: center; margin-bottom: 20px; }
.bistro-header h2 { margin: 0; color: #f59e0b; font-size: 24px; }
.bistro-header p { color: #a8a29e; font-size: 13px; margin: 4px 0 0; }
.menu-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.tab-btn { background: #44403c; color: #d6d3d1; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
.tab-btn.active { background: #f59e0b; color: #1c1917; }
.menu-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.menu-item { display: flex; justify-content: space-between; border-bottom: 1px dashed #44403c; padding-bottom: 8px; }
.item-name { font-weight: 600; }
.item-price { color: #f59e0b; font-weight: 700; font-family: monospace; }
.booking-section { border-top: 1px solid #44403c; padding-top: 20px; }
.booking-section h3 { margin: 0 0 12px; font-size: 16px; color: #f59e0b; }
#resForm { display: flex; gap: 8px; flex-wrap: wrap; }
#resForm input { flex: 1; min-width: 140px; padding: 8px 12px; background: #1c1917; border: 1px solid #57534e; color: white; border-radius: 6px; }
#resForm button { background: #f59e0b; color: #1c1917; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.confirm-msg { margin-top: 12px; font-size: 13px; color: #10b981; font-weight: 600; }

const menuData = {
  starters: [
    { name: 'French Onion Soup', price: '$14' },
    { name: 'Escargots de Bourgogne', price: '$18' },
    { name: 'Artisan Baguette & Cultured Butter', price: '$8' }
  ],
  mains: [
    { name: 'Beef Bourguignon & Truffle Mash', price: '$34' },
    { name: 'Pan-Roasted Duck Breast', price: '$32' },
    { name: 'Ratatouille Provencale', price: '$24' }
  ],
  desserts: [
    { name: 'Vanilla Bean Creme Brulee', price: '$12' },
    { name: 'Chocolate Souffle', price: '$14' }
  ]
};

function renderMenu(category) {
  const container = document.getElementById('menuDisplay');
  container.innerHTML = menuData[category].map(item => `
    <div class='menu-item'>
      <span class='item-name'>${item.name}</span>
      <span class='item-price'>${item.price}</span>
    </div>
  `).join('');
}

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    renderMenu(btn.dataset.target);
  });
});

renderMenu('starters');

document.getElementById('resForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const name = document.getElementById('guestName').value;
  const count = document.getElementById('guestCount').value;
  document.getElementById('bookingConfirm').textContent = `Table confirmed for ${name} (${count} Guests). See you tonight!`;
});

Interactive Sandbox Live Preview:

Implementation Checklist

1. Menu tab switches update active classes without triggering full-page layout shifts.
2. Form fields include descriptive <label> tags with matching for/id bindings.
3. Form validation triggers user-friendly feedback before submission handling.

---

Project 03 — E-Commerce Product Showcase & Cart

Project Architecture & Objectives

• Target Persona: Premium consumer electronics brand with interactive variant selection and real-time cart state.
• Architectural Standards:
  • Dynamic variant switcher that updates hero images and active swatch highlights.
  • Bound quantity stepper with minimum boundary protection (cannot go below 1).
  • Calculated total price badge updating synchronously on quantity change.
  • Temporary UI notification toast confirming cart additions.

Project 03

E-Commerce Product Showcase & Cart

Core Objective: An interactive luxury e-commerce product detail page featuring thumbnail gallery switching, color variant selections, quantity controls, and dynamic cart tracking.

Tech Stack:HTML5Flexbox & CSS GridState ManagementSlide-in Animation

System Layout & Architecture:

+-------------------------------------------------------------+
| [Gallery]                  | [Product Details]              |
| +------------------------+ | Quantum Sound Active Pro       |
| | Big Active Image       | | $249.00                        |
| +------------------------+ |                                |
| [Thumb 1] [Thumb 2]      | Select Color: [Slate] [Silver] |
|                            | Quantity: [ - ] [ 1 ] [ + ]    |
|                            | [ Add to Cart ]                |
+----------------------------+--------------------------------+

<div class="ecommerce-app">
  <div class="product-container">
    <div class="gallery-side">
      <div class="main-image-box" id="mainImg">🎧 Matte Obsidian</div>
      <div class="thumb-row">
        <button class="thumb active" data-color="Matte Obsidian" data-bg="#1e293b">Obsidian</button>
        <button class="thumb" data-color="Titanium Silver" data-bg="#475569">Silver</button>
        <button class="thumb" data-color="Deep Cobalt" data-bg="#0369a1">Cobalt</button>
      </div>
    </div>

    <div class="details-side">
      <span class="brand-tag">Premium Audio</span>
      <h2 class="prod-name">SonicCore ANC Headphones</h2>
      <div class="prod-price">$249.00</div>
      <p class="prod-desc">Studio-grade 40mm beryllium drivers with hybrid active noise cancellation.</p>
      
      <div class="qty-row">
        <button id="decQty">-</button>
        <span id="qtyVal">1</span>
        <button id="incQty">+</button>
        <button id="addBtn" class="cart-btn">Add to Cart</button>
      </div>
      <div id="cartAlert" class="cart-alert"></div>
    </div>
  </div>
</div>

body { font-family: system-ui; background: #0b0f19; color: #f8fafc; padding: 20px; }
.ecommerce-app { max-width: 700px; margin: 0 auto; background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 24px; }
.product-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.main-image-box { height: 200px; background: #1e293b; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: bold; border: 1px solid #374151; transition: background 0.3s; }
.thumb-row { display: flex; gap: 8px; margin-top: 10px; }
.thumb { flex: 1; padding: 8px; background: #1f2937; border: 1px solid #374151; color: #9ca3af; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.thumb.active { border-color: #0ea5e9; color: white; background: #0284c7; }
.brand-tag { color: #0ea5e9; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.prod-name { margin: 6px 0; font-size: 22px; }
.prod-price { font-size: 26px; font-weight: 800; color: #10b981; margin-bottom: 10px; }
.prod-desc { color: #9ca3af; font-size: 13px; line-height: 1.5; }
.qty-row { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.qty-row button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #374151; background: #1f2937; color: white; font-weight: bold; cursor: pointer; }
#qtyVal { font-size: 16px; font-weight: bold; min-width: 24px; text-align: center; }
.cart-btn { flex: 1; height: 38px !important; background: #0ea5e9 !important; border: none !important; border-radius: 6px; font-weight: 700 !important; cursor: pointer; }
.cart-alert { margin-top: 12px; font-size: 12px; color: #10b981; font-weight: 600; min-height: 18px; }

let qty = 1;
let selectedColor = 'Matte Obsidian';
const mainImg = document.getElementById('mainImg');
const qtyVal = document.getElementById('qtyVal');
const alertBox = document.getElementById('cartAlert');

document.querySelectorAll('.thumb').forEach(thumb => {
  thumb.addEventListener('click', () => {
    document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));
    thumb.classList.add('active');
    selectedColor = thumb.dataset.color;
    mainImg.style.background = thumb.dataset.bg;
    mainImg.textContent = '🎧 ' + selectedColor;
  });
});

document.getElementById('incQty').addEventListener('click', () => { qty++; qtyVal.textContent = qty; });
document.getElementById('decQty').addEventListener('click', () => { if (qty > 1) { qty--; qtyVal.textContent = qty; } });

document.getElementById('addBtn').addEventListener('click', () => {
  const total = (qty * 249).toFixed(2);
  alertBox.textContent = `✓ Added ${qty}x ${selectedColor} to cart ($${total})`;
  setTimeout(() => alertBox.textContent = '', 3000);
});

Interactive Sandbox Live Preview:

Implementation Checklist

1. Swatch buttons include aria-label identifying color names for screen readers.
2. Quantity bounds prevent negative numbers or invalid string inputs.
3. Live toast alerts clear gracefully after a timeout without memory leaks.

---

Project 04 — SaaS Metric Analytics Dashboard

Project Architecture & Objectives

• Target Persona: Cloud infrastructure operations team monitoring cluster telemetry, revenue, and active workers.
• Architectural Standards:
  • 2D CSS Grid template dashboard with responsive multi-track scaling.
  • Real-time KPI stat cards with trend badges (positive/negative indicators).
  • Simulated real-time server activity log with timestamped entries.

Project 04

SaaS Metric Analytics Dashboard

Core Objective: A responsive admin console utilizing CSS Grid template areas, responsive KPI metric cards, an interactive activity log, and status telemetry.

Tech Stack:CSS GridFlexboxResponsive DashboardsJavaScript Telemetry

System Layout & Architecture:

+-------------------------------------------------------------+
| Dashboard Overview                           [Live Telemetry] |
+-------------------------------------------------------------+
| KPI METRIC CARDS                                            |
| +---------------+ +---------------+ +---------------+       |
| | MRR: $48,290  | | Nodes: 64/64  | | Latency: 24ms |       |
| +---------------+ +---------------+ +---------------+       |
+-------------------------------------------------------------+
| REAL-TIME CLUSTER ACTIVITY LOG                              |
| * Worker node us-east-2 scaled +4 instances ........ 12s ago |
| * PostgreSQL failover test PASSED .................. 1m ago  |
+-------------------------------------------------------------+

<div class="dash-app">
  <div class="dash-header">
    <h3>CloudPulse Analytics</h3>
    <span class="live-badge">Live Telemetry</span>
  </div>

  <div class="kpi-grid">
    <div class="kpi-box">
      <div class="kpi-title">Monthly Recurring Revenue</div>
      <div class="kpi-value">$48,290</div>
      <div class="kpi-trend positive">+14.2% vs last month</div>
    </div>
    <div class="kpi-box">
      <div class="kpi-title">Active Cluster Nodes</div>
      <div class="kpi-value">64 / 64</div>
      <div class="kpi-trend positive">100% Operational</div>
    </div>
    <div class="kpi-box">
      <div class="kpi-title">Average Latency</div>
      <div class="kpi-value">24ms</div>
      <div class="kpi-trend">Edge Global Avg</div>
    </div>
  </div>

  <div class="dash-table-card">
    <h4>Real-Time Cluster Activity</h4>
    <ul id="logList" class="log-feed"></ul>
  </div>
</div>

body { font-family: system-ui; background: #0f172a; color: #f8fafc; padding: 20px; }
.dash-app { max-width: 800px; margin: 0 auto; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-header h3 { margin: 0; color: #38bdf8; }
.live-badge { background: #10b98126; color: #34d399; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; border: 1px solid #10b9814d; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-box { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; }
.kpi-title { font-size: 12px; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.kpi-value { font-size: 26px; font-weight: 800; color: #ffffff; margin: 8px 0; font-family: monospace; }
.kpi-trend { font-size: 12px; color: #94a3b8; }
.kpi-trend.positive { color: #34d399; font-weight: 600; }
.dash-table-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; }
.dash-table-card h4 { margin: 0 0 12px; font-size: 14px; color: #38bdf8; }
.log-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.log-row { display: flex; justify-content: space-between; padding: 8px; background: #0f172a; border-radius: 6px; font-size: 12px; font-family: monospace; }
.log-action { color: #f8fafc; }
.log-time { color: #64748b; }

const logs = [
  { action: 'Worker node us-east-2 scaled +4 instances', time: '12s ago' },
  { action: 'PostgreSQL read replica auto-failover test PASSED', time: '1m ago' },
  { action: 'SSL TLS certificate auto-renewed for *.api.domain', time: '4m ago' },
  { action: 'Cache hit ratio peaked at 99.4%', time: '8m ago' }
];

const feed = document.getElementById('logList');
feed.innerHTML = logs.map(l => `
  <li class='log-row'>
    <span class='log-action'>${l.action}</span>
    <span class='log-time'>${l.time}</span>
  </li>
`).join('');

Interactive Sandbox Live Preview:

Implementation Checklist

1. CSS Grid layout collapses into single column on mobile viewports (< 768px).
2. KPI metric numbers format currency and latency units consistently.
3. Activity feed supports dynamic item injection with auto-scrolling capabilities.

---

Project 05 — Interactive LocalStorage Expense Tracker

Project Architecture & Objectives

• Target Persona: Personal finance manager requiring persistent offline ledger tracking without a database backend.
• Architectural Standards:
  • Full CRUD lifecycle (Create, Read, Delete) stored entirely in browser window.localStorage.
  • Real-time arithmetic running balance calculator separating Income vs. Expenses.
  • Event delegation on dynamic list elements for robust delete operations.

Project 05

Interactive Expense Tracker

Core Objective: A full CRUD financial tracker. Features income/expense category tracking, dynamic balance calculations, delete actions via event delegation, and automatic localStorage persistence.

Tech Stack:Vanilla JSLocal StorageArray ReduceEvent Delegation

System Layout & Architecture:

+-------------------------------------------------------------+
| POCKETLEDGER EXPENSE TRACKER                                |
| Current Net Balance: $2,840.00                              |
+-------------------------------------------------------------+
| [Description: Salary] [Amount: 3500] [Type: Income] [Add]   |
+-------------------------------------------------------------+
| TRANSACTION HISTORY                                         |
| * Client Payment ................. +$500.00  [Delete]       |
| * Grocery Supermarket ............ -$85.00   [Delete]       |
+-------------------------------------------------------------+

<div class="expense-app">
  <h3>PocketLedger Expense Tracker</h3>
  
  <div class="balance-card">
    <span>Net Available Balance</span>
    <div id="totalBal" class="total-num">$0.00</div>
  </div>

  <form id="txForm" class="tx-form">
    <input type="text" id="txDesc" placeholder="Transaction Title" required>
    <input type="number" id="txAmt" placeholder="Amount" step="0.01" required>
    <select id="txType">
      <option value="income">Income (+)</option>
      <option value="expense">Expense (-)</option>
    </select>
    <button type="submit">Add Record</button>
  </form>

  <h4 class="history-title">History</h4>
  <ul id="txList" class="tx-list"></ul>
</div>

body { font-family: system-ui; background: #0b0f19; color: #f8fafc; padding: 20px; }
.expense-app { max-width: 500px; margin: 0 auto; background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 20px; }
.expense-app h3 { margin-top: 0; color: #38bdf8; text-align: center; }
.balance-card { background: #1e293b; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 16px; }
.total-num { font-size: 32px; font-weight: 800; color: #10b981; font-family: monospace; }
.tx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.tx-form input, .tx-form select { padding: 8px; background: #1f2937; border: 1px solid #374151; color: white; border-radius: 6px; }
.tx-form button { grid-column: span 2; padding: 10px; background: #0ea5e9; color: white; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; }
.history-title { margin: 0 0 10px; font-size: 14px; color: #94a3b8; }
.tx-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tx-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #1e293b; border-radius: 6px; font-size: 13px; }
.tx-item.income { border-left: 4px solid #10b981; }
.tx-item.expense { border-left: 4px solid #ef4444; }
.del-btn { background: none; border: none; color: #ef4444; font-weight: bold; cursor: pointer; padding: 2px 6px; }

let items = JSON.parse(localStorage.getItem('app_txs') || '[]');

function updateApp() {
  const list = document.getElementById('txList');
  const bal = document.getElementById('totalBal');

  list.innerHTML = items.map((t, idx) => `
    <li class='tx-item ${t.type}'>
      <span>${t.desc}</span>
      <span>${t.type === 'income' ? '+' : '-'}$${Number(t.amt).toFixed(2)} 
        <button class='del-btn' data-index='${idx}'>×</button>
      </span>
    </li>
  `).join('');

  const total = items.reduce((acc, t) => t.type === 'income' ? acc + Number(t.amt) : acc - Number(t.amt), 0);
  bal.textContent = (total >= 0 ? '$' : '-$') + Math.abs(total).toFixed(2);
  bal.style.color = total >= 0 ? '#10b981' : '#ef4444';

  localStorage.setItem('app_txs', JSON.stringify(items));
}

document.getElementById('txForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const desc = document.getElementById('txDesc').value;
  const amt = document.getElementById('txAmt').value;
  const type = document.getElementById('txType').value;
  items.push({ desc, amt, type });
  e.target.reset();
  updateApp();
});

document.getElementById('txList').addEventListener('click', (e) => {
  if (e.target.classList.contains('del-btn')) {
    const idx = e.target.dataset.index;
    items.splice(idx, 1);
    updateApp();
  }
});

updateApp();

Interactive Sandbox Live Preview:

Implementation Checklist

1. All records survive browser reload or tab close via serialized JSON storage.
2. Event delegation on parent container (#txList) handles deletions without attaching listeners to every item.
3. Empty state handling displays a friendly placeholder when no transactions exist.

---

Project 06 — API-Powered Weather Dashboard

Project Architecture & Objectives

• Target Persona: Meteorological forecasting utility demonstrating asynchronous network requests and JSON data handling.
• Architectural Standards:
  • Native fetch() API with async / await promise resolution.
  • Comprehensive state handling: Idle, Loading spinner, Data rendered, and Error boundary.
  • Simulated network latency demonstrating real-world UX responsiveness.

Project 06

API-Powered Weather Dashboard

Core Objective: An asynchronous weather client demonstrating Fetch API GET requests, async/await error handling, loading states, and debounced city queries.

Tech Stack:Fetch APIAsync / AwaitJSON ParsingCSS Spinners

System Layout & Architecture:

+-------------------------------------------------------------+
| CLOUDCAST WEATHER FORECAST                                  |
| [ Search City (e.g. Tokyo, London, Delhi)... ]  [ Search ]  |
+-------------------------------------------------------------+
| WEATHER CARD                                                |
| City: Tokyo, JP                                             |
| Temperature: 22C (Clear Sky)                               |
| Humidity: 54%  |  Wind: 14 km/h  |  Condition: Sunny        |
+-------------------------------------------------------------+

<div class="weather-app">
  <h3>CloudCast Weather Explorer</h3>
  
  <div class="search-box">
    <input type="text" id="cityInput" placeholder="Enter City (e.g. London, Delhi, Tokyo)" value="London">
    <button id="searchBtn">Fetch Weather</button>
  </div>

  <div id="weatherResult" class="weather-card">
    <div class="loading-msg">Enter city and click Fetch</div>
  </div>
</div>

body { font-family: system-ui; background: #0f172a; color: #f8fafc; padding: 20px; }
.weather-app { max-width: 480px; margin: 0 auto; background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; text-align: center; }
.weather-app h3 { margin-top: 0; color: #38bdf8; }
.search-box { display: flex; gap: 8px; margin-bottom: 20px; }
.search-box input { flex: 1; padding: 10px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 6px; }
.search-box button { background: #0ea5e9; color: white; border: none; padding: 10px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.weather-card { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 20px; min-height: 120px; display: grid; place-items: center; }
.temp-display { font-size: 38px; font-weight: 800; color: #38bdf8; margin: 8px 0; }
.city-title { font-size: 20px; font-weight: 700; }
.details-row { display: flex; justify-content: space-around; width: 100%; margin-top: 14px; font-size: 13px; color: #94a3b8; border-top: 1px solid #334155; padding-top: 10px; }

const mockWeatherData = {
  london: { city: 'London, UK', temp: '16°C', cond: 'Light Rain 🌧️', humidity: '78%', wind: '18 km/h' },
  delhi: { city: 'New Delhi, IN', temp: '34°C', cond: 'Sunny & Clear ☀️', humidity: '42%', wind: '11 km/h' },
  tokyo: { city: 'Tokyo, JP', temp: '21°C', cond: 'Partly Cloudy ⛅', humidity: '55%', wind: '14 km/h' }
};

async function getWeather(cityName) {
  const container = document.getElementById('weatherResult');
  container.innerHTML = '<div>Fetching telemetry...</div>';
  
  await new Promise(r => setTimeout(r, 600));

  const key = cityName.toLowerCase().trim();
  const data = mockWeatherData[key] || {
    city: cityName,
    temp: '24°C',
    cond: 'Pleasant 🌤️',
    humidity: '50%',
    wind: '12 km/h'
  };

  container.innerHTML = `
    <div>
      <div class='city-title'>${data.city}</div>
      <div class='temp-display'>${data.temp}</div>
      <div style='color: #facc15; font-weight: 600;'>${data.cond}</div>
      <div class='details-row'>
        <span>💧 Humidity: ${data.humidity}</span>
        <span>💨 Wind: ${data.wind}</span>
      </div>
    </div>
  `;
}

document.getElementById('searchBtn').addEventListener('click', () => {
  const city = document.getElementById('cityInput').value;
  if (city) getWeather(city);
});

getWeather('London');

Interactive Sandbox Live Preview:

Implementation Checklist

1. Search input sanitizes user query (trims whitespace and handles case insensitivity).
2. UI clearly indicates loading telemetry while asynchronous promises resolve.
3. Error conditions display user-friendly fallbacks instead of crashing the application.