[2016-07-25] Challenge #277 [Easy] Simplifying fractions

A fraction exists of a numerator (top part) and a denominator (bottom part) as you probably all know. Simplifying (or reducing) fractions means to make the fraction as simple as possible. Meaning that the denominator is a close to 1 as possible. This can be done by dividing the numerator and denominator by their greatest common divisor.

by Tiago Sousa

HTML

<h1>Simplifying Fractions</h1>
<div class="box">
  <div class="left">
    <form class="fraction">
      <input type="text" class="fraction__input fraction__input--numerator">
      <hr>
      <input type="text" class="fraction__input fraction__input--denominator">    
    </form>
  </div>
  
  <div class="right">
    <div class="fraction__display fraction__display--numerator">1</div>
    <hr>
    <div class="fraction__display fraction__display--denominator">2</div>
  </div>
</div>

CSS

body {
  background: #E8DB7D;
}
h1 {
  color: #231123;
  text-transform: uppercase;
  text-align: center;
}
hr {
  background: #1d1d1d;
  width: 100px;
  height: 1px;
  outline: none;
  border: none;
}

.box {
  display: flex;
  flex-direction: row;
}

.box > div {
  flex-grow: 1;
  flex-basis: 0;
}

.left, .right {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
}

.fraction__input {
  display: block;
  box-sizing: border-box;
  margin: auto;
  background: #558C8C;
  outline: none;
  border: none;
  text-align: center;
  width: 100px;
  padding: 5px 10px;
}

.fraction__display {
  display: block;
  width: auto;
  text-align: center;
}

JavaScript

//  greatest common divisor
var gcd = function(a, b) {
	if ( ! b) {
  	return a;
  }
  return gcd(b, a % b);
}

addEventListener('keyup', function(){
	var numerator = document.querySelector(".fraction__input--numerator").value;
  var denominator = document.querySelector(".fraction__input--denominator").value;
  
  var a = gcd(numerator, denominator);
   
  numerator = numerator / a;
  denominator = denominator / a;
  
  document.querySelector(".fraction__display--numerator").innerHTML = numerator;
  document.querySelector(".fraction__display--denominator").innerHTML = denominator;
});