Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="number" id="number" step="any">
  <div class="control">
    <input type="button" value="-" id="minus">
    <input type="button" value="+" id="add">
  </div>
</body>
</html>
 
'use strict';
​
let addButton = document.querySelector('#add')
let minusButton = document.querySelector('#minus')
let numberInput = document.querySelector('#number')
let number
let validValue
let tId
const MAX_NUMBER = 1000
const MIN_NUMBER = 0.01
​
​
// modify -> validate -> (notify -> go back) -> update
​
const updateNumber = value => {
  numberInput.value = value
  number = value
  validValue = value
}
​
const formatNumber = number => number.toFixed(2)
​
const notify = type => {
  if (type === 'min') {
    console.info('min number')
  }
  if (type === 'max') {
    console.info('max number')
  }
  if (type === 'invalid') {
    console.info('min number')
  }
}
​
const validateNumber = (number, min = MIN_NUMBER, max = MAX_NUMBER) => {
  let value = parseFloat(number)
​
  if (Number.isNaN(value) === true) {
    notify('invalid')
    return +validValue
  }
  if (number > max) {
    notify('max')
    return max
  }
  if (number < min) {
    notify('min')
    return min
  }
​
  return value
}
​
const addNumber = value => {
  let number = Number.parseFloat(value)
  go(number + 1)
}
​
const minusNumber = value => {
  let number = Number.parseFloat(value)
  go(number - 1)
}
​
const go = value => {
  updateNumber(formatNumber(validateNumber(value)))
}
​
numberInput.addEventListener('blur', (event) => {
  let value = event.target.value
  go(value)
}, false)
​
​
addButton.addEventListener('click', () => {
  addNumber(number)
}, false)
​
​
minusButton.addEventListener('click', () => {
  minusNumber(number)
}, false)
​
​
// page ready
go(1)
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x