window.onload = function() {

  // Update ingredients amounts

  let inputs = []
  document.querySelectorAll('.number').forEach(function (number) {

    // Install input
    const value = parseInt(number.innerHTML)
    number.innerHTML = `<input value="${value}">`

    // Push to inputs
    const element = number.children[0]
    inputs.push({ element, value })

    element.addEventListener('input', function() {

      // Parse modified input value
      const n = parseFloat(element.value.replace(',', '.')) || 0

      if (!isNaN(n)) {
        // Find current factor
        const currentInput = inputs.find(function (input) {
          return input.element === element
        })
        const factor = n / currentInput.value

        // Apply factor to other inputs
        inputs.forEach(function (input) {
          if (input.element !== currentInput.element) {
            input.element.value = formatNumber(factor * input.value)
          }
        })
      }
    })
  })

  // Set up done marks for steps

  document.querySelectorAll('ol > li').forEach(function (item) {
    item.addEventListener('click', function() {
      item.className = item.className ? '' : 'completed'
    })
  })

}

function formatNumber(n) {
  const xs = n.toString().split('.')
  if (xs.length == 2) {
    return `${xs[0]}.${xs[1].slice(0, 1)}`
  } else {
    return n
  }
}