Create a Custom Front-End with HTML/CSS/JS and Connect to SpreadsheetWeb API

by | Apr 16, 2025

Creating dynamic, data-driven web applications doesn’t always require complex backend infrastructure or hosting services. While SpreadsheetWeb enables building full applications with both front-end and back-end using a no-code approach, there are cases where custom front-end development is necessary. In such scenarios, developers can use the SpreadsheetWeb API to connect a custom front-end to spreadsheet-based back-end logic.  

In this tutorial, we’ll walk through building a simple web-based Body Mass Index (BMI) calculator using HTML, CSS, and JavaScript. The application will interact with the SpreadsheetWeb calculatesinglesimple API endpoint to perform the calculations." 

✅ Pre-requisites: Before You Start 

To successfully integrate the SpreadsheetWeb API into your website, make sure you’ve completed the following setup: 

Host on a Private Server with a Valid Domain

For security reasons and to avoid CORS (Cross-Origin Resource Sharing) errors, your web page must be hosted on a private domain (e.g., https://mycompany.com/bmi-tool). Hosting it on localhost or public playgrounds like CodePen will not work unless your domain is explicitly whitelisted in your SpreadsheetWeb environment. 

Whitelist Your Domain in SpreadsheetWeb

Go to your SpreadsheetWeb Hub, find the application settings, and ensure your domain is added to the Allowed Domains list. This authorizes that specific domain to make API requests. 

Enable Anonymous Access for SpreadsheetWeb API

The SpreadsheetWeb application must have the Allow Anonymous Access setting enabled. Without this, API calls will require authentication tokens and will be rejected by default. 

 

📐 Project Overview: What We’ll Build 

We’ll build a BMI calculator that takes height and weight as inputs from sliders. These values will be sent to the SpreadsheetWeb API, which will return the BMI value and a description (e.g., "Normal Weight"). 

All of this will happen entirely in the front-end using vanilla HTML, CSS, and JavaScript. 

 

 

🧱 HTML Structure for Front-End

This section builds the core layout for the BMI calculator, including two sliders for height and weight and output sections for BMI and its category. 

<!-- BMI Calculator Wrapper --> 
<div class="bmi-wrapper"> 
  <h2><strong>Body Mass Index Calculator</strong></h2> 
 
  <!-- Height Slider --> 
  <div class="slider-group"> 
    <label>Your height (cm)</label> 
    <div class="range-container"> 
      <span class="range-label">100</span> 
      <input type="range" id="height" class="bmi-slider" min="100" max="250" value="180"> 
      <span class="range-label">250</span> 
    </div> 
    <div class="value-label" id="heightValue">180</div> 
  </div> 
 
  <!-- Weight Slider --> 
  <div class="slider-group"> 
    <label>Your weight (kg)</label> 
    <div class="range-container"> 
      <span class="range-label">40</span> 
      <input type="range" id="weight" class="bmi-slider" min="40" max="250" value="75"> 
      <span class="range-label">250</span> 
    </div> 
    <div class="value-label" id="weightValue">75</div> 
  </div> 
 
  <!-- Output Display --> 
  <p id="bmiCategory"></p> 
  <p id="bmiValue" class="bmi-number">- Waiting...</p> 
</div>

 

 

🎨 CSS Styling 

This CSS provides modern, responsive styling and ensures sliders work across all major browsers. 

.bmi-wrapper { 
  max-width: 600px; 
  margin: 50px auto; 
  padding: 30px; 
  font-family: 'Segoe UI', sans-serif; 
  background: #fff; 
  border-radius: 16px; 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); 
  text-align: center; 
} 
 
.slider-group { margin-bottom: 30px; } 
.range-container { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 10px; 
} 
.range-label { 
  width: 30px; 
  font-size: 13px; 
  color: #777; 
  font-weight: 500; 
  text-align: center; 
} 
.value-label { 
  font-size: 20px; 
  font-weight: bold; 
  margin-top: 6px; 
  color: #2c5886; 
} 
 
.bmi-slider { 
  appearance: none !important; 
  width: 100%; 
  height: 12px; 
  border-radius: 25px; 
  background: #e6eaf0; 
} 
 
/* Cross-browser slider thumb styling */ 
.bmi-slider::-webkit-slider-thumb, .bmi-slider::-moz-range-thumb { 
  height: 32px; 
  width: 32px; 
  background: #2c5886; 
  border: 3px solid white; 
  border-radius: 50%; 
  cursor: pointer; 
} 
 
#bmiCategory { 
  font-size: 20px; 
  color: #2b6cb0; 
  margin: 15px 0; 
} 
 
.bmi-number { 
  font-size: 28px; 
  font-weight: bold; 
  color: #222; 
}

 

 

⚙️ JavaScript Logic 

Now let’s connect the UI to the SpreadsheetWeb API. 

// Wait for the DOM to load 
document.addEventListener("DOMContentLoaded", () => { 
  // Get references to DOM elements 
  const heightSlider = document.getElementById("height"); 
  const weightSlider = document.getElementById("weight"); 
  const heightValue = document.getElementById("heightValue"); 
  const weightValue = document.getElementById("weightValue"); 
  const bmiValue = document.getElementById("bmiValue"); 
  const bmiCategory = document.getElementById("bmiCategory"); 
 
  // Visual slider fill effect 
  function setSliderBackground(slider) { 
    const percent = (slider.value - slider.min) / (slider.max - slider.min) * 100; 
   slider.style.backgroundSize = percent + '% 100%'; 
  } 
 
  // Prevent excessive API calls while sliding 
  function debounce(func, delay) { 
    let timeout; 
    return function (...args) { 
      clearTimeout(timeout); 
      timeout = setTimeout(() => func.apply(this, args), delay); 
    }; 
  } 
 
  // Set up event listeners with debounce 
  const debouncedUpdateUI = debounce(updateUI, 300); 
  heightSlider.addEventListener("input", debouncedUpdateUI); 
  weightSlider.addEventListener("input", debouncedUpdateUI); 
 
  // Update UI and send API request 
  function updateUI() { 
    const height = Number(heightSlider.value); 
    const weight = Number(weightSlider.value); 
 
    heightValue.textContent = height; 
    weightValue.textContent = weight; 
 
    setSliderBackground(heightSlider); 
    setSliderBackground(weightSlider); 
 
    fetchBMI(height, weight); 
  } 
 
  // Call SpreadsheetWeb API with inputs 
  function fetchBMI(height, weight) { 
    const body = { 
      request: { 
        workspaceId: "YOUR_WORKSPACEID", 
        applicationId: "YOUR-APPLICATIONID", 
        inputs: { 
          Height: height.toString(), 
          Weight: weight.toString() 
        }, 
        outputs: ["BMI", "BMIDescription"] 
      } 
    }; 
 
    fetch("https://private.spreadsheetweb.com/api/calculations/calculatesinglesimple", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json", 
        "Accept": "application/json" 
      }, 
      body: JSON.stringify(body) 
    }) 
    .then(res => res.json()) 
    .then(result => { 
      const bmi = parseFloat(result.response?.outputs?.BMI || "0").toFixed(2); 
      const desc = result.response?.outputs?.BMIDescription || "No description"; 
      bmiCategory.textContent = desc; 
      bmiValue.textContent = bmi; 
    }) 
    .catch(() => { 
      bmiValue.textContent = "--"; 
      bmiCategory.textContent = "API Error"; 
    }); 
  } 
 
  updateUI(); // Initial execution 
});

 

 

🚀 Key Benefits of Using SpreadsheetWeb API 

🔧 No Backend Setup Required 

All business logic resides in your spreadsheet. You don't need to write server-side code — the API takes care of it all. 

🖥️ Seamless Integration with Any Frontend 

You can use SpreadsheetWeb APIs with React, Vue, Angular, or vanilla JavaScript — perfect for embedding into dashboards or landing pages. 

📉 Fast Prototyping 

You can deploy Excel-based logic live in just a few minutes. This is incredibly useful for testing financial models, insurance quote tools, calculators, and more. 

🛡️ Secure and Controlled Access 

Only authorized domains can make API calls, and anonymous access can be toggled depending on use-case. 

🔁 Real-Time Feedback 

Because you're hitting a live API with each interaction, results are always up-to-date and consistent with your spreadsheet’s logic. 

 

🏁 Final Words 

By using the SpreadsheetWeb API, you can bridge the gap between Excel-based models and modern web applications. The calculatesinglesimple endpoint allows front-end developers to harness spreadsheet logic without touching backend code. 

This solution is perfect for: 

  • Online calculators 
  • Pricing applications 
  • ROI tools 
  • Risk assessment tools 
  • Educational simulations 

So go ahead, bring your Excel model to life with just a few lines of code!