Product Recommendation Engine

Product Recommendation Engine

Find the perfect product by answering a few simple questions.

1

Category

2

Preferences

3

Results

First, select a product category.

Electronics

Apparel

Home & Kitchen

$${p.price.toFixed(2)}

${p.desc}

`; }); }; // --- EVENT HANDLERS --- const handleCategorySelect = (e) => { const card = e.target.closest('.category-card'); if (!card) return; document.querySelectorAll('.category-card').forEach(c => c.classList.remove('selected')); card.classList.add('selected'); state.category = card.dataset.category; updateUI(); }; const handleNav = (direction) => { if (direction === 'next' && state.currentStep < 3) { if (state.currentStep === 1) buildPreferencesForm(); if (state.currentStep === 2) { // Gather preferences state.preferences.price = document.getElementById('pref-price')?.value; state.preferences.type = document.getElementById('pref-type')?.value; state.preferences.room = document.getElementById('pref-room')?.value; state.preferences.style = document.getElementById('pref-style')?.value; const genderRadio = document.querySelector('input[name="pref-gender"]:checked'); if (genderRadio) state.preferences.gender = genderRadio.value; displayResults(); } state.currentStep++; } else if (direction === 'prev' && state.currentStep > 1) { state.currentStep--; } updateUI(); }; const generatePDF = () => { const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); const pdfBtnContainer = document.getElementById('pdf-button-container'); if (!pdfContent || !pdfBtnContainer) return; pdfBtnContainer.style.display = 'none'; html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = pdfWidth - 20; const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); pdf.save('product-recommendations.pdf'); pdfBtnContainer.style.display = 'block'; }).catch(err => { console.error("Error generating PDF:", err); pdfBtnContainer.style.display = 'block'; }); }; // --- ATTACH LISTENERS --- steps[1].addEventListener('click', handleCategorySelect); nextBtn.addEventListener('click', () => handleNav('next')); prevBtn.addEventListener('click', () => handleNav('prev')); document.getElementById('download-pdf-btn').addEventListener('click', generatePDF); // --- INITIAL SETUP --- updateUI(); });
Scroll to Top