Web Price Calculator

Web Price Calculator: Estimate Your Website Development Cost :root { –primary-color: #004a99; –background-color: #f8f9fa; –card-background: #ffffff; –text-color: #333; –border-color: #ddd; –shadow-color: rgba(0, 0, 0, 0.1); } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(–background-color); color: var(–text-color); margin: 0; padding: 0; line-height: 1.6; } .container { max-width: 1000px; margin: 20px auto; padding: 20px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 10px var(–shadow-color); } h1, h2, h3 { color: var(–primary-color); text-align: center; margin-bottom: 20px; } h1 { font-size: 2.2em; } h2 { font-size: 1.8em; margin-top: 30px; border-bottom: 2px solid var(–primary-color); padding-bottom: 5px; } h3 { font-size: 1.4em; margin-top: 20px; } .loan-calc-container { background-color: var(–card-background); padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); margin-bottom: 30px; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(–primary-color); } .input-group input[type="number"], .input-group select { width: calc(100% – 22px); padding: 10px; border: 1px solid var(–border-color); border-radius: 4px; font-size: 1em; box-sizing: border-box; } .input-group input[type="number"]:focus, .input-group select:focus { border-color: var(–primary-color); outline: none; box-shadow: 0 0 0 2px rgba(0, 74, 153, 0.2); } .input-group .helper-text { font-size: 0.85em; color: #666; margin-top: 5px; display: block; } .input-group .error-message { color: #d9534f; font-size: 0.8em; margin-top: 5px; display: block; min-height: 1.2em; /* Prevent layout shift */ } .button-group { display: flex; justify-content: space-between; margin-top: 25px; gap: 10px; } .button-group button { padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s ease; flex: 1; } .button-group button.calculate-btn { background-color: var(–primary-color); color: white; } .button-group button.calculate-btn:hover { background-color: #003366; } .button-group button.reset-btn { background-color: #e0e0e0; color: var(–text-color); } .button-group button.reset-btn:hover { background-color: #cccccc; } .button-group button.copy-btn { background-color: #5cb85c; color: white; } .button-group button.copy-btn:hover { background-color: #4cae4c; } #results { margin-top: 30px; padding: 20px; background-color: #e7f3ff; /* Light blue background for results */ border: 1px solid #b3d7ff; border-radius: 8px; text-align: center; } #results h3 { margin-top: 0; color: var(–primary-color); } .primary-result { font-size: 2.5em; font-weight: bold; color: var(–primary-color); margin: 15px 0; } .intermediate-results { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px; margin-top: 20px; } .intermediate-results div { text-align: center; padding: 10px; background-color: white; border-radius: 5px; box-shadow: 0 1px 4px var(–shadow-color); flex: 1; min-width: 150px; } .intermediate-results span { display: block; font-size: 1.8em; font-weight: bold; color: var(–primary-color); } .intermediate-results p { font-size: 0.9em; margin: 5px 0 0 0; color: #555; } .formula-explanation { margin-top: 20px; font-size: 0.9em; color: #555; text-align: left; padding: 10px; background-color: #f0f0f0; border-left: 3px solid var(–primary-color); } .table-container { overflow-x: auto; margin-top: 30px; margin-bottom: 30px; border: 1px solid var(–border-color); border-radius: 8px; } table { width: 100%; border-collapse: collapse; text-align: left; } th, td { padding: 12px 15px; border: 1px solid var(–border-color); } thead { background-color: var(–primary-color); color: white; } tbody tr:nth-child(even) { background-color: #f2f2f2; } caption { caption-side: bottom; padding: 10px; font-size: 0.9em; color: #666; text-align: center; margin-top: 10px; } #chartContainer { width: 100%; max-width: 700px; margin: 30px auto; background-color: var(–card-background); padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); } #priceChart { display: block; width: 100%; height: auto; } .chart-legend { text-align: center; margin-top: 15px; font-size: 0.9em; color: #555; } .chart-legend span { display: inline-block; margin: 0 10px; } .chart-legend .color-box { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: middle; border: 1px solid var(–border-color); } .section { margin-top: 40px; padding: 30px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); margin-bottom: 30px; } .section p, .section ul, .section ol { margin-bottom: 15px; } .section ul { list-style: disc; padding-left: 25px; } .section ol { list-style: decimal; padding-left: 25px; } .section li { margin-bottom: 8px; } .section a { color: var(–primary-color); text-decoration: none; } .section a:hover { text-decoration: underline; } footer { text-align: center; margin-top: 40px; padding: 20px; font-size: 0.9em; color: #777; } @media (max-width: 768px) { .container { margin: 10px; padding: 15px; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } .button-group { flex-direction: column; } .button-group button { width: 100%; } .intermediate-results { flex-direction: column; align-items: center; } .intermediate-results div { width: 80%; margin-bottom: 15px; } }

Web Price Calculator: Estimate Your Website Development Cost

Estimate the total number of unique pages (e.g., Home, About, Services, Contact, Blog Posts).
Count complex functionalities like user accounts, payment gateways, custom forms, integrations.
Standard (Template-based) Custom (Unique UI/UX) Highly Custom (Advanced Animations/Interactions) Select the level of design uniqueness and interactivity required.
Basic (Static HTML/CSS) Standard CMS (WordPress, Joomla) Advanced CMS/Headless (Strapi, Contentful) Choose the system for managing website content.
Number of external services to connect (e.g., CRM, email marketing, analytics).
Estimated hours per month for updates, security, and minor changes.

Estimated Web Price

$0
$0

Design

$0

Development

$0

CMS Setup

Formula: Total Price = (Base Development Cost + Page Cost * Pages + Feature Cost * Features + Design Complexity Factor + CMS Factor + Integration Cost * Integrations) + Monthly Maintenance Cost * 12 (Annualized).

*Note: This is a simplified estimation. Actual costs may vary.*
Development Design CMS/Features
Breakdown of estimated costs by component
Component Estimated Cost Assumptions
Base Development $0 Standard hourly rate
Pages $0 Cost per page
Features $0 Cost per feature
Design Complexity $0 Factor based on selection
CMS Setup $0 Factor based on selection
Integrations $0 Cost per integration
Annual Maintenance $0 Estimated monthly hours * rate * 12
Total Estimated Price $0 Sum of all components
Detailed cost breakdown for your web price estimate

What is Web Price Estimation?

Web price estimation is the process of calculating the potential cost involved in designing, developing, and launching a website. It's a crucial step for businesses and individuals looking to build an online presence, ensuring they have a realistic budget and understand the financial commitment required. A thorough web price estimation considers various factors, from the number of pages and features to design complexity and the choice of content management system (CMS).

Understanding the web price is essential for effective project planning and resource allocation. It helps in comparing quotes from different web development agencies, negotiating contracts, and making informed decisions about project scope. Without a clear estimate, projects can easily run over budget, leading to delays and dissatisfaction. This calculator aims to provide a transparent and accessible way to get a preliminary understanding of your potential web price.

Web Price Calculator Formula and Mathematical Explanation

The web price calculator uses a multi-faceted formula to estimate the total cost of a website. It breaks down the cost into several key components, each influenced by user inputs. The core idea is to assign a value or factor to each element that contributes to the overall web price.

The simplified formula used is:

Total Price = (Base Development Cost + Page Cost * Pages + Feature Cost * Features + Design Complexity Factor + CMS Factor + Integration Cost * Integrations) + Monthly Maintenance Cost * 12

Let's break down the components:

  • Base Development Cost: A foundational cost representing the initial setup and core architecture of the website. This is a fixed starting point.
  • Page Cost * Pages: Each unique page on a website requires design and development effort. This component scales linearly with the number of pages entered.
  • Feature Cost * Features: Complex functionalities (e.g., user logins, e-commerce carts, custom calculators) require significant development time. This scales with the number of features.
  • Design Complexity Factor: This is a multiplier or added cost based on the chosen design level. A standard template design is cheaper than a fully custom, interactive UI/UX.
  • CMS Factor: The type of Content Management System impacts cost. A simple static site is less expensive than setting up and configuring a robust CMS like WordPress or a headless CMS.
  • Integration Cost * Integrations: Connecting with third-party services (APIs, payment gateways, CRMs) adds complexity and cost per integration.
  • Monthly Maintenance Cost * 12: Websites require ongoing upkeep. This component annualizes the estimated monthly hours for maintenance, updates, and security.

The calculator assigns default values to these cost components and factors, which can be adjusted by developers for more precise estimations. The goal is to provide a reasonable ballpark figure based on common industry pricing models.

Practical Examples (Real-World Use Cases)

The web price calculator is versatile and can be used for various scenarios:

Example 1: Small Business Brochure Website

  • Inputs: 5 Pages (Home, About, Services, Blog, Contact), 1 Feature (Contact Form), Standard Design, Basic CMS (WordPress), 0 Integrations, 2 Monthly Maintenance Hours.
  • Estimated Price: This scenario would likely result in a lower web price, focusing on essential information and a user-friendly interface. The cost would be driven primarily by page count and basic CMS setup.

Example 2: E-commerce Store

  • Inputs: 20 Pages (Homepage, Categories, Product Pages, Cart, Checkout, Account), 5 Features (Product Catalog, Shopping Cart, Payment Gateway, User Accounts, Order History), Custom Design, Standard CMS (WooCommerce on WordPress), 2 Integrations (Payment Gateway, Shipping API), 10 Monthly Maintenance Hours.
  • Estimated Price: This project involves significantly more complexity. The higher number of pages, critical features like payment processing, custom design, and integrations will substantially increase the web price.

Example 3: Custom Web Application

  • Inputs: 15 Pages (Dashboards, User Profiles, Data Entry Forms), 10 Features (Complex User Roles, Data Visualization, API Integrations, Real-time Updates), Highly Custom Design, Advanced CMS/Headless, 4 Integrations (CRM, Analytics, Email Service), 20 Monthly Maintenance Hours.
  • Estimated Price: This represents a high-end project. The extensive features, advanced integrations, highly custom design, and potentially a headless CMS architecture will result in the highest web price estimate.

These examples illustrate how different combinations of inputs lead to vastly different web price estimations, highlighting the importance of accurately defining project requirements.

How to Use This Web Price Calculator

Using this web price calculator is straightforward. Follow these steps to get a quick estimate for your website project:

  1. Enter Number of Pages: Estimate the total number of unique pages your website will have. Include your homepage, about us, services, contact, blog posts, etc.
  2. Specify Number of Key Features: List the complex functionalities your website needs. Think about user logins, payment systems, custom forms, search filters, or integrations.
  3. Select Design Complexity: Choose the level of design uniqueness. 'Standard' uses templates, 'Custom' involves unique UI/UX design, and 'Highly Custom' includes advanced animations and interactions.
  4. Choose Content Management System (CMS): Select the system you plan to use. 'Basic' is for static sites, 'Standard CMS' covers platforms like WordPress, and 'Advanced CMS/Headless' refers to more complex setups.
  5. Input Third-Party Integrations: Count how many external services (like CRMs, email marketing tools, payment gateways) need to be connected to your website.
  6. Estimate Monthly Maintenance Hours: Provide an approximate number of hours per month you anticipate needing for ongoing website updates, security checks, and minor modifications.
  7. Click 'Calculate Price': Once all fields are filled, click the button. The calculator will instantly display your estimated total web price, along with key intermediate costs for design, development, and CMS setup.
  8. Review Details: Examine the breakdown in the results section, the chart, and the table for a more granular understanding of the cost distribution.
  9. Use 'Copy Results': If you need to share the estimate or save it, use the 'Copy Results' button.
  10. Use 'Reset': To start over with different inputs, click the 'Reset' button. It will revert all fields to their default values.

Remember, this calculator provides an estimate. For a precise quote, consult with a professional web development agency.

Key Factors That Affect Web Price Results

Several factors significantly influence the final web price. Understanding these can help you refine your inputs for a more accurate estimate:

  • Scope of Work (Pages & Features): The most direct impact. More pages and complex features inherently require more development time and resources, driving up the web price.
  • Design Uniqueness and Interactivity: A highly custom design with intricate animations and unique user flows demands more creative and technical effort than a standard template-based design.
  • Technology Stack: The choice of programming languages, frameworks, and CMS platforms affects development speed and cost. Some technologies are more complex or require specialized skills.
  • Third-Party Integrations: Integrating with external APIs (e.g., payment gateways, CRMs, social media) adds complexity. Each integration requires testing and potential troubleshooting.
  • Content Creation and Migration: While not always directly in the calculator, the need for professional copywriting, image sourcing, or migrating existing content can add significant costs.
  • E-commerce Functionality: Building online stores involves specific features like product management, secure payment processing, and inventory tracking, which are typically more expensive.
  • Performance Optimization and Security: Ensuring a website is fast, secure, and scalable requires specialized knowledge and effort, impacting the overall web price.
  • Ongoing Maintenance and Support: Post-launch, regular updates, security patches, and technical support are necessary. The level of required maintenance influences the long-term web price.

By carefully considering these elements when using the calculator, you can achieve a more realistic web price estimation.

Frequently Asked Questions (FAQ)

Q1: Is this calculator's estimate a final quote?

A: No, this calculator provides a preliminary estimate based on general industry standards and your inputs. A final quote requires a detailed discussion with a web development agency to understand specific project nuances.

Q2: What is considered a "key feature"?

A: Key features are functionalities beyond basic content display. Examples include user registration/login, payment processing, search filters, custom forms, appointment booking, or integration with other software.

Q3: How does the CMS choice affect the web price?

A: A basic static site is generally the least expensive. Standard CMS platforms like WordPress offer a balance of flexibility and cost. Advanced or headless CMS solutions often require more specialized development expertise, potentially increasing the web price.

Q4: Does the estimate include domain name and hosting costs?

A: This calculator primarily focuses on the design and development costs. Domain registration and hosting fees are typically separate recurring expenses and are not included in this estimate.

Q5: What if my project doesn't fit neatly into the categories?

A: This calculator uses simplified inputs. For unique or complex projects, it's best to consult with developers. You can use the calculator to get a general idea and then discuss the specifics with professionals.

© 2023 Your Company Name. All rights reserved.

var baseDevRate = 75; // Base hourly rate for development var pageCost = 150; // Cost per page var featureCost = 500; // Cost per complex feature var integrationCost = 400; // Cost per integration var maintenanceRate = 75; // Hourly rate for maintenance var designComplexityFactors = { 1: 1.0, // Standard 2: 1.5, // Custom 3: 2.5 // Highly Custom }; var cmsFactors = { 1: 0.8, // Basic 2: 1.2, // Standard CMS 3: 1.8 // Advanced CMS }; function validateInput(id, min, max, errorId, helperText) { var input = document.getElementById(id); var errorElement = document.getElementById(errorId); var value = parseFloat(input.value); if (isNaN(value)) { errorElement.textContent = "Please enter a valid number."; input.style.borderColor = "#d9534f"; return false; } if (value max) { errorElement.textContent = "Value out of range. Please enter between " + min + " and " + max + "."; input.style.borderColor = "#d9534f"; return false; } errorElement.textContent = ""; // Clear error input.style.borderColor = "#ddd"; // Reset border color return true; } function calculatePrice() { // Validate all inputs first var isValid = true; isValid = validateInput('pages', 1, 100, 'pagesError') && isValid; isValid = validateInput('features', 0, 20, 'featuresError') && isValid; isValid = validateInput('integrations', 0, 10, 'integrationsError') && isValid; isValid = validateInput('maintenance', 0, 40, 'maintenanceError') && isValid; if (!isValid) { return; // Stop calculation if any input is invalid } var pages = parseFloat(document.getElementById('pages').value); var features = parseFloat(document.getElementById('features').value); var designComplexity = parseInt(document.getElementById('designComplexity').value); var cmsType = parseInt(document.getElementById('contentManagement').value); var integrations = parseFloat(document.getElementById('integrations').value); var maintenanceHours = parseFloat(document.getElementById('maintenance').value); // Calculate intermediate costs var baseDevelopmentCost = baseDevRate * 80; // Assuming 80 hours for base setup var pagesCost = pageCost * pages; var featuresCost = featureCost * features; var integrationsCost = integrationCost * integrations; var designFactor = designComplexityFactors[designComplexity] || 1.0; var cmsFactor = cmsFactors[cmsType] || 1.0; var designCost = baseDevelopmentCost * 0.3 * designFactor; // Example: 30% of base dev for design, adjusted by factor var developmentCost = baseDevelopmentCost * 0.5; // Example: 50% of base dev for core dev var cmsAndFeaturesCost = (baseDevelopmentCost * 0.2) + featuresCost + (pagesCost * 0.5); // Example: 20% base dev + features + half page cost var setupCost = designCost + developmentCost + cmsAndFeaturesCost; var totalDevelopmentAndDesign = (baseDevelopmentCost + pagesCost + featuresCost + integrationsCost) * designFactor; var totalCmsSetup = (baseDevelopmentCost * cmsFactor) + featuresCost; // Simplified CMS cost var calculatedDesignCost = Math.round(baseDevelopmentCost * 0.3 * designComplexityFactors[designComplexity]); var calculatedDevelopmentCost = Math.round(baseDevelopmentCost * 0.7); // Core development var calculatedCmsCost = Math.round((featuresCost * 1.5) + (pageCost * 0.5 * pages) * cmsFactors[cmsType]); // CMS + features + some page cost var totalProjectCost = calculatedDesignCost + calculatedDevelopmentCost + calculatedCmsCost + (integrationsCost * 1.2); // Add a buffer for integrations var annualMaintenanceCost = Math.round(maintenanceHours * maintenanceRate * 12); var finalTotalPrice = Math.round(totalProjectCost + annualMaintenanceCost); // Update results display document.getElementById('totalPrice').textContent = '$' + finalTotalPrice.toLocaleString(); document.getElementById('designCost').textContent = '$' + calculatedDesignCost.toLocaleString(); document.getElementById('developmentCost').textContent = '$' + calculatedDevelopmentCost.toLocaleString(); document.getElementById('cmsCost').textContent = '$' + calculatedCmsCost.toLocaleString(); // Update table document.getElementById('tableBaseDev').textContent = '$' + baseDevelopmentCost.toLocaleString(); document.getElementById('tablePages').textContent = '$' + Math.round(pageCost * pages).toLocaleString(); document.getElementById('tableFeatures').textContent = '$' + Math.round(featureCost * features).toLocaleString(); document.getElementById('tableDesignComp').textContent = '$' + calculatedDesignCost.toLocaleString(); document.getElementById('tableCMS').textContent = '$' + calculatedCmsCost.toLocaleString(); document.getElementById('tableIntegrations').textContent = '$' + Math.round(integrationCost * integrations).toLocaleString(); document.getElementById('tableMaintenance').textContent = '$' + annualMaintenanceCost.toLocaleString(); document.getElementById('tableTotal').textContent = '$' + finalTotalPrice.toLocaleString(); updateChart(calculatedDesignCost, calculatedDevelopmentCost, calculatedCmsCost + featuresCost + (integrationsCost * 1.2)); } function resetCalculator() { document.getElementById('pages').value = 10; document.getElementById('features').value = 3; document.getElementById('designComplexity').value = 1; document.getElementById('contentManagement').value = 2; document.getElementById('integrations').value = 0; document.getElementById('maintenance').value = 2; // Clear errors document.getElementById('pagesError').textContent = "; document.getElementById('featuresError').textContent = "; document.getElementById('designComplexityError').textContent = "; document.getElementById('contentManagementError').textContent = "; document.getElementById('integrationsError').textContent = "; document.getElementById('maintenanceError').textContent = "; // Reset borders document.getElementById('pages').style.borderColor = '#ddd'; document.getElementById('features').style.borderColor = '#ddd'; document.getElementById('integrations').style.borderColor = '#ddd'; document.getElementById('maintenance').style.borderColor = '#ddd'; calculatePrice(); // Recalculate with defaults } function copyResults() { var mainResult = document.getElementById('totalPrice').textContent; var designResult = document.getElementById('designCost').textContent; var devResult = document.getElementById('developmentCost').textContent; var cmsResult = document.getElementById('cmsCost').textContent; var assumptions = "Key Assumptions:\n"; assumptions += "- Pages: " + document.getElementById('pages').value + "\n"; assumptions += "- Features: " + document.getElementById('features').value + "\n"; assumptions += "- Design Complexity: " + document.getElementById('designComplexity').options[document.getElementById('designComplexity').selectedIndex].text + "\n"; assumptions += "- CMS: " + document.getElementById('contentManagement').options[document.getElementById('contentManagement').selectedIndex].text + "\n"; assumptions += "- Integrations: " + document.getElementById('integrations').value + "\n"; assumptions += "- Monthly Maintenance Hours: " + document.getElementById('maintenance').value + "\n"; var textToCopy = "Estimated Web Price:\n" + "Total: " + mainResult + "\n\n" + "Breakdown:\n" + "Design: " + designResult + "\n" + "Development: " + devResult + "\n" + "CMS/Features/Integrations: " + cmsResult + "\n\n" + assumptions; navigator.clipboard.writeText(textToCopy).then(function() { alert('Results copied to clipboard!'); }).catch(function(err) { console.error('Failed to copy: ', err); alert('Failed to copy results. Please copy manually.'); }); } // Charting Logic (using native Canvas API) var priceChart; var chartContext; function updateChart(design, development, cmsFeaturesIntegrations) { if (!chartContext) { var canvas = document.getElementById('priceChart'); chartContext = canvas.getContext('2d'); } var total = design + development + cmsFeaturesIntegrations; var designPercentage = total === 0 ? 0 : (design / total) * 100; var developmentPercentage = total === 0 ? 0 : (development / total) * 100; var cmsFeaturesIntegrationsPercentage = total === 0 ? 0 : (cmsFeaturesIntegrations / total) * 100; // Ensure percentages add up to 100% due to potential rounding var sumPercentages = designPercentage + developmentPercentage + cmsFeaturesIntegrationsPercentage; if (sumPercentages !== 100 && total !== 0) { var diff = 100 – sumPercentages; cmsFeaturesIntegrationsPercentage += diff; // Add difference to the last item } var data = { datasets: [{ data: [designPercentage, developmentPercentage, cmsFeaturesIntegrationsPercentage], backgroundColor: [ '#ffcc00', // Design (Yellow) '#36a2eb', // Development (Blue) '#4bc0c0' // CMS/Features/Integrations (Teal) ], borderColor: '#ffffff', borderWidth: 2 }] }; var options = { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false // Legend is handled by custom div }, tooltip: { callbacks: { label: function(context) { var label = context.label || "; if (label) { label += ': '; } if (context.parsed !== null) { var value = context.raw; var originalValue = 0; if (context.dataset.data.indexOf(value) === 0) originalValue = design; else if (context.dataset.data.indexOf(value) === 1) originalValue = development; else originalValue = cmsFeaturesIntegrations; label += '$' + originalValue.toLocaleString() + ' (' + value.toFixed(1) + '%)'; } return label; } } } }, cutout: '50%' // Makes it a donut chart }; if (priceChart) { priceChart.destroy(); } // Basic Pie Chart implementation without Chart.js drawPieChart(chartContext, data.datasets[0].data, data.datasets[0].backgroundColor, total); } function drawPieChart(ctx, dataValues, colors, totalValue) { var canvas = ctx.canvas; var width = canvas.width; var height = canvas.height; var centerX = width / 2; var centerY = height / 2; var radius = Math.min(width, height) / 2 * 0.8; // Make radius slightly smaller for padding ctx.clearRect(0, 0, width, height); var total = dataValues.reduce(function(a, b) { return a + b; }, 0); var startAngle = -0.5 * Math.PI; // Start at top for (var i = 0; i 5) { ctx.fillText('$' + Math.round((dataValues[i] / 100) * totalValue).toLocaleString(), labelX, labelY); } startAngle += sliceAngle; } // Draw center circle for donut effect ctx.beginPath(); ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI); ctx.fillStyle = '#f8f9fa'; // Match background ctx.fill(); // Draw total value in the center ctx.fillStyle = '#004a99'; ctx.font = 'bold 18px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('$' + Math.round(totalValue).toLocaleString(), centerX, centerY); } // Initial calculation on page load window.onload = function() { var canvas = document.getElementById('priceChart'); canvas.width = canvas.parentElement.clientWidth; // Set initial width based on parent canvas.height = canvas.width * 0.75; // Maintain aspect ratio chartContext = canvas.getContext('2d'); calculatePrice(); }; // Resize handler for chart window.addEventListener('resize', function() { if (chartContext) { var canvas = chartContext.canvas; canvas.width = canvas.parentElement.clientWidth; canvas.height = canvas.width * 0.75; calculatePrice(); // Recalculate and redraw chart on resize } });

Leave a Comment