The Convertor

index.html

<div class="container">
  <div class "row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <h1>Christina's Personal Converter</h1>
      <div class="result">Just enter the amount, don't be shy!</div>
      <div class="theconverter">
        <div class="btn-toolbar">
          <input class="btn-block" id="amounts" type="text">
          <button class="btn btn-primary" type="button" id="tolbs">kg to lbs</button>
          <button class="btn btn-primary" type="button" id="tokg">lbs to kg</button>
          
          <button class="btn btn-primary" type="button" id="tomi">km to mi</button>
          <button class="btn btn-primary" type="button" id="tokm">mi to km</button>
          <button class="btn btn-primary" type="button" id="tocm">in to cm</button>
          <button class="btn btn-primary" type="button" id="toin">cm to in</button>
          <button class="btn btn-primary clear" type="button" id="clear">clear</button>
        </div>
      </div>
      <div class="small text-center"><a href="http://freecodecamp.com/stormgrass">Richard</a> made this.
    </div>
    <div class="col-md-4">
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  $('#clear').click(function() {
    $('#amounts').val('');
    $('.result').html('Start over!')
  });

  $('#tolbs').click(function() {

    var eingabe = $('#amounts').val();
    var emptyValue = $('#amounts').val('');
    var re = new RegExp(/^[0-9.]*$/gm);

    if (eingabe === emptyValue ) {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 

    if (eingabe.match(re)) {

      var lbs = (eingabe * 2.2);
      var lbsRounded = Math.round(lbs * 100) / 100;

      $('.result').html(eingabe + " kilos are roughly " + lbsRounded + " pounds.");
      $('#amounts')[0].reset();
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });

  $('#tokg').click(function() {
    var eingabe = $('#amounts').val();
    var re = new RegExp(/^[0-9.]*$/gm);
    
    if (eingabe == '') {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 
    
    if (eingabe.match(re)) {
      var toKg = eingabe / 2.2;
      var toKgRounded = Math.round(toKg * 100) / 100;
      $('.result').html(eingabe + " pounds are roughly " + toKgRounded + " kilos.");
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });

  $('#tomi').click(function() {
    var eingabe = $('#amounts').val();
    var re = new RegExp(/^[0-9.]*$/gm);
    
    if (eingabe == '') {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 
    
    if (eingabe.match(re)) {
      var toMi = eingabe * 0.62137;
      var toMiRounded = Math.round(toMi * 100) / 100;
      $('.result').html(eingabe + " kilometers are roughly " + toMiRounded + " miles.");
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });

  $('#tokm').click(function() {
    var eingabe = $('#amounts').val();
    var re = new RegExp(/^[0-9.]*$/gm);
    
    if (eingabe == '') {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 
    
    if (eingabe.match(re)) {
      var toKm = eingabe / 0.62137;
      var toKmRounded = Math.round(toKm * 100) / 100;
      $('.result').html(eingabe + " miles are roughly " + toKmRounded + " kilometers.");
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });

  $('#tocm').click(function() {
    var eingabe = $('#amounts').val();
    var re = new RegExp(/^[0-9.]*$/gm);
    
    if (eingabe == '' ) {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 
    
    if (eingabe.match(re)) {
      var tocm = eingabe / 0.39370;
      var tocmRounded = Math.round(tocm * 100) / 100;
      $('.result').html(eingabe + " inches are roughly " + tocmRounded + " centimeters.");
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });

  $('#toin').click(function() {
    var eingabe = $('#amounts').val();
    var re = new RegExp(/^[0-9.]*$/gm);
    
    if (eingabe == '') {
      $('.result').html("Oh, please do enter a number, my dear.");
    } else 
    
    if (eingabe.match(re)) {
      var toIn = eingabe * 0.39370;
      var toInRounded = Math.round(toIn * 100) / 100;
      $('.result').html(eingabe + " centimeters are roughly " + toInRounded + " inches.");
    } else {
      $('.result').html("Sorry, my dear, but that is not a number.");
    };
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Great+Vibes);

h1 {
  font-family: Great Vibes;
  font-size: 80px;
}
.theconverter {
  
  margin-top: 20px;
  color: white; 
}

.btn-block {
  text-align: center;
}

#amounts {
  color: black;
}

h1 {
  text-align: center;
}

button {
  color: black;
}

.result {
  font-family: Great Vibes;
  font-size: 40px;
  text-align: center;
  color: #994c00;
  background-color: #ffd9b3;
  border-color: gray;
  border: solid 1px;
  border-radius: 5px;
  padding-top:10px;
  padding-right: 10px;
  padding-left: 10px;
}

.clear {
  background-color: #339933;
  border-color: #339933;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

The converter

The Convertor
-------------
Convert stuff

A [Pen](http://codepen.io/stormgrass/pen/obMyMr) by [Richard Hemmer](http://codepen.io/stormgrass) on [CodePen](http://codepen.io/).

[License](http://codepen.io/stormgrass/pen/obMyMr/license).