Initial commit.
commit
0d2a519299
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Calculator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="calculator">
|
||||||
|
<input id="display" readonly>
|
||||||
|
|
||||||
|
<div id="buttons">
|
||||||
|
<button class="lightGrey" onclick="clearDisplay()">AC</button>
|
||||||
|
<button class="lightGrey" onclick="changeKeySignature()">+/-</button>
|
||||||
|
<button class="lightGrey" onclick="getPercentage()">%</button>
|
||||||
|
<button class="orange" id="division" onclick="setOperator('/')">/</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('7')">7</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('8')">8</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('9')">9</button>
|
||||||
|
<button class="orange" id="multiplication" onclick="setOperator('*')">x</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('4')">4</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('5')">5</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('6')">6</button>
|
||||||
|
<button class="orange" id="minus" onclick="setOperator('-')">-</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('1')">1</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('2')">2</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('3')">3</button>
|
||||||
|
<button class="orange" id="plus" onclick="setOperator('+')">+</button>
|
||||||
|
<button class="darkGreyBig" onclick="appendToDisplay('0')">0</button>
|
||||||
|
<button class="darkGrey" onclick="appendToDisplay('.')">,</button>
|
||||||
|
<button class="orange" onclick="calculate()">=</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="calculator.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="calculatorStyle.css">
|
||||||
|
</html>
|
|
@ -0,0 +1,175 @@
|
||||||
|
let operator;
|
||||||
|
let operatorSelected = false;
|
||||||
|
let displayMem;
|
||||||
|
let equalsPerformed = false;
|
||||||
|
let fresh = true;
|
||||||
|
|
||||||
|
const display = document.getElementById("display");
|
||||||
|
const operatorDivision = document.getElementById("division");
|
||||||
|
const operatorMultiplication = document.getElementById("multiplication");
|
||||||
|
const operatorMinus = document.getElementById("minus");
|
||||||
|
const operatorPlus = document.getElementById("plus");
|
||||||
|
|
||||||
|
|
||||||
|
function appendToDisplay(input){
|
||||||
|
|
||||||
|
if(operatorSelected){
|
||||||
|
if(operator == '+'){
|
||||||
|
operatorPlus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorPlus.style.color = "white";
|
||||||
|
/*operatorPlus.addEventListener('mouseover', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#feb84e";});
|
||||||
|
operatorPlus.addEventListener('mouseleave', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#ff9f0a";});*/
|
||||||
|
}else if(operator == '-'){
|
||||||
|
operatorMinus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMinus.style.color = "white";
|
||||||
|
/*operatorMinus.addEventListener('mouseover', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#feb84e";});
|
||||||
|
operatorMinus.addEventListener('mouseleave', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#ff9f0a";});*/
|
||||||
|
}else if(operator == '*'){
|
||||||
|
operatorMultiplication.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMultiplication.style.color = "white";
|
||||||
|
/*operatorMultiplication.addEventListener('mouseover', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#feb84e";});
|
||||||
|
operatorMultiplication.addEventListener('mouseleave', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#ff9f0a";});*/
|
||||||
|
}else if(operator == '/'){
|
||||||
|
operatorDivision.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorDivision.style.color = "white";
|
||||||
|
/*operatorDivision.addEventListener('mouseover', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#feb84e";});
|
||||||
|
operatorDivision.addEventListener('mouseleave', function(e) {
|
||||||
|
e.target.style.backgroundColor = "#ff9f0a";});*/
|
||||||
|
}
|
||||||
|
|
||||||
|
displayMem = display.value;
|
||||||
|
display.value = "";
|
||||||
|
operatorSelected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
display.value += input;
|
||||||
|
equalsPerformed = false;
|
||||||
|
fresh=false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function setOperator(input){
|
||||||
|
|
||||||
|
if(operatorSelected){
|
||||||
|
|
||||||
|
operatorPlus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorPlus.style.color = "white";
|
||||||
|
|
||||||
|
operatorMinus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMinus.style.color = "white";
|
||||||
|
|
||||||
|
operatorMultiplication.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMultiplication.style.color = "white";
|
||||||
|
|
||||||
|
operatorDivision.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorDivision.style.color = "white";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!fresh){
|
||||||
|
if(input == '+'){
|
||||||
|
operatorPlus.style.backgroundColor = "white";
|
||||||
|
operatorPlus.style.color = "#ff9f0a";
|
||||||
|
}else if(input == '-'){
|
||||||
|
operatorMinus.style.backgroundColor = "white";
|
||||||
|
operatorMinus.style.color = "#ff9f0a";
|
||||||
|
}else if(input == '*'){
|
||||||
|
operatorMultiplication.style.backgroundColor = "white";
|
||||||
|
operatorMultiplication.style.color = "#ff9f0a";
|
||||||
|
}else if(input == '/'){
|
||||||
|
operatorDivision.style.backgroundColor = "white";
|
||||||
|
operatorDivision.style.color = "#ff9f0a";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(displayMem != null && !operatorSelected && !equalsPerformed){
|
||||||
|
if(operator == '+'){
|
||||||
|
display.value = Number(displayMem) + Number(display.value);
|
||||||
|
}else if(operator == '-'){
|
||||||
|
display.value = Number(displayMem) - Number(display.value);
|
||||||
|
}else if(operator == '*'){
|
||||||
|
display.value = Number(displayMem) * Number(display.value);
|
||||||
|
}else if(operator == '/'){
|
||||||
|
display.value = Number(displayMem) / Number(display.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
equalsPerformed = false;
|
||||||
|
|
||||||
|
if(display.value != ""){
|
||||||
|
operator = input;
|
||||||
|
operatorSelected = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPercentage(){
|
||||||
|
|
||||||
|
if(display.value != ""){
|
||||||
|
display.value = Number(display.value)/100;
|
||||||
|
equalsPerformed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearDisplay(){
|
||||||
|
|
||||||
|
|
||||||
|
operatorPlus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorPlus.style.color = "white";
|
||||||
|
|
||||||
|
operatorMinus.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMinus.style.color = "white";
|
||||||
|
|
||||||
|
operatorMultiplication.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorMultiplication.style.color = "white";
|
||||||
|
|
||||||
|
operatorDivision.style.backgroundColor = "#ff9f0a";
|
||||||
|
operatorDivision.style.color = "white";
|
||||||
|
|
||||||
|
|
||||||
|
operatorSelected = false;
|
||||||
|
operator = "";
|
||||||
|
display.value = "";
|
||||||
|
displayMem = "";
|
||||||
|
equalsPerformed = false;
|
||||||
|
fresh = true;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeKeySignature(){
|
||||||
|
|
||||||
|
if(display.value != ""){
|
||||||
|
display.value = -1 * Number(display.value);
|
||||||
|
equalsPerformed = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculate(){
|
||||||
|
|
||||||
|
if(displayMem != null && !operatorSelected){
|
||||||
|
if(operator == '+'){
|
||||||
|
display.value = Number(displayMem) + Number(display.value);
|
||||||
|
}else if(operator == '-'){
|
||||||
|
display.value = Number(displayMem) - Number(display.value);
|
||||||
|
}else if(operator == '*'){
|
||||||
|
display.value = Number(displayMem) * Number(display.value);
|
||||||
|
}else if(operator == '/'){
|
||||||
|
display.value = Number(displayMem) / Number(display.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
operatorSelected = false;
|
||||||
|
equalsPerformed = true;
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,100 @@
|
||||||
|
#calculator{
|
||||||
|
|
||||||
|
font-family:Verdana;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: 50px;
|
||||||
|
max-width: 415px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#display{
|
||||||
|
|
||||||
|
width: 390px;
|
||||||
|
height: 130px;
|
||||||
|
font-size: 4em;
|
||||||
|
text-align: right;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
overflow-x: scroll;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons{
|
||||||
|
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
padding: 25px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkGrey{
|
||||||
|
|
||||||
|
background-color: #333333; ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkGrey:hover{
|
||||||
|
|
||||||
|
background-color: #575757; ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.darkGreyBig{
|
||||||
|
|
||||||
|
background-color: #333333;
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
width: 175px;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 32px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkGreyBig:hover{
|
||||||
|
|
||||||
|
background-color: #575757; ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightGrey{
|
||||||
|
|
||||||
|
background-color: #a5a5a5;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightGrey:hover{
|
||||||
|
|
||||||
|
background-color: #c6c6c6;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange{
|
||||||
|
|
||||||
|
background-color: #ff9f0a;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange:hover{
|
||||||
|
|
||||||
|
background-color: #feb84e;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50px;
|
||||||
|
border: none;
|
||||||
|
background-color: gray;
|
||||||
|
color: white;
|
||||||
|
font-size: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue