<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Unit Price to Square Foot Price Converter</title>

        <meta name="description" content="Convert price per unit to price per square foot easily. Enter your values and see the conversion instantly!">

        <meta name="keywords" content="Price Converter, Unit Price, Square Foot">



        <!-- Libraries -->

        <!-- jQuery (3.6.0) -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

        <!-- Bootstrap CSS (5.3.3) -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

        <!-- Bootstrap JS (5.3.3) -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <!-- Font Awesome (6.6.0) -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                document.addEventListener("DOMContentLoaded", function() {

                    const convertButton = document.getElementById('convertButton');

                    const pricePerUnitInput = document.getElementById('pricePerUnit');

                    const unitSizeInput = document.getElementById('unitSize');

                    const resultOutput = document.getElementById('resultOutput');



                    convertButton.addEventListener('click', function() {

                        const pricePerUnit = parseFloat(pricePerUnitInput.value);

                        const unitSize = parseFloat(unitSizeInput.value);



                        if(!isNaN(pricePerUnit) && !isNaN(unitSize) && unitSize > 0) {

                            const pricePerSqFoot = (pricePerUnit / unitSize).toFixed(2);

                            resultOutput.textContent = `Price per sq ft: $${pricePerSqFoot}`;

                            resultOutput.style.color = "#28a745";

                        } else {

                            resultOutput.textContent = "Please enter valid numbers.";

                            resultOutput.style.color = "#dc3545";

                        }

                    });

                });

            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(45deg, #f3ec78, #af4261);

                color: white;

                font-family: 'Arial', sans-serif;

            }



            #main-container {

                margin: 50px auto;

                padding: 20px;

                background: rgba(0, 0, 0, 0.5);

                border-radius: 10px;

                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

            }



            h1 {

                text-align: center;

                margin-bottom: 30px;

            }



            .input-group {

                margin-bottom: 20px;

            }



            button {

                margin-top: 10px;

                width: 100%;

                background: #28a745;

                color: white;

                border: none;

                border-radius: 5px;

                transition: background 0.3s;

            }



            button:hover {

                background: #218838;

            }



            #resultOutput {

                text-align: center;

                font-size: 1.5em;

                margin-top: 20px;

                transition: color 0.3s;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Price Per Unit to Sq Ft Converter</h1>

            <div class="input-group">

                <label for="pricePerUnit" class="form-label">Price Per Unit (in dollars):</label>

                <input type="number" id="pricePerUnit" class="form-control" placeholder="Enter price per unit">

            </div>

            <div class="input-group">

                <label for="unitSize" class="form-label">Unit Size (in sq ft):</label>

                <input type="number" id="unitSize" class="form-control" placeholder="Enter unit size in sq ft">

            </div>

            <button id="convertButton">Convert to Price Per Sq Ft</button>

            <div id="resultOutput"></div>

        </div>

    </body>

</html>