Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building Cost Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
            color: #333;
        }

        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        select {
            cursor: pointer;
        }

        button {
            width: 100%;
            padding: 12px;
            background-color: #FF7600;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #e66000;
        }

        .result-table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
            background-color: #FF7600;
            color: white;
        }

        .result-table th, .result-table td {
            padding: 15px;
            text-align: left;
        }

        .result-table th {
            background-color: #ff5400;
        }

        .explanation {
            margin-top: 20px;
            font-weight: bold;
            color: #333;
        }

        @media (max-width: 600px) {
            input, select, button {
                font-size: 14px;
            }
        }

        .complexity-info {
            font-size: 12px;
            color: #666;
        }

        .explainer {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 13px;
            color: #333;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Building Cost Calculator</h1>

        <div class="explainer">
            <p>This calculator helps estimate home construction costs based on average prices per square meter in each province as of 2024. Enter the stand price, floor area, number of floors, and build complexity (Modest, Standard, Complex) to get an estimate.</p>

            <p>Note that these are indicative estimates, and actual costs may vary based on materials, location, and contractors. A 10% contingency is added for unforeseen expenses.</p>
        </div>

        <label for="standPrice">Stand Price (R):</label>
        <input type="number" id="standPrice" placeholder="Enter stand price">

        <label for="squareMeters">Square Meters:</label>
        <input type="number" id="squareMeters" placeholder="Enter square meters">

        <label for="floors">Number of Floors:</label>
        <input type="number" id="floors" placeholder="Enter number of floors">

        <label for="province">Province:</label>
        <select id="province">
            <option value="KwaZuluNatal">KwaZulu Natal - R14,860/sq.m</option>
            <option value="Gauteng">Gauteng - R13,330/sq.m</option>
            <option value="WesternCape">Western Cape - R13,150/sq.m</option>
            <option value="Mpumalanga">Mpumalanga - R9,190/sq.m</option>
            <option value="Limpopo">Limpopo - R8,450/sq.m</option>
            <option value="NorthWest">North West - R7,980/sq.m</option>
            <option value="FreeState">Free State - R11,290/sq.m</option>
            <option value="EasternCape">Eastern Cape - R10,890/sq.m</option>
            <option value="NorthernCape">Northern Cape - R10,370/sq.m</option>
        </select>

        <label for="complexity">Complexity of Build:</label>
        <select id="complexity">
            <option value="Modest">Modest - Low-end finishes</option>
            <option value="Standard">Standard - Medium-end finishes</option>
            <option value="Complex">Complex - High-end finishes</option>
        </select>
        <p class="complexity-info">*Modest uses low-end finishes, Standard uses medium-end finishes, and Complex uses high-end finishes.</p>

        <button onclick="calculateCost()">Calculate Building Cost</button>

        <div id="result"></div>
    </div>

    <script>
        function calculateCost() {
            const standPrice = parseFloat(document.getElementById('standPrice').value) || 0;
            const squareMeters = parseFloat(document.getElementById('squareMeters').value);
            const floors = parseFloat(document.getElementById('floors').value);
            const province = document.getElementById('province').value;
            const complexity = document.getElementById('complexity').value;

            let costPerSquareMeter;

            switch (province) {
                case 'KwaZuluNatal':
                    costPerSquareMeter = 14860;
                    break;
                case 'Gauteng':
                    costPerSquareMeter = 13330;
                    break;
                case 'WesternCape':
                    costPerSquareMeter = 13150;
                    break;
                case 'Mpumalanga':
                    costPerSquareMeter = 9190;
                    break;
                case 'Limpopo':
                    costPerSquareMeter = 8450;
                    break;
                case 'NorthWest':
                    costPerSquareMeter = 7980;
                    break;
                case 'FreeState':
                    costPerSquareMeter = 11290;
                    break;
                case 'EasternCape':
                    costPerSquareMeter = 10890;
                    break;
                case 'NorthernCape':
                    costPerSquareMeter = 10370;
                    break;
                default:
                    costPerSquareMeter = 0;
                    break;
            }

            if (complexity === 'Modest') {
                costPerSquareMeter *= 0.60; // Modest is 60% of the rate
            } else if (complexity === 'Standard') {
                costPerSquareMeter *= 0.75; // Standard is 75% of the rate
            } // Complex remains 100%, no adjustment needed

            if (squareMeters && costPerSquareMeter) {
                let buildingCost = squareMeters * costPerSquareMeter;
                // Add 15% increase for each additional floor beyond the first
                if (floors > 1) {
                    buildingCost += buildingCost * 0.15 * (floors - 1);
                }
                let totalConstructionCost = buildingCost; // Total construction cost without stand price
                let costWithBallooning = buildingCost * 1.10; // Adding 10% ballooning for unforeseen expenses (excluding stand price)
                let totalCost = costWithBallooning + standPrice;

                document.getElementById('result').innerHTML = `
                    <table class="result-table">
                        <tr>
                            <th>Estimated Building Cost</th>
                            <td>R${formatNumber(buildingCost)}</td>
                        </tr>
                        <tr>
                            <th>Total Cost (incl. 10% Ballooning)</th>
                            <td>R${formatNumber(totalCost)}</td>
                        </tr>
                    </table>
                    <div class="explanation">
                        <p>It is estimated that your build will cost R${formatNumber(totalCost)}. This estimate includes the base building cost calculated at R${formatNumber(costPerSquareMeter)}/sq.m for the selected complexity of "${complexity}" and a floor area of ${squareMeters} square meters. The total includes a 10% addition for unforeseen expenses and the stand price of R${formatNumber(standPrice)}.</p>
                        <p>The building costs per square meter are based on average rates for each province, as estimated in 2024. The complexity options adjust the cost per square meter as follows: Modest (60%), Standard (75%), and Complex (100%). These adjustments reflect the level of finishes and materials used in the build.</p>
                    </div>
                `;
            } else {
                document.getElementById('result').innerHTML = "<p style='color:red;'>Please fill in all the fields correctly.</p>";
            }
        }

        function formatNumber(number) {
            return number.toLocaleString('en-US');
        }
    </script>

</body>
</html>
