<section>
  <!--<h1 class="underline">HOVER ME!</h1>-->
  <div class="container">
  </div>
  <button>SEND</button>
  <span class="result"></span>
</section>

body, html {
  height: 100vh;
  font-family: 'Inconsolata', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
.container {
  border: 1px solid red;
}
*/
.result {
  text-align: center;
  color: orange;
  font-size: 2em;
  font-weight: bold;
  margin-top: 1.5em;
  display: block;
}

input {
  border: 0;
  border-bottom: 2px solid #C0C0C0;
  outline: 0;
  color: #111111;
  width: 37px;
  padding: 0 5px;
  margin-right: 10px;
  text-align: center;
  font-size: 3em;
  cursor: pointer;
  will-change: border;
  transition: border .3s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    -moz-appearance:textfield;
    appearance: none;
    margin: 0; 
}

input:focus {
  border: 0;
  border-bottom: 2px solid #ff6200;
}

input:disabled {
  background: #fff;
}

input:last-child {
  margin-right: 0;
}

.paintOrangeLine {
  border: 0;
  border-bottom: 2px solid #ff6200;
}

button {
  background: #ff6200;
  color: whiteSmoke;
  padding: 1em 2em;
  margin-top: 2em;
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
  will-change: opacity;
}

button:hover {
  opacity: .8;
}

const result = document.querySelector('.result');

// Built n inputs dynamically
const times = () => {
  let inputTemplates = [];
  for (let i=0; i < 6; i++) {
    inputTemplates[i] = '<input type="text" onchange="isComplete()" maxlength="1" oninput="goToNextInput()" disabled>';
  }
  
  let inputCollection = inputTemplates.join('');
  return inputCollection;
}

// Mount html template
const container = document.querySelector('.container');
container.innerHTML = times();

// Collect the inputs
const inputsList = document.querySelectorAll('input');

// onchange setDisabledAttribute

const isComplete = () => {
  for(const [i, inputElement] of inputsList.entries()) {
     if (inputElement.value.length === 1) {
         // setDisabledAttribute(inputsList[i]);
         inputsList[i].classList.add('paintOrangeLine');
      } else {
        inputsList[i].classList.remove('paintOrangeLine');
      }
  }
}

const goToNextInput = () => {
  for(const [i, inputElement] of inputsList.entries()) {
     if (inputElement.value.length === 1 && i !== 5) {
       removeDisabledAttribute(inputsList[i+1]);
       inputsList[i+1].focus();
      }
     if (inputElement.value.length === 1 && i === 5) {
       inputElement.parentElement.nextElementSibling.focus();
       areAllFilled(inputsList) ? setDisabledAttributeForAll(inputsList) : '';
     }
  }
}

// Get all values from inputs
const sendValues = () => {
  let inputValues = [];
  for(let inputValue of inputsList) {
    if(inputValue.value.length === 1) {
      
      inputValues.push(inputValue.value);
    }
  }
  
  result.innerHTML = inputValues.join('');
}

// Show result in screen after button clicked
const btn = document.querySelector('button');
btn.addEventListener('click', sendValues, true);


// Remove disabled attribute from input
const removeDisabledAttribute = (elem) => {
  elem.removeAttribute("disabled");;
}

// Set disabled attribute from input
const setDisabledAttribute = (elem) => {
  elem.setAttribute("disabled", '');
}

const setDisabledAttributeForAll = (arr) => {
  for(let input of arr) {
    input.setAttribute('disabled', '');
  }
}

// Remove disabled from the first input
// to be called in connectedCallback()
removeDisabledAttribute(inputsList[0]);

const fill = (currentValue) => {
  return currentValue.value.length === 1;
}

// Check if all fields are filled
const areAllFilled = (arr) => {
  let newArray = Array.from(arr);
  return newArray.every((input) => input.value.length === 1);
}