iMasters #557209

by João Paulo Vieira da Silva

HTML

<div class="wrapper">
  <form action="post" id="my-form">
    <input type="number">
    <input type="text"> <input type="text" placeholder="Resultado">
  </form>
  <button>Submit</button>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 30px;
  background-color: #9b59b6;
}

form input,
button {
  width: 100%;
}

form input {
  border: 0;
  padding: 10px 20px;
  outline: none;
  font-size: 20px;
  color: #ccc;
  margin-top: 10px;
}

form input:first-child {
  margin-top: 0;
}

button {
  padding: 20px;
  margin-top: 20px;
  font-size: 20px;
  font-weight: 800;
  background: #8e44ad;
  color: #ccc;
  text-transform: uppercase;
  border: 0;
}

JavaScript

(function () {
	/**
   * Get Input Value
   *
   * Essa função ela só tem um parâmetro que é o número do input na sua respectiva ordem na página.
   *
   * Por exemplo:
   *
   * - Se você quiser o valor do input "number" primeiro então é só colocar get_input_value(1) e o
   *   valor será pego automaticamente.
   */
   var get_input_value = function get_input_value( element_order ) {
   		if ( parseInt( document.querySelectorAll( '#my-form input' )[ element_order - 1 ].value ) ) {
      		return parseInt( document.querySelectorAll( '#my-form input' )[ element_order - 1 ].value );
      } else {
      		return document.querySelectorAll( '#my-form input' )[ element_order - 1 ].value;
      }
   };
   
   document.querySelector( 'button' ).addEventListener( 'click', function () {
   		document.querySelectorAll( 'input' )[2].value = get_input_value( 1 ) + get_input_value( 2 );
   } );
})();