<div class="container">
  <div class="container__elements">
    <div>
      <h1 class="header text">Fibonacci</h1>
      <h1 class="number text"></h1>
      <button class="button">Next Number in Sequence</button>    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Ubuntu:500&display=swap');

$background: #ebf5fc;
$primary-color: #F2F7FB;
$key-corner: #E9F2FB;
$shadow-color: #D9E3EC;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:100vh;
  background: $background;
  
  &__elements {
    // display: flex;
    // justify-content: center;
  }
}

.header {
  font-size: 100px;
}

.header, .number {
  margin-bottom: 35px;
  text-align: center;
}

.number {
  font-size: 70px;
}

.text {
  background: -webkit-linear-gradient(245deg, #1E71F5, #3CDEE7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button {
  font-size: 15px;
  width: 100%;
  padding: 20px;
  cursor: pointer;
  background: linear-gradient(145deg, $primary-color, $key-corner);
  box-shadow:  5px 5px 15px $shadow-color;
  border: none;
  border-radius: 10px;
  outline: none;
}

const button = document.querySelector('.button');
const displayHeader = document.querySelector('.number');

function *fibonacci(seed1, seed2) {
  while(true) {
    yield (() => {
      seed2 = seed2 + seed1;
      seed1 = seed2 - seed1;
      return seed2;
    })();
  }
}

const fibonacciNum = fibonacci(0, 1);
// Set the initial value
displayHeader.innerHTML = fibonacciNum.next().value;


button.addEventListener('click', (el) => {
  // every time we click the button, we want to get the next value in the sequence
  displayHeader.innerHTML = fibonacciNum.next().value;
})