Number Input

This example demonstrates how to install the package, import the NumberInput class, and configure it. All configuration options are optional - none are required. If unset, they will be set to their default values (typically empty for strings and numbers, or false for boolean options.)

In this example, we have created a new NumberInput to simulate an input asking for the user's age, and attached an input event listener to it. This will print out the selected age every time the user makes a change to the input. In the options, we are enforcing a minimum and maximum value, and only allowing integer values.

Finally, we use the getElement() function to appent our newly created/configured control onto our HTML page.

Installation

Follow these steps to create a new webpack project and install the buildform dependency to run this example.

# Create and open project folder
mkdir Number_Input_demo
cd Number_Input_demo
# Initialize project and install dependencies
npm init -y
npm pkg set type="module"
npm i buildform@0.0.3 webpack-cli
# Create source files
touch index.html
mkdir src
touch src/index.js
# Open new files
open index.html
open src/index.js

Source

Copy and paste the following source code blocks into the newly created files.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="dist/main.js"></script>
</head>

<body>
    <p id="selectedAge">Type a number below</p>
</body>

</html>

index.js

import { NumberInput } from 'buildform';

// Define a new NumberInput element.
const numberInput = new NumberInput({
    label: 'Enter your age:',
    labelFirst: true,
    title: 'Age input',
    placeholder: 'Age',
    min: 13,
    max: 100,
    step: 1,
});

// Define a function to use for the event listener.
function showValue() {
    document.getElementById('selectedAge').textContent = 'Age is ' + numberInput.getValue();
}

// Attach the event listener.
numberInput.addEventListener('input', showValue);

// Append this onto the HTML parent element.
window.addEventListener('load', () => {
    document.body.append(numberInput.getElement());
});

Build Project

In the base project directory Number_Input_demo/, run the following commands, and then open your index.html file in any web browser of your choice! Uncomment the second line to open the project in Firefox, for example.

npx webpack --mode development # or --mode production
# firefox index.html