FontanaShowers – Product Reviews
Curated testimonials across touchless faucets & shower systems. Browse, search, and filter to find relevant feedback quickly.
const sorters = { newest: { label: "Newest (by ID)", fn: (a,b)=> Number(b.reviewId)-Number(a.reviewId) }, ratingHigh: { label:"Rating: High → Low", fn: (a,b)=> b.rate-a.rate }, ratingLow: { label:"Rating: Low → High", fn: (a,b)=> a.rate-b.rate }, product: { label:"Product Code (A→Z)", fn:(a,b)=> a.productCode.localeCompare(b.productCode) } };
const $ = sel => document.querySelector(sel); const qEl = $('#q'), ratingEl = $('#rating'), sortEl = $('#sort'), resetEl = $('#reset'); const grid = $('#grid'); const shownEl = $('#shown'), totalEl = $('#total'), sortLabel = $('#sort-label'); const statTotal = $('#stat-total'), statAvg = $('#stat-avg'), stat5s = $('#stat-5s');
totalEl.textContent = RAW_REVIEWS.length; statTotal.textContent = RAW_REVIEWS.length; const avg = RAW_REVIEWS.reduce((s,r)=>s+(Number(r.rate)||0),0)/RAW_REVIEWS.length; statAvg.textContent = avg.toFixed(1); stat5s.textContent = Math.round(RAW_REVIEWS.filter(r=>r.rate===5).length/RAW_REVIEWS.length*100) + "%";
function clamp(n,min=0,max=5){ return Math.min(Math.max(n,min),max); } function starSVG(filled){ return ''; } function Stars(v){ const n = clamp(Number(v)||0); let s = '
'; return s; }
function Field(label,content){ return '
'+content+'
'; }
function ReviewCard(r){ const initial = String(r.name||'?').trim().slice(0,1).toUpperCase(); return `
${r.reviewTitle || 'Untitled Review'}
${r.description ? escapeHTML(r.description) : 'No description provided.'}
`)} ${Field('Location', `
`)} ${Field('Rating', Stars(r.rate))}
`; }
function escapeHTML(s){ return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
function compute(){ const text = qEl.value.trim().toLowerCase(); const rating = ratingEl.value; const sortKey = sortEl.value;
let arr = RAW_REVIEWS.filter(r=>{ const tmatch = !text || (r.reviewTitle||'').toLowerCase().includes(text) || (r.description||'').toLowerCase().includes(text) || (r.name||'').toLowerCase().includes(text) || (r.productCode||'').toLowerCase().includes(text) || (r.location||'').toLowerCase().includes(text); const rmatch = rating === 'all' || Number(r.rate) === Number(rating); return tmatch && rmatch; }).sort(sorters[sortKey].fn);
grid.innerHTML = arr.map(ReviewCard).join(''); shownEl.textContent = arr.length; sortLabel.textContent = sorters[sortKey].label; }
let to=null; function debouncedCompute(){ clearTimeout(to); to=setTimeout(compute, 120); }
qEl.addEventListener('input', debouncedCompute); ratingEl.addEventListener('change', compute); sortEl.addEventListener('change', compute); resetEl.addEventListener('click', ()=>{ qEl.value=''; ratingEl.value='all'; sortEl.value='newest'; compute(); });
// initial render
compute();
})();