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