Cost Estimate Calculator

Developed this Cleaning Cost Estimate Calculator for Open for Suggestions :slightly_smiling_face:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carpet Cleaning Cost Estimator</title>
    <style>
    
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        form {
            max-width: 400px;
            margin: 0 auto;
        }
        input[type="number"], input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            box-sizing: border-box;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Carpet Cleaning Cost Estimator</h1>
    <form id="carpet-cleaning-form">
        <h4>Area to be Cleaned (in square feet):</h4>
        <input type="number" id="area" name="area" min="0" placeholder="Enter area. e.g 300" required>
        <h4>Enter your rate per square foot:</h4>
        <input type="number" id="rate" name="rate" min="0" placeholder="Enter rate per sq. ft. e.g 0.45" required>
        <button type="button" onclick="calculateCost()">Calculate Cost</button>
    </form>

    <div id="cost-result" style="display: none;">
        <h2>Estimated Cost:</h2>
        <p id="cost"></p>
    </div>

    <script>
        function calculateCost() {
            var area = parseFloat(document.getElementById('area').value);
            var rate = parseFloat(document.getElementById('rate').value);

            
            var totalCost = area * rate;

            
            document.getElementById('cost').textContent = '$' + totalCost.toFixed(2);
            document.getElementById('cost-result').style.display = 'block';
        }
    </script>
</body>
</html>

Welcome to the forum @millmark443

Nice looking cost estimator.

If you want to spruce it up:

  • user selectable measurement system (metric vs imperial)
  • inputs for floor length and width, if people don’t have a calculator
  • ^ (add an area calculator)
  • rates for different types of floors (if applicable)
  • maximum and minimum floor area

Happy coding

2 Likes

Thank you, let me try this

Welcome to the Freecode camp Forums.

Good try!

I will recommend to put this on GitHub or GitLab (whichever favors you), and post the links from the repo from there.

It’s much neater to comment, and raise issues, and therefore pull requests as well.

But first, take into consideration what @teller suggested.

Regards,
Farath

1 Like