Decking Calculator

`); printWindow.document.close(); printWindow.focus(); printWindow.print(); }); // --- Email button action: hide all, show contact form --- document.getElementById('emailBtn').addEventListener('click', function(){ // Hide all form steps + progress bar document.querySelector('.progress-wrapper').style.display = 'none'; document.querySelectorAll('[data-step]').forEach(el => el.classList.add('hidden')); // Show the contact form div const formInfo = document.querySelector('.form-decking-info'); formInfo.style.display = 'block'; // ✅ Smooth scroll to bring form into focus formInfo.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Add a back button dynamically if not already there if (!formInfo.querySelector('.back-to-summary')) { const backBtn = document.createElement('button'); backBtn.textContent = '← Back to Summary'; backBtn.className = 'ghost back-to-summary'; backBtn.style.marginBottom = '15px'; formInfo.prepend(backBtn); backBtn.addEventListener('click', function(){ // Hide the contact form formInfo.style.display = 'none'; // Show back progress bar and summary step document.querySelector('.progress-wrapper').style.display = 'block'; showStep(9); // ✅ Scroll back up to summary smoothly document.querySelector('[data-step="9"]').scrollIntoView({ behavior: 'smooth', block: 'start' }); }); } }); /*document.getElementById('emailBtn').addEventListener('click', function(){ const resultsHtml = document.getElementById('results-area').innerText; const em = prompt('Enter email to send results to (demo only):'); if(!em) return; alert('Demo: email function is not connected. Paste results into your email client:\n\n' + resultsHtml); });*/ /* Calculation logic */ function calculateResults(){ const shapeSel = document.querySelector('#shape-grid .radio-card.active strong')?.innerText || '-'; const directionSel = document.querySelector('#direction-grid .radio-card.active strong')?.innerText || '-'; const subframeSel = document.querySelector('#subframe-grid .radio-card.active strong')?.innerText || '-'; const edgeSel = document.querySelector('#edge-grid .radio-card.active strong')?.innerText || '-'; const colourSel = document.querySelector('#color-grid .radio-card.active strong')?.innerText || '-'; const widthSel = document.querySelector('#width-grid .radio-card.active strong')?.innerText || '-'; const fixingSel = document.querySelector('#fixing-grid .radio-card.active strong')?.innerText || '-'; const shape = document.querySelector('#shape-grid .radio-card.active').getAttribute('data-value'); let area_sqm = 0; if(shape === 'triangle'){ const base = parseFloat($('#base_mm').value) || 0; const height = parseFloat($('#height_mm').value) || 0; area_sqm = (0.5 * base * height) / 1e6; } else { const L = parseFloat($('#length_mm').value) || 0; const W = parseFloat($('#width_mm').value) || 0; area_sqm = (L * W) / 1e6; } const board_width_mm = parseFloat(document.querySelector('#width-grid .radio-card.active')?.getAttribute('data-value') || 140); const board_width_m = board_width_mm / 1000.0; const waste_pct = (parseFloat($('#waste_pct').value) || 10) / 100; const default_length_m = 5.4; let linear_m_required = (area_sqm / board_width_m) * (1 + waste_pct); const total_boards_count = Math.ceil(linear_m_required / default_length_m); const total_fixings = Math.ceil(area_sqm * 8 * (1 + waste_pct)); const price_per_board = parseFloat($('#price_per_board').value) || 0; const estimated_board_cost = (price_per_board * total_boards_count) || 0; const grid = document.getElementById('summary-grid'); grid.innerHTML = ` `; const extra = document.getElementById('results-extra'); // Get selections for summary extra.innerHTML = ` You have selected:
Deck Shape : ${document.querySelector('#shape-grid .radio-card.active strong')?.innerText || ''}
Preferred Direction : ${document.querySelector('#direction-grid .radio-card.active strong')?.innerText || ''}
Sub-Frame : ${document.querySelector('#subframe-grid .radio-card.active strong')?.innerText || ''}
Edge Design ${document.querySelector('#edge-grid .radio-card.active strong')?.innerText || ''}
Decking Colour : ${document.querySelector('#color-grid .radio-card.active strong')?.innerText || ''}
Decking Board : ${document.querySelector('#width-grid .radio-card.active strong')?.innerText || ''}
Preferred Method of Fixing : ${document.querySelector('#fixing-grid .radio-card.active strong')?.innerText || ''}
${document.querySelector('#material-grid .radio-card.active')?.innerText || ''}

Waste Added: ${(waste_pct*100).toFixed(0)}%
${price_per_board ? `Estimated board cost: AUD ${estimated_board_cost.toFixed(2)}` : ''} `; // Store calculated values globally window.area_sqm = area_sqm; window.linear_m_required = linear_m_required; window.total_boards_count = total_boards_count; window.total_fixings = total_fixings; window.price_per_board = parseFloat(document.querySelector('#price_per_board')?.value) || 0; window.estimated_board_cost = window.price_per_board * total_boards_count; updateCF7HiddenFields(); bindSummaryToEmail(); const footer = document.getElementById('results-footer'); footer.innerHTML = `* Includes an additional ${(waste_pct*100).toFixed(0)}% for wastage. Estimate only.`; } function updateCF7HiddenFields() { // Selected values const shapeSel = document.querySelector('#shape-grid .radio-card.active strong')?.innerText || '-'; const directionSel = document.querySelector('#direction-grid .radio-card.active strong')?.innerText || '-'; const subframeSel = document.querySelector('#subframe-grid .radio-card.active strong')?.innerText || '-'; const edgeSel = document.querySelector('#edge-grid .radio-card.active strong')?.innerText || '-'; const colourSel = document.querySelector('#color-grid .radio-card.active strong')?.innerText || '-'; const widthSel = document.querySelector('#width-grid .radio-card.active strong')?.innerText || '-'; const fixingSel = document.querySelector('#fixing-grid .radio-card.active strong')?.innerText || '-'; // Calculated values (global variables set from calculateResults) const area_sqm = window.area_sqm || 0; const linear_m_required = window.linear_m_required || 0; const total_boards_count = window.total_boards_count || 0; const total_fixings = window.total_fixings || 0; const price_per_board = window.price_per_board || 0; const estimated_board_cost = window.estimated_board_cost || 0; // Assign to hidden CF7 fields const fields = { 'deck_shape': shapeSel, 'deck_direction': directionSel, 'deck_subframe': subframeSel, 'deck_edge': edgeSel, 'deck_colour': colourSel, 'deck_width': widthSel, 'deck_fixing': fixingSel, 'deck_area_sqm': area_sqm.toFixed(2), 'deck_linear_m_required': linear_m_required.toFixed(2), 'deck_total_boards_count': total_boards_count, 'deck_total_fixings': total_fixings, 'deck_price_per_board': price_per_board, 'deck_estimated_board_cost': estimated_board_cost }; for (const [name, val] of Object.entries(fields)) { const input = document.querySelector(`input[name="${name}"]`); if (input) input.value = val; } } /*function bindSummaryToEmail() { // const resultsArea = document.querySelector('#results-area'); const resultsArea = document.querySelector('#summary-grid'); if (!resultsArea) return; const clone = resultsArea.cloneNode(true); clone.querySelectorAll('button, .hidden').forEach(el => el.remove()); const htmlContent = clone.innerHTML; const summaryField = document.querySelector('input[name="materials_summary"]'); if (summaryField) summaryField.value = htmlContent; } */ function bindSummaryToEmail() { const resultsArea = document.querySelector('#results-area'); if (!resultsArea) return; // Clone and clean summary for email const clone = resultsArea.cloneNode(true); // Remove hidden elements or buttons if any clone.querySelectorAll('button, .hidden').forEach(el => el.remove()); // Inline styling for email (simple but neat) const emailHtml = ` `; const summaryField = document.querySelector('input[name="materials_summary"]'); if (summaryField) summaryField.value = emailHtml; } /* Init */ (function(){ initRadios(); showStep(1); })();