JavaScript Guide: Create a Custom Code Calculator on Webflow

Project Description:

• In this example, we will develop a budget calculator that is quite simple for creating a website.
• The calculator will be present on a “My Project” page and will display a numerical estimate based on the information filled out by the user.

List of Variables:

• Number of pages: To estimate the size of the site and the resources needed for its creation. The larger the site, the higher the budget.
• Difficulty level (estimated as a percentage): To estimate the complexity of the project and the workload. The more complex the site, the higher the budget.
• Need for design: A binary choice to determine if the project requires design. If yes, the budget increases.
• Need for development: A binary choice to determine if the project requires development. If yes, the budget increases.

This is the starting point for our custom calculator; it is with these variables that we will create our solution.

Base Pricing

The base pricing is 500 euros per page, multiplied by a complexity index. This pricing applies if there is a need for design OR development.

Base Pricing = (500 * number of pages) * (1 + difficulty percentage)

For example, for 5 pages and a complexity level of 25%:

Base Pricing = (500 * 5) * (1 + 0.25) = 2500 * 1.25 = 3125€

Advanced Pricing

Advanced pricing corresponds to the base pricing multiplied by 1.75. This pricing applies if there is a need for both design and development.

Advanced Pricing = base pricing * 1.75

For example, for the same 5 pages and a complexity level of 25%:

Advanced Pricing = 3125 * 1.75 = 5468.75€

Note that the variables and calculations are specific to this example and could be adjusted based on the project's specific requirements. It is fictional pricing that we will implement with the calculator, but we can imagine any calculation system depending on the characteristics of your project, whether it is more advanced or not.

Now that we know the details of the setup, let’s move on to Webflow to establish the structure of the calculator (HTML + CSS).

What we need to make the calculator work:

• a form to add our fields;
• a number field for the number of pages,
• a number field for the difficulty level,
• a checkbox for the need for design,
• a checkbox for the need for development,
• a text field to dynamically display the estimate result.

Once the various fields are created, we just need to assign an ID to each one. This will allow us to identify them in the code and retrieve their values.

So we add:

• an ID “pagesInput” to the field for the number of pages,
• an ID “difficultyInput” to the field for the difficulty level,
• an ID “designCheckbox” to the checkbox for the need for design,
• an ID “developmentCheckbox” to the checkbox for the need for development,
• an ID “priceElement” to the text element where we will display the result.

This step is crucial to establish a connection between the form elements and our JavaScript code. Be sure to name your IDs consistently for easier code understanding.

Following these initial steps, we are now ready to move on to the next phase: writing the JavaScript code that will bring our calculator to life.

#1 Retrieve Form Elements

To start, we can retrieve the form elements in our code and store them in variables for later reuse.

In JavaScript, we can do this with the getElementById method to fetch specific elements based on their ID (which we defined earlier).

// enregistrer les différents champs de formulaire dans des variables
let pagesInput = document.getElementById("pages");
let difficultyInput = document.getElementById("difficulty");
let designCheckbox = document.getElementById("design");
let developmentCheckbox = document.getElementById("development");

let pagesInput: creates a variable to associate with something (here, one of our form fields).

document.getElementById("pages"): retrieves the HTML element with the corresponding ID.

#2 Listen for Field Changes

Next, we will identify all the form fields in a variable, create a loop to iterate through those fields, and add an event listener to each of them.

To keep it simple, when the user modifies the value of any form field, the code inside that event listener will be executed.

// enregistrer tous les éléments avec une balise  dans une variable "inputs"
let inputsAll = document.querySelectorAll("input");

// parcourir tous les champs et, pour chacun d'entre eux, exécuter le code fourni
inputsAll.forEach(function (inputsAll) {
  // créer un écouteur d'événement "input" (modification d'un champ de formulaire)
  inputsAll.addEventListener("input", function() {

    // à chaque modification d'un champ de formulaire, le code présent ici sera exécuté

  });
});

querySelectorAll("input"): retrieves all elements matching the CSS selector in parentheses (here, all elements with an  tag).

inputsAll.forEach(function ()): iterates through all elements stored in our inputsAll variable and executes the provided code for each of them.

addEventListener("input", function()) : listens for "input" events on each element, meaning changes to the fields, and executes the provided code when the event occurs.

With these few lines, the code we add in the event listener will be executed every time the specified event takes place. Thus, with each modification of a form field, we can perform our calculations and dynamically modify the result of our estimate.

#3 Extract Field Values

Inside our event listener, we will begin our calculations.

First, we will create new variables to extract the values provided by the user in our form fields and convert them into numbers (to facilitate our calculations later).

// enregistrer les valeurs des champs de formulaire dans des variables
let pages = parseFloat(pagesInput.value);
let difficulty = parseFloat(difficultyInput.value / 100);
let design = designCheckbox.checked;
let development = developmentCheckbox.checked;

pagesInput.value: retrieves the value provided in the corresponding field.

parseFloat(): converts the initially string format value into a number to perform calculations later.

designCheckbox.checked: retrieves the status of the corresponding checkbox (the variable will return true if the checkbox is checked, and false if it is not).

#4 Budget Calculation

Now that our values are stored in variables, we can proceed to the calculations.

To start, we create new variables for the base price, advanced price, and the price that will actually be considered, then we will perform one calculation or another based on the choices made by the user:

• If design AND development are needed, we will consider the calculation of the advanced price.
• If either one OR the other is needed, we will consider the calculation of the base price.
• If neither is needed, the price will be zero.

// créer des variables pour le prix de base et le prix final
let priceBasic = (pages * 500) * (1 + difficulty);
let priceAdvanced = priceBasic * 1.75;
let priceActual;

if (design && development) {
  // effectuer ce calcul SI besoin de design ET de développement
  priceActual = priceAdvanced.toFixed();
} else if (design || development) {
  // OU, effectuer ce calcul SI besoin de design OU de développement
  priceFinal = priceBasic.toFixed();
} else {
  // OU, effectuer ce calcul
  priceFinal = 0;
}

if (condition) {}: executes the provided function if the condition is met.

else if (condition) {}: executes the provided function if the condition is met, in the case where the previous condition is not.

else {}: executes the provided function if the previous conditions are not met.

toFixed(): rounds a number to the nearest integer.

#5 Dynamically Display the Result

Finally, we will update the display of the result.

// enregistre l'élément HTML qui affichera le résultat dans une variable
let priceSpan = document.getElementById("price");

// modifie le texte de l'élément avec le résultat du calcul
priceSpan.innerText = priceFinal;

priceSpan.innerText: modifies the textual content of the element.

In summary, this JavaScript script listens for changes in the form fields, retrieves the values from these fields, performs calculations based on the retrieved values according to the specified conditions, and then updates the display of the result on the page.

The complete code:

<script>

// enregistrer les différents champs de formulaire dans des variables
let pagesInput = document.getElementById("pages");
let difficultyInput = document.getElementById("difficulty");
let designCheckbox = document.getElementById("design");
let developmentCheckbox = document.getElementById("development");

// enregistrer tous les éléments avec une balise  dans une variable "inputs"
let inputsAll = document.querySelectorAll("input");

// parcourir tous les champs et, pour chacun d'entre eux, exécuter le code fourni
inputsAll.forEach(function (inputsAll) {
  // créer un écouteur d'événement "input" (modification d'un champ de formulaire)
  inputsAll.addEventListener("input", function() {

    // enregistrer les valeurs des champs de formulaire dans des variables
    let pages = parseFloat(pagesInput.value);
    let difficulty = parseFloat(difficultyInput.value / 100);
    let design = designCheckbox.checked;
    let development = developmentCheckbox.checked;

    // créer des variables pour le prix de base et le prix final
    let priceBasic = (pages * 500) * (1 + difficulty);
    let priceAdvanced = priceBasic * 1.75;
    let priceActual;
			
    if (design && development) {
      // effectuer ce calcul SI besoin de design ET de développement
      priceActual = priceAdvanced.toFixed();
    } else if (design || development) {
      // OU, effectuer ce calcul SI besoin de design OU de développement
      priceActual = priceBasic.toFixed();
    } else {
      // OU, effectuer ce calcul
      priceActual = 0;
    }

    // enregistre l'élément HTML qui affichera le résultat dans une variable
    let priceSpan = document.getElementById("price");
		
    // modifie le texte de l'élément avec le résultat du calcul
    priceSpan.innerText = priceActual;

  });
});

</script>

And there you have it, with all this, our custom calculator is now functional!

Now that the code is ready, all that’s left to do is add it to the Footer Code of the custom code on Webflow.