JSFiddle - React, Tailwind, and code Playground

by Andrew Poes

HTML

<!-- Euler Problem 2
/Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:

//1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

//By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms. -->

CSS

.print {
    position: relative;
    display: inline-block;
    background-color: black;
    color: white;
    font-family: Helvetica, Helvetica-Neue, sans-serif;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -1.5px;
    padding: 4px 8px;
}

body {
    background-color: #eeeeee;
}
}

JavaScript

$(document).ready(function() {
    var prev = [1];
    var evens = 0
    var lastFib = 0
	while (lastFib < 4000000) {
        var sum = prev.reduce(function(pv, cv) { return pv + cv; }, 0);
        prev.push(sum)
		if (prev.length > 2) {
            prev.shift();
        }
        if (sum%2==0) {
            evens += sum;
        }
        lastFib = sum
    }
    print(str(evens))
})

function str(num) {
    return num.toString()
}

function print() {
    var args = Array.prototype.slice.apply(arguments)
    var str = ""
    for (arg of args) {
        str += arg + ", "
    }
    str = str.substring(0, str.length - 2)
    var el = newel(str)
    $("body").append(el)
    $("body").append("</br>")
}

function newel(str) {
    var el = document.createElement("div")
    $(el).html(str)
    $(el).addClass("print")
    return el
}