Fibonacci Sequence in JavaScript

index.html

<div class="wrapper">
  <div class="description">
    <h2>Fibonacci Number Formula</h2>
    <p>The Fibonacci numbers are generated by setting <code>F0=0</code>, <code>F1=1</code>, and then using the recursive formula
      <code class="formula">Fn = Fn-1 + Fn-2</code> to get the rest. Thus the sequence begins: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... This sequence of Fibonacci numbers arises all over mathematics and also in nature.</p>
  </div>
  <div class="input-container">
    <input type="text" placeholder="Enter your number" class="input-text" id="number">
  </div>

  <button id="button">FiboNacci</button>
  <div class="result-wrapper">

  </div>
</div>

script.js

var result = [];

  result[0] = 0;
  result[1] = 1;

  $('#button').click(function(){
    let getValue = $('#number').val();
    $('.result-wrapper').empty();
    // Calculating Fibonacci Series
    for(var i = 2; i <= getValue; i++) {
      result[i] = result[i - 1] + result[i - 2];
    }
    // Render the list/sequence
    for(var i = 0; i <= getValue; i++){
      $('.result-wrapper').append('<p>'+result[i]+'</p>')
    }
  })
// To Calculate the sum of fibnocci sequence:
// function fibonacci(n){
//   if(n <= 1)
//      return n;
//   return fibonacci(n-1) + fibonacci(n-2);
// }

// $('#button').click(function(){
//   $('.result-wrapper').append("<p>" + fibonacci($('#number').val()) + "</p>");
// });

style.css

:root {
  font-family: "Roboto";
}

.wrapper {
  max-width: 600px;
  width: 100%;
  margin: 150px auto 0;
  text-align: center;
}

.input-container {
  text-align: center;
  overflow: hidden;
}

.input-text {
  width: 40%;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 5px;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  border: none;
  border-bottom: 3px solid #45a247;
  border-radius: 0;
  display: inline-block;
  vertical-align: top;
}

.input-text:focus,
.input-text:active {
  outline: none;
}

#button {
  padding: 15px 10px;
  border: none;
  border-radius: 3px;
  background: #283c86; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to bottom,
    #45a247,
    #283c86
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to bottom,
    #45a247,
    #283c86
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.result-wrapper {
  background: transparent;
  color: #4e4e4e;
  line-height: 64px;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: wrap;
  -ms-flex: wrap;
  flex: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.result-wrapper p {
  float: left;
  height: 64px;
  background: #e7e7e7;
  margin: 15px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  -webkit-animation: fadeIn 0.4s ease-in-out;
  animation: fadeIn 0.4s ease-in-out;
  border-radius: 5px;
}

.description {
  text-align: left;
}

h2 {
  text-align: center;
  text-decoration: underline;
}

.formula {
  text-align: center;
  display: block;
  padding: 15px;
  margin: 10px 0;
  background: #e6e6e6;
}