# fCC Calculator

## In this example below you will see how to do a fCC Calculator with some HTML / CSS and JavascriptCalculator for freeCodeCamp

This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io

#### Technologies

• HTML
• CSS
• JavaScript
``````<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">
<title>fCC Calculator</title>

<body>

<div class="container center-align">
<div class="row output">
<div class="col s12 m12 l12">
<h1 class="white-text blue flow-text outputText card">fCC Calculator</h1>
</div>
</div>
<div class="row">
<div class="col s6 m6 l6">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="pwr">
<canvas id="icon0" width="50" height="50"></canvas>
</a>
</div>
<div class="col s6 m6 l6">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="eq">
<canvas id="icon1" width="50" height="50"></canvas>
</a>
</div>
</div>
<div class="row">
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="seven">
<span class="number btn-large red white-text waves-effect waves-light">7</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="eight">
<span class="number btn-large red white-text waves-effect waves-light">8</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="nine">
<span class="number btn-large red white-text waves-effect waves-light">9</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="add">
<canvas id="icon2" width="50" height="50"></canvas>
</a>
</div>
</div>
<div class="row">
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="four">
<span class="number btn-large red white-text waves-effect waves-light">4</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="five">
<span class="number btn-large red white-text waves-effect waves-light">5</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="six">
<span class="number btn-large red white-text waves-effect waves-light">6</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="subtract">
<canvas id="icon3" width="50" height="50"></canvas>
</a>
</div>
</div>
<div class="row">
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="one">
<span class="number btn-large red white-text waves-effect waves-light">1</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="two">
<span class="number btn-large red white-text waves-effect waves-light">2</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="three">
<span class="number btn-large red white-text waves-effect waves-light">3</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="multiply">
<canvas id="icon4" width="50" height="50"></canvas>
</a>
</div>
</div>
<div class="row">
<div class="col s6 m6 l6">
<a href="#" class="flow-text" id="zero">
<span class="number btn-large red white-text waves-effect waves-light">0</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="flow-text" id="decimal">
<span class="number btn-large red white-text waves-effect waves-light">.</span>
</a>
</div>
<div class="col s3 m3 l3">
<a href="#" class="btn-large white ctrlBtn waves-effect waves-red" id="divide">
<canvas id="icon5" width="50" height="50"></canvas>
</a>
</div>
</div>
</div>
</main>

<footer>
<div class="center-align">
title="Flaticon">www.flaticon.com</a> is
target="_blank">CC 3.0 BY</a></small>
</div>
</footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>

<script  src="js/index.js"></script>

</body>

</html>
``````
``````
/* github: https://github.com/r3b311i0n/fCC_Calculator */

body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

main {
flex: 1 0 auto;
}

span {
width: 100%;
}

.ctrlBtn {
width: 100%;
}

.number {
font-size: 2em;
}

.output {
}

.outputText {
font-size: 4em;
}
``````
``````
var total = 0;
var clearCheck = false;

function main() {
}

for (let i = 0; i < 6; ++i) {
let canvas = document.getElementById("icon" + i);
let context = canvas.getContext("2d");
let img = new Image();

context.drawImage(this, 0, 0, canvas.width, canvas.height);
};

switch (i) {
case 0:
img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTM1LjMxLDUuMDQyYy0wLjUzMi0wLjE1NS0xLjA4NSwwLjE1LTEuMjQsMC42OHMwLjE0OSwxLjA4NSwwLjY4LDEuMjRDNDQuOTA2LDkuOTMyLDUyLDE5LjQwNSw1MiwzMCAgIGMwLDEzLjIzMy0xMC43NjcsMjQtMjQsMjRTNCw0My4yMzMsNCwzMEM0LDE5LjM5MiwxMS4xMDUsOS45MTUsMjEuMjc5LDYuOTUzYzAuNTMtMC4xNTQsMC44MzUtMC43MDksMC42ODEtMS4yMzkgICBjLTAuMTUzLTAuNTMtMC43MDgtMC44MzktMS4yMzktMC42ODFDOS42OTgsOC4yNDEsMiwxOC41MDgsMiwzMGMwLDE0LjMzNywxMS42NjMsMjYsMjYsMjZzMjYtMTEuNjYzLDI2LTI2ICAgQzU0LDE4LjUyMiw0Ni4zMTQsOC4yNiwzNS4zMSw1LjA0MnoiIGZpbGw9IiNEODAwMjciLz4KCTxwYXRoIGQ9Ik0yOCwyN2MwLjU1MywwLDEtMC40NDcsMS0xVjFjMC0wLjU1My0wLjQ0Ny0xLTEtMXMtMSwwLjQ0Ny0xLDF2MjVDMjcsMjYuNTUzLDI3LjQ0NywyNywyOCwyN3oiIGZpbGw9IiNEODAwMjciLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K";
break;
case 1:
break;
case 2:
img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyIDQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MiA0MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+Cjxwb2x5Z29uIHBvaW50cz0iNDIsMjAgMjIsMjAgMjIsMCAyMCwwIDIwLDIwIDAsMjAgMCwyMiAyMCwyMiAyMCw0MiAyMiw0MiAyMiwyMiA0MiwyMiAiIGZpbGw9IiNEODAwMjciLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
break;
case 3:
break;
case 4:
break;
case 5:
img.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyIDQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MiA0MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHJlY3QgeT0iMjAiIHdpZHRoPSI0MiIgaGVpZ2h0PSIyIiBmaWxsPSIjRDgwMDI3Ii8+Cgk8cGF0aCBkPSJNMjEsMTNjMi43NTcsMCw1LTIuMjQzLDUtNXMtMi4yNDMtNS01LTVzLTUsMi4yNDMtNSw1UzE4LjI0MywxMywyMSwxM3ogTTIxLDVjMS42NTQsMCwzLDEuMzQ2LDMsM3MtMS4zNDYsMy0zLDMgICBzLTMtMS4zNDYtMy0zUzE5LjM0Niw1LDIxLDV6IiBmaWxsPSIjRDgwMDI3Ii8+Cgk8cGF0aCBkPSJNMjEsMjljLTIuNzU3LDAtNSwyLjI0My01LDVzMi4yNDMsNSw1LDVzNS0yLjI0Myw1LTVTMjMuNzU3LDI5LDIxLDI5eiBNMjEsMzdjLTEuNjU0LDAtMy0xLjM0Ni0zLTNzMS4zNDYtMywzLTMgICBzMywxLjM0NiwzLDNTMjIuNjU0LDM3LDIxLDM3eiIgZmlsbD0iI0Q4MDAyNyIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=";
}
}
}

function appendOperator() {
clearCheck = false;

switch (this.id) {
//noinspection JSJQueryEfficiency
if (/\s/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
\$(".outputText").html(\$(".outputText").html().slice(0, length - 2) + "+ ");
}
else if (/\d/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + " + ");
}
break;
case "subtract":
//noinspection JSJQueryEfficiency
if (/\s/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
\$(".outputText").html(\$(".outputText").html().slice(0, length - 2) + "- ");
}
//noinspection JSJQueryEfficiency
else if (/\d/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + " - ");
}
break;
case "multiply":
//noinspection JSJQueryEfficiency
if (/\s/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
\$(".outputText").html(\$(".outputText").html().slice(0, length - 2) + "* ");
}
//noinspection JSJQueryEfficiency
else if (/\d/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + " * ");
}
break;
case "divide":
//noinspection JSJQueryEfficiency
if (/\s/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
\$(".outputText").html(\$(".outputText").html().slice(0, length - 2) + "/ ");
}
//noinspection JSJQueryEfficiency
else if (/\d/.test(\$(".outputText").html().slice(-1))) {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + " / ");
}
break;
}
}

function enterNumber() {
if (clearCheck === true) {
\$(".outputText").html("");
}
clearCheck = false;

switch (this.id) {
case "zero":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("0");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "0");
}
break;
case "one":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("1");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "1");
}
break;
case "two":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("2");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "2");
}
break;
case "three":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("3");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "3");
}
break;
case "four":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("4");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "4");
}
break;
case "five":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("5");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "5");
}
break;
case "six":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("6");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "6");
}
break;
case "seven":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("7");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "7");
}
break;
case "eight":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("8");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "8");
}
break;
case "nine":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html("9");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + "9");
}
break;
case "decimal":
//noinspection JSJQueryEfficiency
if (\$(".outputText").html() === "0" || \$(".outputText").html() == "fCC Calculator") {
\$(".outputText").html(".");
}
else {
//noinspection JSJQueryEfficiency
let expr = \$(".outputText").html();
//noinspection JSJQueryEfficiency
\$(".outputText").html(expr + ".");
}
break;
}
}

\$("#zero").on("click", enterNumber);

\$("#one").on("click", enterNumber);

\$("#two").on("click", enterNumber);

\$("#three").on("click", enterNumber);

\$("#four").on("click", enterNumber);

\$("#five").on("click", enterNumber);

\$("#six").on("click", enterNumber);

\$("#seven").on("click", enterNumber);

\$("#eight").on("click", enterNumber);

\$("#nine").on("click", enterNumber);

\$("#decimal").on("click", enterNumber);

\$("#subtract").on("click", appendOperator);

\$("#multiply").on("click", appendOperator);

\$("#divide").on("click", appendOperator);

\$("#eq").on("click", function () {
//noinspection JSJQueryEfficiency
total = eval(\$(".outputText").html());
//noinspection JSJQueryEfficiency
\$(".outputText").html(total);

clearCheck = true;
});

\$("#pwr").on("click", function () {
\$(".outputText").html("0");
});