Repartija

index.html

    <div id = 'contenedor'>
      <h1>Repartija</h1>
        <div id = 'entrada'>
          <form>
            <input id ='nombre' type='text' placeholder='Nombre'>
            <input id ='pago' type='number' placeholder='y cuánto gastó'>     
            <button type='button' onclick="agregarElemento()">enviar</button>
          </form>
        </div>
      <div id = 'resultado'>
        <div id="listado"></div>
        <div id='total' type="text"></div>
      </div>
    </div>

Repartija.markdown

Repartija

Simple Formulario que es manejado por javascript para realizar cálculos en el navegador sin recurrir al servidor.

A Pen by Programa tu Futuro on CodePen.

License.

script.js

      var pagos=[]

      function sumarValores(array){
        var total = 0
        for (var i = 0; i < array.length; i++)
          total += parseFloat(array[i].pago)
        return total/ array.length
      }

      function agregarElemento(){
        var cuadroPagos = document.getElementById("listado");
        var cuadroResultado = document.getElementById("total");
        var usuario = document.getElementById("nombre").value
        var valor = document.getElementById("pago").value
        pagos.push({nombre: usuario, pago: valor})

        cuadroPagos.innerHTML = pagos.map(function (elem){
          return elem.nombre + ": $" + elem.pago;
        }).join('<br/>');

        cuadroResultado.innerHTML = "A cada uno le toca aportar: $" + sumarValores(pagos).toFixed(2)
      }

style.css

html {
	background: url("../imagenes/party.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: black;
	background-size: cover;
	color: white;
	font-family: Helvetica;
	font-size: 28px;
	text-align: center;
}

input, button {
	margin: 0.5em;
	border: 0;
	padding: 10px;
	font-size: 28px;
	color: black;
	background-color: white;
	opacity: 0.8;
}

button {
	background: red;
	color: white;
}

#contenedor{
	position: relative;
	width: 100%;
	height: 100%;
}

#resultado, #entrada{
	display: inline-block;
    vertical-align: top;
	max-width: 400px;
	height: 250px;
}

#total, #listado{
	text-shadow: 2px 2px 5px black;
	font-size: 20px;
    text-align: left;
}

#listado{
    padding-left: 50px;
}