Construction Material Cost Estimator

Construction Material Cost Estimator

Estimate the material costs for your construction project.

Your cost estimate will appear here. Please fill out the 'Data Configuration' tab first.

Project Dimensions

Material Quality & Type

${formatCurrency(results.totalCost)}

Cost Breakdown

${breakdownHtml}
`; downloadBtn.classList.remove('hidden'); const ctx = document.getElementById('costChart')?.getContext('2d'); if(ctx) { if (costChart) costChart.destroy(); costChart = new Chart(ctx, { type: 'doughnut', data: { labels: Object.keys(results.breakdown).map(k => k.charAt(0).toUpperCase() + k.slice(1)), datasets: [{ data: Object.values(results.breakdown), backgroundColor: ['#ca8a04', '#1e40af', '#16a34a', '#b91c1c', '#6b7280'], borderColor: '#ffffff', borderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, tooltip: { callbacks: { label: (c) => `${c.label}: ${formatCurrency(c.raw)}` } } } } }); } } function downloadPDF() { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const contentToPrint = document.getElementById('dashboard-content'); if (!contentToPrint) return; html2canvas(contentToPrint, { scale: 2, useCORS: true, onclone: (doc) => { const chartCanvas = doc.getElementById('costChart'); if (chartCanvas && costChart) { const img = new Image(); img.src = costChart.toBase64Image(); img.style.maxWidth = '100%'; img.style.height = 'auto'; chartCanvas.parentNode.replaceChild(img, chartCanvas); } } }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight > 277 ? 277 : pdfHeight - 20); pdf.save('Construction-Material-Cost-Estimate.pdf'); }); }
Scroll to Top