My Code Block Is disturbing other content in my website

Hello, I want To Ask How to Make the code block i=not disturbing the other content block because every time it put them on home page, it seems like the code block is making them automatically move and the other block is missing after click save and exit only 

Edited January 22 by freddy24

Can you share your website URL and a demonstration of the problem? What are you adding to the code block?

okay. my website is : www.kcg.co.id so temporary i move the code to www.kcg.co.id/service-calculator and my code block when i inspect the source it seems that when i edit the position of code block it's okay in editor mode but when i save and exit, it destroy the other block in the right side like the image is missing and the position of the text block is forcefully moved to the bottom and the button block is resized to maxed horizontally unintentionally. my code block is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.1/jspdf.plugin.autotable.min.js"
integrity="sha512-8+n4PSpp8TLHbSf28qpjRfu51IuWuJZdemtTC1EKCHsZmWi2O821UEdt6S3l4+cHyUQhU8uiAAUeVI1MUiFATA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://kit.fontawesome.com/00592a3b5e.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="calculator">
    <h2>Service Calculator</h2>

      <label for="serviceOffering">Service Offering:</label>
      <select id="serviceOffering">
        <option value="payroll">Payroll</option>
        <option value="bpjs">BPJS</option>
        <option value="cloud-accounting">Cloud Accounting</option>
        <option value="migration">Migration</option>
        <option value="tax-compliance">Tax Compliance</option>
        <option value="regulatory-and-compliance">Regulatory & Compliance</option>
        <option value="tax-audit-assistance">Tax Audit Assistance</option>
        <option value="audit-assistance">Audit Assistance</option>
        <option value="esg-service">ESG Service</option>
        <option value="itgc">ITGC</option>
        <option value="itac">ITAC</option>
        <option value="cloud-software-training">Cloud Software Training</option>
        <option value="cloud-software-implementation">Cloud Software Implementation</option>
        <option value="software-integration">Software Integration</option>
        <option value="privacy-and-security">Privacy & Security</option>
        <!-- Add other service options as needed -->
    </select>

    <label for="projectCost">Project Cost:</label>
    <input type="number" id="projectCost" placeholder="enter Project cost"><br>

    <label for="monthDuration">Month Duration:</label>
    <input type="number" id="monthDuration" placeholder="enter month
duration"><br>

    <label for="currencySelect">Currency:</label>
    <select id="currencySelect" onchange="updateCurrencyStatement()">
            <option value="$">USD</option>
            <option value="€">EUR</option>
            <option value="Rp">IDR</option>
            <option value="₹">INR</option>
            <option value="S$">SGD</option>
            <option value="£">GBP</option>
            <!-- Add other currency options as needed -->
    </select>

     <!-- Display the total cost dynamically -->

     <div id="totalCostResult"></div>

    <button onclick="showOverlay()">Compare</button>
    <button onclick="calculateTotalCost()" id="calculateButton">Calculate</button>
    </div>

    <div id="overlay" class="overlay" style="display: none;">
      <div class="overlay-content">
        <span class="close" onclick="closeOverlay()">&times;</span>
        <label for="email">Email:</label>
        <input type="text" id="email">
        <label for="name">Name:</label>
        <input type="text" id="name">
        <label for="address">Address:</label>
        <input type="text" id="address">
        <label for="company">Company:</label>
        <input type="text" id="company">
        <button onclick="generatePDF()" id="generatePDFButton">Submit</button>
      </div>
      <script>
// Declare currencySymbol globally
var currencySymbol;

// Function to calculate total cost
function calculateTotalCost() {
  var projectCost = parseFloat(document.getElementById('projectCost').value) || 0;
  var monthDuration = parseInt(document.getElementById('monthDuration').value) || 0;

  var totalCost = projectCost * monthDuration;

  // Get the currency symbol using the selected currency code
  var selectedCurrency = document.getElementById('currencySelect').value;
  var currencySymbol = getCurrencySymbol(selectedCurrency);

  // Display total cost dynamically
  var formattedTotalCost = currencySymbol + totalCost.toFixed(2);
  document.getElementById('totalCostResult').innerText = `Total Cost: ${formattedTotalCost}`;
}

// Function to get currency symbol based on currency code
function getCurrencySymbol(currencyCode) {
  // Implement logic to map currency codes to symbols
  switch (currencyCode) {
    case '$':
      return '$';
    case '€':
      return '€';
    case 'Rp':
      return 'Rp';
    case '₹':
      return '₹';
    case 'S$':
      return 'S$';
    case '£':
      return '£';
    // Add other cases as needed
    default:
      return '';
  }
}

function showOverlay() {
  document.getElementById('overlay').style.display = 'flex';
}

function closeOverlay() {
  document.getElementById('overlay').style.display = 'none';
  // Reset the flag
  ated = false;
}

function validateAndSend() {
  
  var email = document.getElementById('email').value;
  var name = document.getElementById('name').value;
  var address = document.getElementById('address').value;
  var company = document.getElementById('company').value;

  if (validateEmail(email)) {
    // Trigger the calculation of total cost before sending the email
    calculateTotalCost();
    sendEmail(email, name, address, company);

     } else {
    alert('Invalid email address. Please try again.');
  }
}

function validateEmail(email) {
  var regex = /\S+@\S+\.\S+/;
  return regex.test(email);
}

function sendEmail(email, name, address, company) {
  var service = document.getElementById('service').value;
  var cost = parseFloat(document.getElementById('cost').value);
  var duration = parseFloat(document.getElementById('duration').value);
  var currency = document.getElementById('currency').value;

  var totalCost = cost * duration;
  var resultText = `Service Offering: ${service}\nTotal Cost: ${currency} ${totalCost}, Month Duration: ${duration} months`;

  // For simplicity, alert is used here. In real-world scenarios, you would send an email from the server.
  alert(`Email sent to: ${email}\nName: ${name}\nAddress: ${address}\nCompany: ${company}\n\n${resultText}`);
  closeOverlay();
}
// Function to initialize the script
function init() {
  // Attach events after the DOM is fully loaded
  var calculateButtons = document.querySelectorAll('.calculate-button');
  calculateButtons.forEach(function (button) {
    button.addEventListener('click', calculateTotalCost);
  });

  document.getElementById('calculateButton').addEventListener('click', calculateTotalCost);
  document.getElementById('currencySelect').addEventListener('change', updateCurrencyStatement);
  document.getElementById('generatePDFButton').addEventListener('click', function () {
    // Call the updateCurrencyStatement function with a callback to generate PDF afterward
     updateCurrencyStatement(function() {
    setTimeout(function() {
      generatePDF();
    }, 1000); // Adjust the delay as needed
  });
});

  // Call the updateCurrencyStatement function
  updateCurrencyStatement();
}

// Function to update currency statement
function updateCurrencyStatement(callback) {
  var selectedCurrency = document.getElementById('currencySelect').value;

  // Update the global currency symbol
  currencySymbol = getCurrencySymbol(selectedCurrency);

  // Update the currency statement on the page
  document.getElementById('currencySelect').textContent = 'Currency: ' + currencySymbol;

  // Update the total cost when the currency changes
  calculateTotalCost();

  // Call the callback function if provided
  if (callback && typeof callback === 'function') {
    callback();
  }
}     

// Function to generate PDF
function generatePDF() {
  
  // Trigger the calculation of total cost before generating the PDF
  calculateTotalCost();

  // Wait for a short delay to ensure the total cost is updated
  setTimeout(function () {
    // Get the dynamically updated total cost
    var totalCost = parseFloat(document.getElementById('totalCostResult').innerText) || 0;
  
    // Get input values
    var email = document.getElementById('email').value;
    var name = document.getElementById('name').value;
    var address = document.getElementById('address').value;
    var company = document.getElementById('company').value;
  
    // Get service offering selected option
    var serviceOfferingSelect = document.getElementById('serviceOffering');
    var selectedServiceOffering = serviceOfferingSelect.options[serviceOfferingSelect.selectedIndex].text;
  
    // Get project cost, month duration, and currency
    var projectCost = parseFloat(document.getElementById('projectCost').value) || 0;
    var monthDuration = parseInt(document.getElementById('monthDuration').value) || 0;
    var currencySelect = document.getElementById('currencySelect');
    var selectedCurrency = currencySelect.options[currencySelect.selectedIndex].text;
  
    // Calculate total cost
    var totalCost = projectCost * monthDuration;
  
    // Create other company details
    var otherCompanyDetails = {
      serviceOffering: 'Some Service', // Replace with the actual service offering
      projectCost: 5000,
      monthDuration: 12,
      currency: 'USD',
    };
  
    // Calculate total cost for the other company based on the provided logic
    otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
  
    console.log('Selected Service Offering:', selectedServiceOffering);
  
    // Use selectedServiceOffering in the switch statement
    switch (selectedServiceOffering.toLowerCase()) {
      case 'payroll':
        otherCompanyDetails.serviceOffering = 'Payroll';
        otherCompanyDetails.projectCost = 500;
        otherCompanyDetails.monthDuration = 10;
        break;
  
      case 'bpjs':
        otherCompanyDetails.serviceOffering = 'BPJS';
        otherCompanyDetails.projectCost = 1000;
        otherCompanyDetails.monthDuration = 20;
        break;
  
      case 'cloud-accounting':
        otherCompanyDetails.serviceOffering = 'Cloud Accounting';
        otherCompanyDetails.projectCost = 12100;
        otherCompanyDetails.monthDuration = 20;
        otherCompanyDetails.currency = 'USD';
        otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
        break;
  
      case 'migration':
        otherCompanyDetails.serviceOffering = 'Migration';
        otherCompanyDetails.projectCost = 112;
        otherCompanyDetails.monthDuration = 23;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'tax-compliance':
        otherCompanyDetails.serviceOffering = 'Tax Compliance';
        otherCompanyDetails.projectCost = 554;
        otherCompanyDetails.monthDuration = 4;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'regulatory-and-compliance':
        otherCompanyDetails.serviceOffering = 'Regulatory & Compliance';
        otherCompanyDetails.projectCost = 2112;
        otherCompanyDetails.monthDuration = 212;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'tax-audit-assistance':
        otherCompanyDetails.serviceOffering = 'Tax Audit Assistance';
        otherCompanyDetails.projectCost = 6000;
        otherCompanyDetails.monthDuration = 48;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'audit-assistance':
        otherCompanyDetails.serviceOffering = 'Audit Assistance';
        otherCompanyDetails.projectCost = 12;
        otherCompanyDetails.monthDuration = 24;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'esg-service':
        otherCompanyDetails.serviceOffering = 'ESG Service';
        otherCompanyDetails.projectCost = 80;
        otherCompanyDetails.monthDuration = 76;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'itgc':
        otherCompanyDetails.serviceOffering = 'ITGC';
        otherCompanyDetails.projectCost = 12;
        otherCompanyDetails.monthDuration = 24;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'itac':
        otherCompanyDetails.serviceOffering = 'ITAC';
        otherCompanyDetails.projectCost = 54;
        otherCompanyDetails.monthDuration = 23;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'cloud-software-training':
        otherCompanyDetails.serviceOffering = 'Cloud Software Training';
        otherCompanyDetails.projectCost = 105;
        otherCompanyDetails.monthDuration = 40;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'cloud-software-implementation':
        otherCompanyDetails.serviceOffering = 'Cloud Software Implementation';
        otherCompanyDetails.projectCost = 45;
        otherCompanyDetails.monthDuration = 45;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'software-integration':
        otherCompanyDetails.serviceOffering = 'Software Integration';
        otherCompanyDetails.projectCost = 121;
        otherCompanyDetails.monthDuration = 1;
        otherCompanyDetails.currency = 'USD';
        break;
  
      case 'privacy-and-security':
        otherCompanyDetails.serviceOffering = 'Privacy & Security';
        otherCompanyDetails.projectCost = 200;
        otherCompanyDetails.monthDuration = 99;
        otherCompanyDetails.currency = 'USD';
        break;
  
      default:
        console.error('Unexpected service offering:', selectedServiceOffering);
        break;
    }
  
    // Trim input so that
    selectedServiceOffering = selectedServiceOffering.trim().toLowerCase();
  
    // Update the totalCost after setting values in the switch
    otherCompanyDetails.totalCost = otherCompanyDetails.projectCost * otherCompanyDetails.monthDuration;
  
    // Example: Add debugging statements
    console.log('Email:', email);
    console.log('Name:', name);
    console.log('Address:', address);
    console.log('Company:', company);
    console.log('Selected Service Offering:', selectedServiceOffering);
    console.log('Project Cost:', projectCost);
    console.log('Month Duration:', monthDuration);
    console.log('Selected Currency:', selectedCurrency);
    console.log('Total Cost:', totalCost);
    console.log('Other Company Service Offering:', otherCompanyDetails.serviceOffering);
    console.log('Other Company Project Cost:', otherCompanyDetails.projectCost);
    console.log('Other Month Duration:', otherCompanyDetails.monthDuration);
    console.log('Other Currency:', otherCompanyDetails.currency);
    console.log('Other Total Cost:', otherCompanyDetails.totalCost);
  
    // Create PDF content
    var pdfContent = `
      <h2>Calculation Result</h2>
      <p>Email: ${email}</p> <p>Name: ${name}</p>
      <p>Address: ${address}</p> <p>Company: ${company}</p>
      <hr>
      <h3>Service Offerings</h3>
      <p>Selected Service Offering: ${selectedServiceOffering}</p> <p>Project Cost: ${selectedCurrency} ${projectCost}</p>
      <p>Month Duration: ${monthDuration} months</p> <p>Currency: ${selectedCurrency}</p>
      <p>Total Cost: ${selectedCurrency} ${totalCost.toFixed(2)}</p>
      <hr>
      <p>Other Company Comparison</p>
      <ul>
        <li>Other Company Service Offering: ${otherCompanyDetails.serviceOffering}</li> <li>Other Company Project Cost: ${otherCompanyDetails.projectCost} ${otherCompanyDetails.currency}</li>
        <li>Other Company Month Duration: ${otherCompanyDetails.monthDuration} months</li> <li>Other Company Currency: ${otherCompanyDetails.currency}</li>
        <li>Other Company Total Cost: ${otherCompanyDetails.totalCost.toFixed(2)} ${otherCompanyDetails.currency}</li>
      </ul>
    `.replace(/`/g, '&#96;');
  
    // Generate PDF using html2pdf
    var pdfElement = document.createElement("div");
    pdfElement.innerHTML = pdfContent;
  
    var pdfOptions = {
      margin: 10,
      filename: 'calculation_result.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    };
  
    // Generate PDF
    html2pdf(pdfElement, pdfOptions).outputPdf().then(function (pdf) {
      // Save or display the generated PDF as needed
      console.log('PDF generated successfully:', pdf);
  
      // Close the overlay after generating the PDF
      closeOverlay();
    })
    .catch(function (error) {
      // Handle any errors during PDF generation
      console.error('Error generating PDF:', error);
    });
  }, 0); // Set the timeout to 0 milliseconds to execute the function as soon as possible 
 }

// Function to update currency statement
function updateCurrencyStatement() {
  var selectedCurrency = document.getElementById('currencySelect').value;

  // Update the global currency symbol
  currencySymbol = getCurrencySymbol(selectedCurrency);

  // Update the currency statement on the page
  var currencyStatementElement = document.getElementById('currencyStatement');
  if (currencyStatementElement) {
    currencyStatementElement.textContent = 'Currency: ' + currencySymbol;
  }

  // Update the total cost when the currency changes
  calculateTotalCost();
}
// Use window.onload to ensure the DOM is fully loaded before executing the code
window.onload = init;
</script>

What's the page password?

page password is: Su4p!nan

Thanks for the, but I can't really tell what's going on, the calculator is there, but I can't see the issues that it is causing.

Have you tried running a code validator to find errors?

https://validator.w3.org/nu/#textarea

It does look like you are missing a closing </div> and that would most certainly cause random errors.

the result is not what i expected after i put the code block with my customize code with the closing </div> you gave me in my homepage what should i do?

Edited January 23 by freddy24

6 hours ago, freddy24 said:

the result is not what i expected after i put the code block with my customize code with the closing </div> you gave me in my homepage what should i do?

Where did you get your code from? As Ziggy already pointed out 1 error in your code, I would suggest asking the author or any developer to check that the code is fully functioning as expected before investigating further. 

Edited January 23 by melody495

hello i develop my code from my local development

so i'm alone responsible to develop my code block

21 hours ago, freddy24 said:

hello i develop my code from my local development

You can check by removing your code block, create a new one with the default "hello world". If that is behaving as you expect, then there is something in your code block that's causing the issue.