public/lab9/task3/index.html - main - Coderdev/web-nodejs-labs

public/lab9/task3/index.html
1 строка3 KB
Coderdev
23 апр 2026, 22:48
23 апр 2026, 22:48fe8b855
<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lab9 Task3</title><style>body{margin:0;font-family:Arial,sans-serif;background:#0f172a;color:#e2e8f0}.wrapper{max-width:1280px;margin:0 auto;padding:24px}.panel,.card{background:#111c34;border:1px solid #25314d;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.panel{padding:24px}.list-item{border-bottom:1px solid #25314d;padding:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}button,a.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;border:none;cursor:pointer}.muted{color:#94a3b8}.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}</style></head><body><div class="wrapper"><div class="topline"><a class="btn" href="/lab9/" style="background:#334155">← Назад</a><a class="btn" href="/lab9/task3/cart.html" id="cartLink">Моя корзина (0)</a></div><div class="panel" style="margin-top:16px"><h1 style="margin-top:0">Task 3 · Каталог и корзина</h1><div id="productsBox">Загрузка...</div></div></div><script>const API='/api/lab9/products';const CART_KEY='lab9_cart';const RUB=new Intl.NumberFormat('ru-RU',{style:'currency',currency:'RUB'});function formatPrice(cents){return RUB.format(Number(cents||0)/100)}function getCart(){return JSON.parse(localStorage.getItem(CART_KEY)||'[]')}function setCart(items){localStorage.setItem(CART_KEY,JSON.stringify(items));updateCartCounter()}function updateCartCounter(){const count=getCart().reduce((sum,item)=>sum+item.qty,0);document.getElementById('cartLink').textContent=`Моя корзина (${count})`}function addToCart(product){const cart=getCart();const existing=cart.find(item=>item.id===product.id);if(existing){existing.qty=Math.min(5,existing.qty+1)}else{cart.push({id:product.id,title:product.title,price:product.price,qty:1})}setCart(cart)}async function loadProducts(){const res=await fetch(API);const items=await res.json();const box=document.getElementById('productsBox');box.innerHTML=items.map(p=>`<div class="list-item"><div><strong>${p.title}</strong><br><span class="muted">Цена: ${formatPrice(p.price)} · Остаток: ${p.amount} шт.</span></div><button class="addBtn" data-id="${p.id}" data-title="${String(p.title).replace(/"/g,'&quot;')}" data-price="${p.price}">Добавить в корзину</button></div>`).join('');document.querySelectorAll('.addBtn').forEach(btn=>btn.addEventListener('click',e=>{addToCart({id:Number(e.target.dataset.id),title:e.target.dataset.title,price:Number(e.target.dataset.price)})}))}updateCartCounter();loadProducts();</script></body></html>