JSFiddle - React, Tailwind, and code Playground

by Philippe Xantus

HTML

<h4>4. Write a function that will calculate the sum of the first 12 even
        Fibonacci numbers</h4>
      <p>Recall that the Fibonacci sequence is a series that begins with two
        integers: 0, 1. The next number in the sequence is derived by adding the
        previous two numbers, so the Fibonacci sequence looks like this: 0, 1,
        1, 2, 3, 5, 8, 13, 21, 34, ...&nbsp;</p>
      <p>The button below will run your function, called twelveEvenFibonacciSum()
        and print its result in the space provided. All you have to do is write
        the function, which accepts no arguments, and returns the sum of the
        first 12 even Fibonacci numbers. Your code will go in
        js/hw2TwelveEvenFib.js&nbsp;</p>
      <p>Hint: First you'll need a loop that generates Fibonacci numbers. You'll
        need a way to test each one for whether it's even or odd. And you'll
        need to sum up the even ones, counting them as you go.  Count zero as the
        first even number in the sequence.  </p>
      <div id="sumFib" class="hwbutton">Get the Sum!</div>
      <br>
      The sum of the first 12 even Fibonacci numbers is: <span class="container" id="sumFibResult"></span>
      <br>
      <br>

CSS

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid #eda933;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:65px;
	width:131px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cd8a15;
}
.hwbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
	background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
	background-color:#d29105;
	cursor: hand;
	cursor: pointer;
}.hwbutton:active {
	position:relative;
	top:1px;
}

JavaScript

/********************************************************************
  *
  * Sum of first 12 even Fibonacci numbers
  *
  ********************************************************************/
// first we get the HTML for the button
var getFibSum = document.getElementById("sumFib");

//then we set the event handler for when the button is clicked
getFibSum.onclick = function(){
               document.getElementById("sumFibResult").innerHTML = twelveEvenFibonacciSum();
 }

 /*
  *  twelveEvenFibonacciSum - calulates the sum of the first 12 even fibonacci numbers, with 0, 1 being the first two numbers of the sequence
  *
  *@returns {integer} The sum of the first fifty even Fibonacci numbers
  */

    function twelveEvenFibonacciSum(){
     /// WRITE YOUR CODE HERE
        // Loop that generates Fibonacci numbers. 
        console.clear();
      var fib = []; //Initialize array!

fib[0] = 0;
fib[1] = 1;
var sumFib=0;
for (var i = 2; i <= 12; i++) {
    // Next fibonacci number = previous + one before previous
    // Translated to JavaScript:
    fib[i] = fib[i - 1] + fib[i - 2];
    console.log(fib[i]);
    if (fib[i] % i == 1) {
      var sumFibResult= sumFib += fib[i];
        console.log(sumFibResult);
      
    }
 return twelveEvenFibonacciSum();
}
       
       //console.log(fib);
      // return sumFibResult;
 }