Untitled

const headings = document.querySelectorAll("h3");
    
    headings.forEach((heading) => {
        if (heading.textContent.includes("Backlinks and Keywords")) {
            const calculatorDiv = document.createElement("div");
            calculatorDiv.innerHTML = `
                <style>
                    .calculator-container {
                        background: #f9f9f9;
                        padding: 20px;
                        border-radius: 8px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        max-width: 300px;
                        margin: 10px auto;
                        text-align: center;
                    }
                    .calculator-container input {
                        width: 80%;
                        padding: 8px;
                        margin: 10px 0;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        display: block;
                    }
                    .calculator-container button {
                        background: #007bff;
                        color: #fff;
                        border: none;
                        padding: 10px;
                        width: 100%;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                    .calculator-container button:hover {
                        background: #0056b3;
                    }
                    .calculator-container p {
                        font-size: 18px;
                        font-weight: bold;
                    }
                </style>
                <div class="calculator-container">
                    <label>Number 1: <input type="number" id="num1" /></label>
                    <label>Number 2: <input type="number" id="num2" /></label>
                    <p>Result: <span id="result">0</span></p>
                    <button id="reset">Reset</button>
                </div>
            `;
            
            heading.replaceWith(calculatorDiv);
            
            const num1 = calculatorDiv.querySelector("#num1");
            const num2 = calculatorDiv.querySelector("#num2");
            const result = calculatorDiv.querySelector("#result");
            const resetBtn = calculatorDiv.querySelector("#reset");
            
            function calculate() {
                const val1 = parseFloat(num1.value) || 0;
                const val2 = parseFloat(num2.value) || 0;
                result.textContent = val1 * val2;
            }
            
            num1.addEventListener("input", calculate);
            num2.addEventListener("input", calculate);
            
            resetBtn.addEventListener("click", () => {
                num1.value = "";
                num2.value = "";
                result.textContent = "0";
            });
        }
    });