function MainComponent() { const calculate = ()=>{ const equation = document.getElementById('equation').value; const errorMessage = document.getElementById('error-message'); errorMessage.innerText = ''; document.getElementById('productCost').innerText = ''; document.getElementById('priceAfter7').innerText = ''; document.getElementById('finalPrice').innerText = ''; const equationRegex = /([\d,]+)\s*\*\s*Product\s*=\s*([\d,.]+)\s*(\w{3})?/i; const match = equation.match(equationRegex); if (!match) { errorMessage.innerText = 'Please enter the equation in the correct format.'; return; } const quantity = parseFloat(match[1].replace(/,/g, '')); const totalAmount = parseFloat(match[2].replace(/,/g, '')); const currency = match[3] ? match[3].toUpperCase() : ''; if (isNaN(quantity) || isNaN(totalAmount)) { errorMessage.innerText = 'Invalid numbers provided.'; return; } const productCost = totalAmount / quantity; const priceAfter7 = productCost * 1.07; const finalPrice = priceAfter7 * 1.30; document.getElementById('productCost').innerText = productCost.toFixed(5) + ' ' + currency; document.getElementById('priceAfter7').innerText = priceAfter7.toFixed(5) + ' ' + currency; document.getElementById('finalPrice').innerText = finalPrice.toFixed(5) + ' ' + currency; }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gradient-to-r from-[#667eea] to-[#764ba2] text-[#fff] font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffffe6] p-8 rounded-3xl shadow-lg text-center w-full max-w-[400px]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-5 text-2xl text-[#333]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Automatic Calculator"), /*#__PURE__*/ React.createElement("label", { htmlFor: "equation", className: "block mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Enter Equation:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "equation", name: "equation", placeholder: "e.g., 315,369 * Product = 7,532.63 USD", className: "block mx-auto mb-2 p-4 w-[calc(100%-30px)] text-lg border-2 border-[#ddd] rounded-md transition-colors duration-300 focus:border-[#007bff] focus:outline-none", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: calculate, className: "px-5 py-4 mt-2 text-lg bg-[#007bff] text-white border-none rounded-md cursor-pointer transition-colors duration-300 hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Calculate"), /*#__PURE__*/ React.createElement("div", { id: "results", className: "mt-5", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { id: "error-message", className: "error mb-2 text-lg text-[#ff0000]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-lg text-[#333]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Product Cost per Unit: ", /*#__PURE__*/ React.createElement("span", { id: "productCost", className: "font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 74 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-lg text-[#333]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Selling Price after 7% Markup: ", /*#__PURE__*/ React.createElement("span", { id: "priceAfter7", className: "font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 82 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-lg text-[#333]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Final Selling Price after additional 30% Markup: ", /*#__PURE__*/ React.createElement("span", { id: "finalPrice", className: "font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 100 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` body { margin: 0; } `)); }