Golden Ratio Check

rendezvous with cassidoo issue #143 challenge

by Jesse Rogers

HTML

<div class="wrapper">
  <p style="opacity: 0.25">rendezvous with cassidoo issue #143 challenge</p>
  <div class="content">
    <h1>We Golden?</h1>
    <p>Enter two numbers to see if they follow the golden ratio.</p>
    <div class="input">
      <input type="number" id="inputX" placeholder="First number">
    </div>
    <div class="input">
      <input type="number" id="inputY" placeholder="Second number">
    </div>
    <div class="button">
      <button id="calculate">Check</button>
      <button id="reset">Reset</button>
    </div>
  </div>
  <div class="content is-hidden" id="result-wrap">
    <span id="result"></span>
  </div>
</div>

SCSS

html,
body {
  background: #eee;
  font-size: 24px;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
  font-family: monospace;
}

h1 {
  font-size: 1rem;
  margin-top: 0;
}

p {
  font-size: 0.5rem;
  margin-bottom: 1rem;
}

.wrapper {
  padding: 1.5rem;
}

.content {
  background: #fafafa;
  border-radius: 3px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0, 0.2);
  margin-bottom: 1rem;
  padding: 1rem;
}

.input {
  margin-bottom: 1rem;
  input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    display: block;
    width: 100%;
    -webkit-appearance: none;
    &:focus {
      outline: none;
    }
  }
}

button {
  background: #56CBF9;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.5rem;
  font-weight: bold;
  &#reset {
    background: #FF729F;
  }
  &:focus {
    outline: none;
  }
}

.is-hidden {
  display: none;
}

.has-error {
  color: #ed4e39;
}

JavaScript

/**
 * rendezvous with cassidoo issue #143
 * - Given two numbers X and Y, write a function to check that X and Y are in golden ratio.
 * @return: boolean
 * @param x: number
 * @param y: number
 */
function isGoldenRatio(x, y) {
	// type check arguments
	if (typeof x !== 'number') {
  	throw new Error('Expected number for [x] but received ' + typeof x);
  }
  if (typeof y !== 'number') {
  	throw new Error('Expected number for [y] but received ' + typeof y);
  }

	// calculate golden ratio
	const ratio = (1 + Math.sqrt(5)) / 2;
 
  // add numbers together
  const sum = x + y;
 
  // divide sum by ratio
  const reduction = Math.round(sum / ratio);
 
  // sum should equal one of the two arguments
  if (!(reduction === x || reduction === y)) {
  	return false;
  }
 
  // divide param [y] by golden ratio
  const yRatio = Math.round(y / ratio);
  // if reduced [y] is equal to [x], we're good
  if (yRatio === x) {
  	return true;
  }
 
  // check if user entered larger number first
  const xRatio = Math.round(x / ratio);
  // if reduced [x] is equal to [y], then we're golden
  if (xRatio === y) {
  	return true;
  }
 
  // no dice
  return false;
}

// UI stuff
const inputX = document.getElementById('inputX');
const inputY = document.getElementById('inputY');
const calculateButton = document.getElementById('calculate');
const resetButton = document.getElementById('reset');
const resultWrap = document.getElementById('result-wrap');
const resultText = document.getElementById('result');

// run check on button click
calculateButton.addEventListener('click', function(event) {
	event.stopPropagation();
  // show result UI
  resultWrap.classList.remove('is-hidden');
  // check for params
  const x = inputX.value;
  const y = inputY.value;
  // no x/y supplied
  if (!x || !y) {
  	resultText.innerHTML = 'Invalid parameters! Both numbers required.';
    resultText.classList.add('has-error');
    return;
  }
  // type check
  if (!isNaN(+x) && !isNaN(+y)) {
  	const result =...