Calculator

commit 0d2a5192992458dc9ddd2f2d3ee6591418ec6b2a Author: s.eser Date: Fri Apr 26 16:57:08 2024 +0200 Initial commit. diff --git a/calculator.html b/calculator.html new file mode 100644 index 0000000..4768770 --- /dev/null +++ b/calculator.html @@ -0,0 +1,42 @@ + + + + + + Calculator + + + +

+ + +

+ + + + + + + + + + + + + + + + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/calculator.js b/calculator.js new file mode 100644 index 0000000..8eb9272 --- /dev/null +++ b/calculator.js @@ -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; + +} \ No newline at end of file diff --git a/calculatorStyle.css b/calculatorStyle.css new file mode 100644 index 0000000..85e1ea6 --- /dev/null +++ b/calculatorStyle.css @@ -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; + +}