6 Real-World Production Projects (Hinglish)

Web Design Mastery ke portfolio projects suite mein aapka swagat hai. Ye 6 projects progressively HTML5 semantics, modern CSS (Flexbox aur CSS Grid) aur JavaScript (DOM manipulation, event listeners, localStorage aur Fetch API) ko ek sath combine karte hain.

Har project mein architectural wireframe, pura copyable source code aur live interactive browser demo shamil hai.

---

Project 01 — Personal Developer Portfolio

Project Architecture & Objectives

• Target Persona: Junior-to-Mid Frontend Developer jo apne projects, technical skills aur contact channels professional style mein showcase karna chahta hai.
• Architectural Standards:
  • Strict semantic landmarks: <header>, <nav>, <main>, <section>, <article>, <footer>.
  • Accessible interactive filtering dataset attributes aur event delegation ke through.
  • Fluid responsive grid using CSS minmax() aur auto-fit.
  • Zero external framework dependencies: Pure vanilla HTML5, CSS3 variables, aur ES6+ JavaScript.

Project 01

Developer Portfolio Website (Hinglish)

Core Objective: Modern responsive developer portfolio jisme category filter buttons, dark theme aur dynamic project cards shamil hain.

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 HTML5 validator se pass honi chahiye without any warnings.
2. Color contrast ratio WCAG 2.2 AA standards (minimum 4.5:1 for body copy) meet kare.
3. Sabhi interactive filter buttons keyboard accessible hon (Tab, Enter, Space).
4. Grid mobile (320px) se lekar 4K screens tak smoothly adapt kare without horizontal scroll.

---

Project 02 — Responsive Restaurant Website

Project Architecture & Objectives

• Target Persona: Modern restaurant jisme menu browsing, table reservation booking, aur responsive presentation chahiye.
• Architectural Standards:
  • Tabbed category navigation (Starters, Mains, Desserts, Drinks) with dynamic DOM rendering.
  • Interactive reservation form with validation for guest counts, dates, aur meal slots.
  • CSS Flexbox navigation header with sticky positioning.

Project 02

Artisan Bistro Restaurant (Hinglish)

Core Objective: French restaurant landing page jisme category tab switching aur table reservation form working hai.

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 active class ko smoothly toggle kare bina page jump ke.
2. Form fields mein descriptive <label> tags proper for/id bindings ke sath hon.
3. Form validation user-friendly feedback alert trigger kare before handling submission.

---

Project 03 — E-Commerce Product Showcase & Cart

Project Architecture & Objectives

• Target Persona: Premium electronics brand jisme interactive variant selection aur real-time cart state needed hai.
• Architectural Standards:
  • Dynamic variant switcher jo active color swatch aur hero product image update karta hai.
  • Bound quantity stepper with minimum boundary protection (1 se kam nahi ja sakta).
  • Total price badge synchronously update hota hai quantity increment hone par.
  • Temporary UI notification toast confirm karta hai item addition.

Project 03

E-Commerce Product Showcase & Cart (Hinglish)

Core Objective: Luxury headphones product page jisme color variants switcher, quantity counter aur live add-to-cart alert working hai.

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 mein aria-label color names ko define kare screen readers ke liye.
2. Quantity boundary negative numbers ya invalid inputs ko strictly block kare.
3. Live toast alerts timeout ke baad clean ho jaye without memory leak.

---

Project 04 — SaaS Metric Analytics Dashboard

Project Architecture & Objectives

• Target Persona: Cloud infrastructure operations team jo cluster telemetry, revenue, aur active nodes monitor kar rahi hai.
• Architectural Standards:
  • 2D CSS Grid template dashboard with responsive multi-track scaling.
  • Real-time KPI stat cards with trend badges (positive / neutral metrics).
  • Live server activity log with realistic simulated events.

Project 04

SaaS Analytics Dashboard (Hinglish)

Core Objective: CSS Grid 2D layout se bana hua enterprise admin console jisme live KPI metric cards aur server activity feed working hai.

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 mobile screens par cleanly single-column stack mein convert ho jaye.
2. KPI metric numbers currency aur latency units ko clearly display karein.
3. Activity feed auto-scroll aur readable timestamps show kare.

---

Project 05 — Interactive LocalStorage Expense Tracker

Project Architecture & Objectives

• Target Persona: Personal expense ledger jo offline browser storage mein persist rehta hai without backend server.
• Architectural Standards:
  • Complete CRUD lifecycle (Create, Read, Delete) stored entirely in browser window.localStorage.
  • Real-time arithmetic running balance calculator separating Income vs. Expenses.
  • Event delegation on list parent for high-performance delete operations.

Project 05

Interactive Expense Tracker (Hinglish)

Core Objective: Full CRUD financial tracker jisme income/expense tracking, balance calculation aur localStorage data save working hai.

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. Sabhi records browser refresh ya tab close ke baad bhi localStorage mein persist karein.
2. Event delegation parent element (#txList) par listener rakh ke dynamic items handle kare.
3. Empty state handling clean placeholder message dikhaye jab koi transaction na ho.

---

Project 06 — API-Powered Weather Dashboard

Project Architecture & Objectives

• Target Persona: Weather forecasting application jo asynchronous network requests aur JSON handling demonstrate karta hai.
• Architectural Standards:
  • Native fetch() API with async / await promise resolution.
  • Complete UI state handling: Idle, Loading spinner, Rendered data, and Error state.
  • Simulated network latency realistic user experience ke liye.

Project 06

API-Powered Weather Dashboard (Hinglish)

Core Objective: Asynchronous weather application jo Fetch API, async/await, error states aur live simulated network data dikhata hai.

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. City search query sanitize kare (trim whitespace aur case insensitivity).
2. UI clearly loading feedback show kare jab tak async request complete na ho.
3. Network error ya unknown city par application crash hone ke bajaye friendly fallback dikhaye.