2211482
/
PRV-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit.

testBranch
s.eser 2024-04-26 16:57:08 +02:00
commit 0d2a519299
3 changed files with 317 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
calculator.html 100644
View File

@ -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>

175
calculator.js 100644
View File

@ -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;
}

100
calculatorStyle.css 100644
View File

@ -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;
}