Part A of the Unit 2 Project

Write a function that will calculate the sum of the first 12 even Fibonacci numbers

by Angela Baruth

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="" id="sumFibResult"></span>
      <br>

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    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;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.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...

JavaScript

/********************************************************************
  *
  * Fourth problem: 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 12 even Fibonacci numbers
  */

var myFibs = [0, 1]; // seed my array
var tracker= 1; // I already have one even, i.e. '0' is in myFibs array
var sum = 0; // the total that'll be returned

 function twelveEvenFibonacciSum(){
 /// WRITE YOUR CODE HERE
	console.clear();

	    // outer for loop to set the next iteration of the numbers
	    // tracker will be incremented only when an even number encountered
	    for (var i= 2, j = 0; tracker <= 12 ; j++, i++) {
	        // assign the next element of myFibs array
	        // to the summ of the previous two, e.g 1 = 1 + 0 , 2 = 1 + 1 etc...
	        myFibs[i] = myFibs[i-1] + myFibs[i-2];    
	        
	        // use modulus to sift the even numbers 
	        // and add only those numbers for a sum 
	        // use the j variable to start from the beginning of myFibs array
	        if (myFibs[j]%2 == 0)
	        {
	           // add the array element to the sum
	           sum +=  myFibs[j];

	           // console output for testing/confirmation
			   console.log("Tracker "+tracker+ ", next even Fibonacci number: "+ myFibs[j].toLocaleString()+" the sum is "+sum);
	           
	           // increment tracker
	           tracker++;
	        }
	    }

	// console output for testing/confirmation
	console.log(myFibs);
	console.log("There...