JS Calculator (freeCodeCamp project)

In this example below you will see how to do a JS Calculator (freeCodeCamp project) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by idkw2wh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright idkw2wh ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JS Calculator (freeCodeCamp project)</title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	
	<div class="row">
		<div class="output" id="expression"></div>
		<div class="output" id="result"></div>
	</div>
	<div class="row">
		<button type="button" class="operation key" id="clear">C</button>
		<button type="button" class="operation key" id="delete">DEL</button>
		<button type="button" class="operation key number" id="decimal">.</button>
		<button type="button" value="/" class="operation key operator" id="divide">&#247;</button>
	</div>
	<div class="row">
		<button type="button" class="number key" id="seven">7</button>
		<button type="button" class="number key" id="eight">8</button>
		<button type="button" class="number key" id="nine">9</button>
		<button type="button" value="*" class="operation key operator" id="multiply">&#215;</button>
	</div>
	<div class="row">
		<button type="button" class="number key" id="four">4</button>
		<button type="button" class="number key" id="five">5</button>
		<button type="button" class="number key" id="six">6</button>
		<button type="button" class="operation key operator" id="subtract">-</button>	
	</div>		
	<div class="row">
		<button type="button" class="number key" id="one">1</button>
		<button type="button" class="number key" id="two">2</button>
		<button type="button" class="number key" id="three">3</button>
		<button type="button" class="operation key operator" id="add">+</button>
	</div>
	<div class="row">
		<button type="button" class="number key" id="zero">0</button>
		<button type="button" class="operation key" id="equal">=</button>
	</div>
	
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/idkw2wh/js-calculator-freecodecamp-project-EXEXjy */
* {
	box-sizing: border-box;
}

::-webkit-scrollbar {
      width: 100%;
      height: 10px;
} 
::-webkit-scrollbar-track {
	background-color: rgba(255,68,87, 0.5);
}

::-webkit-scrollbar-thumb {
	background-color: #FF4457;
}

body {
	background-color: #808080;
}

.container {
	background-color: #808080;
	margin: auto;
	margin-top: 20px;
	width: 320px;
	height: 500px;
	font-size: 30px;
	box-shadow: 5px 5px 10px #474747;
}

.output {
	background-color: #909090;
	margin: auto;
	height: 50px;
	width: 320px;
	text-align: right;
	padding: 10px 10px;
	color: #FFF;
	overflow-y: hidden;
	overflow-x: auto;
}

.output:last-child {
	border-top: 1px solid #A0A0A0;
}

.key {
	background-color: #909090;
	width: 80px;
	height: 80px;
	float: left;
	font-size: 25px;
	color: #FFF;
	border: none;
	outline: none;
}

.key:hover {
	background-color: #707070;
	font-weight: bold;
	font-size: 28px;
}

.key:active {
	border: 1px solid #A0A0A0;
	font-size: 25px;
}

.operation {
	background-color: #7D7D7D;
}

#zero {
	width: 160px;
}

#equal {
	width: 160px;
	background-color: #FF4457;
}

#equal:hover {
	background-color: #FF2A3F;
}

#equal:active {
	border: 1px solid #FF7785;
}


/*Downloaded from https://www.codeseek.co/idkw2wh/js-calculator-freecodecamp-project-EXEXjy */
var numbers = document.querySelectorAll(".number"),
	operators = document.querySelectorAll(".operator"),
	clear = document.getElementById("clear"),
	back = document.getElementById("delete"),
	equation = document.getElementById("equal"),
	display = document.getElementById("expression"),
	showResult = document.getElementById("result"),
	displayed = false;

for (var i = 0; i < numbers.length; i++) {
	var number = numbers[i];
	number.addEventListener("click", function(e) {
		pressNumber(e.target.textContent);
	});
}

for (var i = 0; i < operators.length; i++) {
	var operator = operators[i];
	operator.addEventListener("click", function(e) {
		operation(e.target.textContent);
	});
}

clear.addEventListener("click", function(e) {
	display.innerHTML = "";
	showResult.innerHTML = "";
});

back.addEventListener("click", function(e) {
	display.innerHTML = display.innerHTML.slice(0, -1);
});

equation.addEventListener("click", result);

function pressNumber(num) {
	var getDisplay = display.innerHTML;
	var lastChar = getDisplay[getDisplay.length - 1];

	if (displayed === false) {
		display.innerHTML += num;
	} else if (displayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
		displayed = false;
		display.innerHTML += num;
	} else {
		displayed = false;
		display.innerHTML = "";
		display.innerHTML += num;
	}
	// console.log(num);
}

function operation(op) {
	var getDisplay = display.innerHTML;
	var lastChar = getDisplay[getDisplay.length - 1];

	 if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
		display.innerHTML = getDisplay.substring(0, getDisplay.length - 1) + op;
	} else if (getDisplay.length == 0) {
		console.log("Enter a number first");
	} else {
		display.innerHTML += op;
	}
	// console.log(op);
}

function result() {
	var getDisplay = display.innerHTML;
	var lastChar = getDisplay[getDisplay.length - 1];

	if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
		display.innerHTML = display.innerHTML.slice(0, -1);
	}

	var getExpression = display.innerHTML;
	var nums = getExpression.split(/\+|\-|\×|\÷/g);
	var ops = getExpression.replace(/[0-9]|\./g, "").split("");

	var divide = ops.indexOf("÷");
	while (divide != -1) {
		nums.splice(divide, 2, nums[divide] / nums[divide + 1]);
    	ops.splice(divide, 1);
    	divide = ops.indexOf("÷");
	}

	var multiply = ops.indexOf("×");
  	while (multiply != -1) {
    	nums.splice(multiply, 2, nums[multiply] * nums[multiply + 1]);
    	ops.splice(multiply, 1);
    	multiply = ops.indexOf("×");
    }

    var subtract = ops.indexOf("-");
  	while (subtract != -1) {
    	nums.splice(subtract, 2, (nums[subtract] * 10 - nums[subtract + 1] * 10) / 10);
    	ops.splice(subtract, 1);
    	subtract = ops.indexOf("-");
    }

  	var add = ops.indexOf("+");
  	while (add != -1) {
    	nums.splice(add, 2, parseFloat(nums[add]) + parseFloat(nums[add + 1]));
    	ops.splice(add, 1);
    	add = ops.indexOf("+");
  	}

  	showResult.innerHTML = nums[0];
  	displayed = true;
}

Comments