<form id="search">
  <label for="city">Destination</label>
  <input id="city" name="city" autocomplete="off" required>

  <label for="checkin">Check-in</label>
  <input id="checkin" name="checkin" type="date" required>

  <label for="checkout">Check-out</label>
  <input id="checkout" name="checkout" type="date" required>

  <button type="submit">Search stays</button>
</form>
<script>
  const ci = document.getElementById("checkin"), co = document.getElementById("checkout");
  ci.min = new Date().toISOString().slice(0, 10);
  ci.addEventListener("change", () => { co.min = ci.value; });
</script>

// Save form progress so users don't retype after an error
const form = document.getElementById("traveller-form");
form.addEventListener("input", () => {
  const data = Object.fromEntries(new FormData(form));
  try { sessionStorage.setItem("traveller", JSON.stringify(data)); } catch (e) {}
});
window.addEventListener("load", () => {
  try {
    const saved = JSON.parse(sessionStorage.getItem("traveller") || "{}");
    for (const [k, v] of Object.entries(saved)) if (form.elements[k]) form.elements[k].value = v;
  } catch (e) {}
});
// Never store card details this way

import asyncio
import httpx

SUPPLIERS = ["https://supplier-a.example/api/search", "https://supplier-b.example/api/search"]

async def query(client, url, params):
    try:
        r = await client.get(url, params=params, timeout=2.0)
        r.raise_for_status()
        return r.json().get("results", [])
    except (httpx.HTTPError, ValueError):
        return []          # one failing supplier should not break the page

async def search(params):
    async with httpx.AsyncClient() as client:
        lists = await asyncio.gather(*(query(client, u, params) for u in SUPPLIERS))
    return sorted((r for lst in lists for r in lst), key=lambda r: r.get("price", 0))
# URLs are placeholders; real suppliers need contracts and API keys

# Pattern: send the same idempotency key when retrying a payment request
import uuid

def create_payment(gateway_client, booking_id, amount):
    key = f"booking-{booking_id}"          # stable for this booking
    return gateway_client.create_charge(
        amount=amount,
        currency="INR",
        idempotency_key=key,               # gateway returns the same result on retry
    )
# Exact API names depend on the payment provider's SDK; the idea is the same

<!-- Images below the fold load only when needed -->
<img src="hotel-thumb-1.webp" alt="Hotel exterior at dusk"
     width="320" height="200" loading="lazy" decoding="async">
<!-- Fixed width/height prevents layout shift while loading -->

const price = 245000;
console.log(new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" }).format(price));
// ₹2,45,000.00
console.log(new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 }).format(price));
// ₹2,45,000

Project: Mini stays booking site
Frontend: search form, results with filters, details page, booking form
Backend: search API (mock suppliers), price check, booking with hold
Payments: sandbox/test mode only, idempotent requests
Extras: INR formatting, lazy images, error states
Deploy: live link + README with architecture

Booking flow checklist
☐ Full price shown before payment
☐ Price re-checked before charging
☐ Inventory held during checkout with expiry
☐ Idempotent payment requests
☐ Booking saved before confirmation email
☐ Clear error messages; form data kept
☐ Works on slow mobile networks

Project story (2 minutes)
1. The flow: search → select → pay → confirm
2. One hard problem: handling a slow supplier
3. Reliability: idempotent payments and holds
4. Performance: what you measured and improved
5. What you would add next