![Number Code Input](/img/articles/number-code-input-html-css-js.gif)*Number Code Input*
As you can see, the core functionality of these inputs is to enter one number at a time. The building of that happy flow can be quite easy to do. When playing around we can see that there a quite a few more functionalities. Let's first set the requirements:
The Number Code Input should:
* automatically move to the next and stop at the last number input
* navigate from left to right with the arrow keys
* delete a single value in input and automatically going back to and delete the value of the previous input when hitting the backspace key
* delete the value of a focussed and previous input if backspace is pressed multiple times
* handle the pasting of several/all numbers in a number input
You see, this is quite a bit of functionality. As always, I will build this custom input in a progressively enhanced way on three levels. Please read more about this in my blog ["Writing progressively enhanced custom inputs for the web"](https://www.davebitter.com/articles/custom-inputs-web).
## Structural (HTML)
![Number Code Input with HTML](/img/articles/number-code-input-html.gif)*Number Code Input with HTML*

```html
<fieldset name='number-code' data-number-code-form>
    <legend>Number Code</legend>

    <input type="number" min='0' max='9' name='number-code-0' data-number-code-input='0' required />
    <input type="number" min='0' max='9' name='number-code-1' data-number-code-input='1' required />
    <input type="number" min='0' max='9' name='number-code-2' data-number-code-input='2' required />
    <input type="number" min='0' max='9' name='number-code-3' data-number-code-input='3' required />
    <input type="number" min='0' max='9' name='number-code-4' data-number-code-input='4' required />
    <input type="number" min='0' max='9' name='number-code-5' data-number-code-input='5' required />
    <input type="number" min='0' max='9' name='number-code-6' data-number-code-input='6' required />
    <input type="number" min='0' max='9' name='number-code-7' data-number-code-input='7' required />
</fieldset>
```
Let's start with the structure. As you might have read in the article I mentioned, I need to provide a working HTML version first. The Number Code Input will consist of a fieldset containing all the separate number inputs. The fieldset is used to indicate that these inputs belong together. With the `legend`, I indicate what this group is.
The inputs itself have a few needed attributes. Firstly, I declared that the input type must be a number. This is not just for validation but triggers the [number keyboard layout](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs) on devices. This increases the user experience. Next to that, I've added a `min` value of 0 and a `max` value of 9. I did this so you can only enter a single number character per input. You might see some attributes like `data-number-code-input`. This has no function right now but will be used later on by the JavaScript.
Great, the Number Code Input now allows for numbers being entered by the user. Let's proceed to the next step.
## Presentational (CSS)
![Number Code Input with HTML and CSS](/img/articles/number-code-input-html-css.gif)*Number Code Input with HTML and CSS*
```css
legend {
  font-size: 0;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
```
Naturally, the style of the inputs is up to you. I did add a few things, besides nice visuals, to make the form a bit better. I set the `font-size` of the legend to 0 as visually we don't need it, but for screenreaders, we want to have that information available. Next to that, I hid the arrows in the input field as I did not find it needed in my use case. This is, of course, up to you.
The Number Code Input is starting to look a lot better. Now let's add some interactivity.
## Behavioural (JavaScript)
![Number Code Input with HTML, CSS and JS](/img/articles/number-code-input-html-css-js.gif)*Number Code Input with HTML, CSS and JS*
Let's take the behavioural layer one requirement at a time.
### Automatically move to the next and stop at the last number input
I need to add some logic to call focus on the next number input if the case that the current number input is not the last one
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleInput = ({target}) => {
  let currentIndex = Number(target.dataset.numberCodeInput);
  const nextIndex = currentIndex + 1;

  if(nextIndex < numberCodeInputs.length) {
    numberCodeInputs[nextIndex].focus();
  }
});
```
### Navigate from left to right with the arrow keys
I need to add an event listener that triggers when a key is pressed. I then focus on the next or previous number input if there is one.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleKeyDown = e => {
  const {code, target} = e;

  const currentIndex = Number(target.dataset.numberCodeInput);
  const previousIndex = currentIndex - 1;
  const nextIndex = currentIndex + 1;

  const hasPreviousIndex = previousIndex >= 0;
  const hasNextIndex = nextIndex <= numberCodeInputs.length - 1

  switch(code) {
    case 'ArrowLeft':
    case 'ArrowUp':
      if (hasPreviousIndex) {
        numberCodeInputs[previousIndex].focus();
      }
      e.preventDefault();
      break;

    case 'ArrowRight':
    case 'ArrowDown':
      if (hasNextIndex) {
        numberCodeInputs[nextIndex].focus();
      }
      e.preventDefault();
      break;

    default:
      break;
  }
}

numberCodeForm.addEventListener('keydown', handleKeyDown);
```
### Delete a single value in an input and automatically going back to and delete the value of the previous input when hitting the backspace key
This functionality is pretty straight forward. I delete the value of the focussed number input and focus the previous number input if present.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleKeyDown = e => {
  const {code, target} = e;

  const currentIndex = Number(target.dataset.numberCodeInput);
  const previousIndex = currentIndex - 1;
  const nextIndex = currentIndex + 1;

  const hasPreviousIndex = previousIndex >= 0;
  const hasNextIndex = nextIndex <= numberCodeInputs.length - 1

  switch(code) {
    case 'Backspace':
      if (!e.target.value.length && hasPreviousIndex) {
        numberCodeInputs[previousIndex].value = null;
        numberCodeInputs[previousIndex].focus();
      }
      break;
    default:
      break;
  }
}

numberCodeForm.addEventListener('keydown', handleKeyDown);
```
### Handle the pasting of several/all numbers in a number input
Finally, when pasting a value of multiple characters I want to automatically fill out the number input based on that value. This is important as this is a common way people fill out these forms.
```js
const numberCodeForm = document.querySelector('[data-number-code-form]');
const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];

const handleInput = ({target}) => {
  const inputLength = target.value.length;
  let currentIndex = Number(target.dataset.numberCodeInput);

  if (inputLength > 1) {
    const inputValues = target.value.split('');

    inputValues.forEach((value, valueIndex) => {
      const nextValueIndex = currentIndex + valueIndex;

      if (nextValueIndex >= numberCodeInputs.length) { return; }

      numberCodeInputs[nextValueIndex].value = value;
    });

    currentIndex += inputValues.length - 2;
  }

  const nextIndex = currentIndex + 1;
});
```
## Looking back
That's it. I build a progressively enhanced Number Code Input that deals with the several requirements we set. Feel free to have a look over at [CodePen](https://codepen.io/davebitter/full/VweaZqY) to play around with the Number Code Input and look further into the source code.

Building a Number Code Input

### Progressive enhancement
Progressive enhancement is a technique we use to enhance an element when the user’s browser has certain functionalities. By far, the biggest part of progressive enhancement is enhancing elements when CSS and JavaScript are available.
The technique is simple. First, built the HTML to always offer a working solution. Then add CSS to make the element more visually appealing. Finally, add some JavaScript to enhance the user experience by adding custom interactivity.
### Progressively enhanced custom inputs
So, how to deal with custom inputs? For example a custom three-way switch shown below.
![Three way switch with HTML, CSS and JavaScript](//images.ctfassets.net/w4dg3cjf42ew/1zNvSfEft1nLo19YjfNUZz/e3f4e68aa0c8133ba17042ad2514963e/html_css_js.gif)
First, break down the functionality the input requires. As a user, you have three choices. We indicate with a color whether the value is active (green), inactive (red) or no preference (grey). The input will have to animate between the options as well.
### HTML
First start with the HTML. There are three options the user can select and only one option can be selected at a time. This is a perfect use case for HTML radio inputs. Let’s write that first.
```html
...
<form>
  <fieldset>
    <legend>Would you like to receive news updates?</legend>
    <div>
      <div>
        <input id='inactive' type='radio' name='email-preference' />
        <label for='inactive'>No</label>

        <input id='no-preference' type='radio' name='email-preference' checked />
        <label for='no-preference'>No preference</label>

        <input id='active' type='radio' name='email-preference' />
        <label for='active'>Yes</label>
      </div>
    </div>
  </fieldset>
</form>
...
```
![Three way switch with HTML only](//images.ctfassets.net/w4dg3cjf42ew/1ZF5ZS5RboxdmcDA8Q3w1S/2a6c6e530c46eb96b90ff853f7d459ca/html.gif)
### CSS
I can add styling to make it look like the design with the HTML in place. So I first add some needed wrapping `div`s and classes to the existing HTML for the CSS.
```html
...
<body data-has-js='false'>
  <form>
    <fieldset>
      <legend>Would you like to receive news updates?</legend>
      <div class='switch-wrapper'>
        <div class='switch'>
          <input id='inactive' class='switch__input' type='radio' name='email-preference' />
          <label for='inactive' class='switch__label'>No</label>

          <input id='no-preference' class='switch__input' type='radio' name='email-preference' checked />
          <label for='no-preference' class='switch__label'>No preference</label>

          <input id='active' class='switch__input' type='radio' name='email-preference' />
          <label for='active' class='switch__label'>Yes</label>

        </div>
      </div>
    </fieldset>
  </form>
</body>
...
```
After this, add CSS to style the input to look like the proposed design. Then hide the labels for the inputs because you can now use CSS to indicate the chosen value. The below sample uses SCSS, a pre-processor for CSS.
```css
...
.switch__input:checked {
  background-color: var(--color-white);

  &[data-state='active'] {
    [data-has-js='false'] & {
      background-color: var(--color-green);
    }
  }

  &[data-state='inactive'] {
    [data-has-js='false'] & {
      background-color: var(--color-red);
    }
  }

  [data-has-js='true'] & {
      background-color: transparent;
  }
}
...
```

As you may have noticed, I have added an attribute to the `body` element to check whether there is JavaScript enabled because some of the styling will just be needed for the non-JavaScript version.
![Three way switch with HTML and CSS](//images.ctfassets.net/w4dg3cjf42ew/6YU8CaGMTZWoi1SIjZ9GwI/5ed6143c2c17b8133afe66d45908759a/html_css.gif)
### JavaScript
Lastly, some JavaScript is added to make the full version including an animation and containing all the design.
I'll first add an HTML element for the, to be animated, active circle that only shows-up when there is JavaScript. I also added a few data attributes to the HTML that will be used as selectors in the JavaScript
```html
...
<body data-has-js='false'>
  <form>
    <fieldset>
      <legend>Would you like to receive news updates?</legend>
      <div class='switch-wrapper' data-switch-wrapper>
        <div class='switch'>
          <input id='inactive' class='switch__input' type='radio' name='email-preference' data-state='inactive' data-switch-input />
          <label for='inactive' class='switch__label'>No</label>

          <input id='no-preference' class='switch__input' type='radio' name='email-preference' data-switch-input checked />
          <label for='no-preference' class='switch__label'>No preference</label>

          <input id='active' class='switch__input' type='radio' name='email-preference' data-state='active' data-switch-input />
          <label for='active' class='switch__label'>Yes</label>

          <span class='switch__pill' data-switch-pill />
        </div>
      </div>
    </fieldset>
  </form>
</body>
...
```
With JavaScript, I then indicate that the client has JavaScript.
```js
document.body.setAttribute('data-has-js', true);
```
After that, all I need to do is listen for inputs by the user and animate the active circle to the active input.
```js
// Needed DOM nodes
const elements = {
  switchWrapper: document.querySelector('[data-switch-wrapper]'),
  inputs: Array.from(document.querySelectorAll('[data-switch-input]')),
  pill: document.querySelector('[data-switch-pill]')
};

// Place pill over passed node
const updatePillPosition = ({target}, animate = true) => {
  const inputIndex = elements.inputs.findIndex(input => input === target);
  const inputState = target.getAttribute('data-state');

  elements.switchWrapper.dataset.animate = animate;
  elements.pill.style.transform = `translate(${inputIndex * target.scrollWidth}px, -50%)`;
  elements.switchWrapper.dataset.state = inputState || 'default';
};

// Check for default checked node

const defaultActiveInput = elements.inputs.find(input => input.checked)

if (defaultActiveInput) { updatePillPosition({target: defaultActiveInput}, false); }

// Listen for input events on the nodes
elements.inputs.forEach(input => input.addEventListener('input', updatePillPosition));
```
And that makes final result! Always consider building progressively enhanced custom inputs for the web that also work in cases where a screenreader (no CSS) is used or JavaScript is not available.
![html+css+js](//images.ctfassets.net/w4dg3cjf42ew/5WyKR8vBL5kJXTwbiu8BOF/a97d86a406297f044fb0c80638083bf8/html_css_js.gif)
## Final thoughts
Building in a progressively enhanced way is quite a bit of work. So why is it so important? By writing semantically correct HTML, we offer an accessible website for people who, for instance, use a screenreader. By making it work without JavaScript, we make our website accessible for users that can’t or won’t load JavaScript. Our website will deliver the best possible user experience for every user.
## Demo
You can find the demo and all the code of the three-way switch we worked on over at [CodePen](https://codepen.io/davebitter/full/WNeByaW).

Writing progressively enhanced custom inputs for the web

I am a Senior Front-end Consultant, Developer Advocate, and Google Developer Expert for Web. Here, you can find my resume, a collection of my articles covering a wide range of topics and get in contact.

Prototype

The backdrop-filter property lets you apply graphical effects such as blurring or colour shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
This introduces a new tool to progressively enhance your website or web -application.  [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) has a list of all the values you can set. Today, we will take a look at one that my co-worker and CSS wizard [Syb Wartna](https://waarissyb.nl/) and I recently used in a project. This value is blur-filter.
We made a sidebar that would reveal more information after clicking on an item. It was sort of like a modal. For the past few years, there has been one technique that everybody would use. The backdrop, or overlay, would have a slightly transparent, solid, grey colour. Let’s enhance this using the new backdrop-filter!
For this example, we are going to build a simple modal. First, we’ll create the version that just displays a backdrop:
```scss

    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
        }
    }

    ...

```
![default backdrop](/img/quick-bits/backdrop-default.jpg)*Default backdrop*
Then we add one simple CSS property.
```scss

    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
            backdrop-filter: blur(2px);
        }
    }

    ...

```
![blurry backdrop](/img/quick-bits/backdrop-blur.jpg)*Blurry backdrop*

And there we have it. It’s a simple way to quickly enhance the feel of your website or web-application. Just add this property below your default slightly transparent backdrop and you will offer this style as soon as it hits in the browser your user is using. Obviously, this effect is more dramatic with a less empty page. [View the demo here](/examples/backdrop-filter/modal/modal.html). This demo was built with the [Mirabeau boilerplate](https://github.com/mirabeau-nl/frontend-boilerplate). The source code for this demo can be found at [this Gist](https://gist.github.com/DaveBitter/dd0cc612ce87bd6f69fc379b101b9265) if you would like to have a look at the final working code.

Prototype

Articles

Building a Number Code Input

Writing progressively enhanced custom inputs for the web

Quick Bits

Backdrop Filter