Cost Per Lead Calculator - Copy this React, Tailwind Component to your project
Create a ui for this small app: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Калькулятор стоимости за лиды</title> <style> body { font family: Arial, sans serif; margin: 20px; } .calculator { max width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border radius: 5px; box shadow: 2px 2px 12px #aaa; } input[type="number"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border radius: 5px; } button { padding: 10px; background color: #28a745; color: white; border: none; border radius: 5px; cursor: pointer; } button:hover { background color: #218838; } .result { margin top: 20px; font size: 1.2em; } </style> </head> <body> <div class="calculator"> <h2>Калькулятор стоимости за лиды</h2> <label for="totalCost">Общие затраты (руб.):</label> <input type="number" id="totalCost" placeholder="Введите общие затраты" required> <label for="leads">Количество лидов:</label> <input type="number" id="leads" placeholder="Введите количество лидов" required> <button onclick="calculateCostPerLead()">Рассчитать стоимость за лид</button> <div class="result" id="result"></div> </div> <script> function calculateCostPerLead() { const totalCost = parseFloat(document.getElementById('totalCost').value); const leads = parseInt(document.getElementById('leads').value); const resultDiv = document.getElementById('result'); if (isNaN(totalCost) || isNaN(leads) || leads <= 0) { resultDiv.innerHTML = 'Пожалуйста, введите корректные значения.'; return; } const costPerLead = (totalCost / leads).toFixed(2); resultDiv.innerHTML = `Стоимость за лид: ${costPerLead} руб.`; } </script> </body> </html>
