<div class="form">
  <h2 id='titulo'>¿Cuántos vasos de Agua debo tomar ?</h2>
  <div class="container">
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
      <input value="1"  id="option-2" type="radio" class="mdl-radio__button" name="options" checked="checked"/>
      <span class="mdl-radio__label"> Libras </span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
      <input value="2.20462"  id="option-1" type="radio" class="mdl-radio__button" name="options" />
      <span class="mdl-radio__label"> Kilos </span>
    </label><br />
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input type="text" class="mdl-textfield__input" id="textfield-3" />
      <label for="textfield-3" class="mdl-textfield__label">Ingresa tu peso</label>
    </div>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Resultado
    </button>
    <p id="resultado"><br>
      <strong id="vasos"></strong> Vasos de Agua <br><br>
      <strong id="litros"></strong> Litros de Agua
    </p>
    
  </div>
  <p>Se libre de utilizar el código de esta aplicación :)  #mentehacker</p>
</div>
body {background: #E6E6E6;}  
.form {
    color:         #656565;
    background:    #E6E6E6;
    width:         50%;
    margin:        0em auto;
    padding:       0.7em;
    border-radius: 8px;
    font-family:   'Roboto';
    font-size:      1.2em;
  }
@media (max-width: 768px) { 
  width:         90%;
}
  .container{
    background:    #fff;
    padding:       1.2em;
    border-radius: 8px;
  }
  #titulo {
    font-size:     1.2em;
    text-align:    center;
    margin:        0px;
  }
  #resultado { font-size:     1.2em; }
  /*mente hacker #a@mentehacker.com*/
  var vasos, valor;
  $('button').click( function () {
    valor = $( 'input:checked' ).val();
    vasos = ($( '#textfield-3' ).val() * valor )/ 16;
    $( '#vasos' ).html(vasos.toFixed(1));
    $( '#litros' ).html((vasos/4).toFixed(1));
  });
//mente hacker #a@mentehacker.com

External CSS

  1. https://code.getmdl.io/1.1.3/material.cyan-teal.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons
  3. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js