final
This commit is contained in:
ak
commit
ee3ad076fa
4 changed files with 298 additions and 0 deletions
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# js-calculator
|
||||
|
||||
Simple calculator made in ES6 Javascript
|
||||
16
index.html
Normal file
16
index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel = "stylesheet" type = "text/css" href = "style.css">
|
||||
<title>Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<div id="container"></div>
|
||||
<script src="main.js"></script>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
218
main.js
Normal file
218
main.js
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
/* our beloved variables */
|
||||
let buffer = '';
|
||||
let operator = '';
|
||||
let workBuffer = '';
|
||||
let oldBackgroundColor = '';
|
||||
let buttonArray = [];
|
||||
const container = document.querySelector("#container");
|
||||
|
||||
/* make header */
|
||||
const header = document.createElement('h1');
|
||||
header.textContent = "Calculator";
|
||||
header.setAttribute('id', 'header');
|
||||
container.appendChild(header);
|
||||
/* make results div */
|
||||
const results = document.createElement('div');
|
||||
results.textContent = buffer;
|
||||
results.setAttribute ('id', 'results');
|
||||
container.appendChild(results);
|
||||
/* eye candy for buttons */
|
||||
function highlightCell() {
|
||||
oldBackgroundColor = this.style.backgroundColor;
|
||||
this.style.backgroundColor = 'darkgray';
|
||||
}
|
||||
function normalizeCell() {
|
||||
this.style.backgroundColor = oldBackgroundColor;
|
||||
}
|
||||
/* make grid */
|
||||
const theGrid = document.createElement('div');
|
||||
theGrid.setAttribute('id', 'theGrid');
|
||||
for (i = 0; i < 20; i++) {
|
||||
const button = document.createElement('div');
|
||||
button.addEventListener('mouseenter', highlightCell);
|
||||
button.addEventListener('mouseleave', normalizeCell);
|
||||
button.setAttribute('id', 'button'+i);
|
||||
theGrid.appendChild(button);
|
||||
buttonArray.push(button);
|
||||
}
|
||||
container.appendChild(theGrid);
|
||||
|
||||
/* ez pz refresh function */
|
||||
function refresh() {
|
||||
results.textContent = buffer;
|
||||
}
|
||||
|
||||
/* cheater function for below */
|
||||
function clear() {
|
||||
operator = '';
|
||||
workBuffer = '';
|
||||
refresh();
|
||||
}
|
||||
/* determine results */
|
||||
function resolve() {
|
||||
switch(operator) {
|
||||
case "/" :
|
||||
buffer = workBuffer / buffer;
|
||||
clear();
|
||||
break;
|
||||
case "*" :
|
||||
buffer = workBuffer * buffer;
|
||||
clear();
|
||||
break;
|
||||
case "+" :
|
||||
buffer = parseFloat(workBuffer) + parseFloat(buffer);
|
||||
clear();
|
||||
break;
|
||||
case "-" :
|
||||
buffer = workBuffer - buffer;
|
||||
clear();
|
||||
break;
|
||||
case "SQRT":
|
||||
buffer = Math.sqrt(parseFloat(buffer));
|
||||
clear();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* the actual calculator */
|
||||
function operate(string) {
|
||||
switch(string) {
|
||||
case "." :
|
||||
if ((buffer.includes(string)) === false) {
|
||||
buffer += string;
|
||||
refresh();
|
||||
}
|
||||
break;
|
||||
case "*" :
|
||||
case "/" :
|
||||
case "+" :
|
||||
case "-" :
|
||||
if (operator === '') {
|
||||
operator = string;
|
||||
workBuffer = buffer;
|
||||
buffer = '';
|
||||
}
|
||||
else {
|
||||
resolve();
|
||||
operator = string;
|
||||
workBuffer = buffer;
|
||||
buffer = '';
|
||||
}
|
||||
break;
|
||||
case "=" :
|
||||
resolve();
|
||||
break;
|
||||
case "DEL" :
|
||||
buffer = buffer.substring(0, buffer.length - 1);
|
||||
refresh();
|
||||
break;
|
||||
case "SQRT" :
|
||||
operator = string;
|
||||
resolve();
|
||||
break;
|
||||
case "CLR" :
|
||||
buffer = '';
|
||||
workBuffer = '';
|
||||
operator = '';
|
||||
refresh();
|
||||
break;
|
||||
case "NEG" :
|
||||
if (buffer.charAt(0) != "-") {
|
||||
buffer = "-" + buffer;
|
||||
refresh();
|
||||
}
|
||||
else {
|
||||
buffer = buffer.substring(1, buffer.length);
|
||||
refresh();
|
||||
}
|
||||
break;
|
||||
default :
|
||||
buffer += string;
|
||||
refresh();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* assign our buttons */
|
||||
const button0 = document.querySelector("#button0");
|
||||
button0.textContent = "SQRT";
|
||||
const button1 = document.querySelector("#button1");
|
||||
button1.textContent = "CLR";
|
||||
const button2 = document.querySelector("#button2");
|
||||
button2.textContent = "DEL";
|
||||
const button3 = document.querySelector("#button3");
|
||||
button3.textContent = "/";
|
||||
const button4 = document.querySelector("#button4");
|
||||
button4.textContent = "7";
|
||||
const button5 = document.querySelector("#button5");
|
||||
button5.textContent = "8";
|
||||
const button6 = document.querySelector("#button6");
|
||||
button6.textContent = "9";
|
||||
const button7 = document.querySelector("#button7");
|
||||
button7.textContent = "*";
|
||||
const button8 = document.querySelector("#button8");
|
||||
button8.textContent = "4";
|
||||
const button9 = document.querySelector("#button9");
|
||||
button9.textContent = "5";
|
||||
const button10 = document.querySelector("#button10");
|
||||
button10.textContent = "6";
|
||||
const button11 = document.querySelector("#button11");
|
||||
button11.textContent = "-";
|
||||
const button12 = document.querySelector("#button12");
|
||||
button12.textContent = "1";
|
||||
const button13 = document.querySelector("#button13");
|
||||
button13.textContent = "2";
|
||||
const button14 = document.querySelector("#button14");
|
||||
button14.textContent = "3";
|
||||
const button15 = document.querySelector("#button15");
|
||||
button15.textContent = "+";
|
||||
const button16 = document.querySelector("#button16");
|
||||
button16.textContent = "NEG";
|
||||
const button17 = document.querySelector("#button17");
|
||||
button17.textContent = "0";
|
||||
const button18 = document.querySelector("#button18");
|
||||
button18.textContent = ".";
|
||||
const button19 = document.querySelector("#button19");
|
||||
button19.textContent = "=";
|
||||
/* assign listeners to buttons */
|
||||
buttonArray.forEach (function (element) {
|
||||
element.addEventListener('click', function() {
|
||||
operate(element.textContent);
|
||||
})
|
||||
});
|
||||
/* same thing as above but for keypresses */
|
||||
function keyboardEntry(key) {
|
||||
switch (key) {
|
||||
case "Enter" :
|
||||
operate("=");
|
||||
break;
|
||||
case "Backspace" :
|
||||
operate("DEL");
|
||||
break;
|
||||
case "Delete" :
|
||||
operate("CLR");
|
||||
break;
|
||||
case "1" :
|
||||
case "2" :
|
||||
case "3" :
|
||||
case "4" :
|
||||
case "5" :
|
||||
case "6" :
|
||||
case "7" :
|
||||
case "8" :
|
||||
case "9" :
|
||||
case "0" :
|
||||
case "+" :
|
||||
case "-" :
|
||||
case "/" :
|
||||
case "*" :
|
||||
case "." :
|
||||
operate(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/* listen for keyboard presses */
|
||||
document.addEventListener("keydown", function(event) {
|
||||
event.preventDefault();
|
||||
keyboardEntry(event.key);
|
||||
});
|
||||
61
style.css
Normal file
61
style.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: rgb(35, 35, 35);
|
||||
font-family: Helvetica;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#header, #results {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header, #theGrid {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#results {
|
||||
width: 334px;
|
||||
font-family: monospace;
|
||||
font-size: 28px;
|
||||
text-align: left;
|
||||
font-weight: bolder;
|
||||
border: 2px solid white;
|
||||
height: 50px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#theGrid {
|
||||
display: grid;
|
||||
height: 350px;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
[id^="button"] {
|
||||
border-width: 1px;
|
||||
color: white;
|
||||
border: 1px solid rgb(35, 35, 35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#button0, #button1, #button2, #button3, #button7, #button11, #button15 {
|
||||
background-color: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
#button4, #button5, #button6, #button8, #button9, #button10, #button12, #button13, #button14, #button16, #button17, #button18 {
|
||||
background-color: rgb(7, 7, 7);
|
||||
}
|
||||
|
||||
#button19 {
|
||||
background-color: rgb(51, 50, 49);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue