Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tintintani
Tintintani committed Aug 5, 2021
0 parents commit 8577978
Show file tree
Hide file tree
Showing 3 changed files with 293 additions and 0 deletions.
41 changes: 41 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Calculator</title>
<script type="text/javascript" src="script.js" defer></script>
</head>
<body onload="AC()">
<div id="grid">
<div id="output">
<div id="outputTopLine">Calculator</div>
<div id="outputBottomLine"></div>
</div>
<input type="button" value="AC" onclick="AC()" />
<input type="button" value="C" onclick="clearOperand()" />
<input class="button" type="button" value="%" onclick="setOperator(this)" />
<input class="operator" type="button" value="÷" onclick="setOperator(this)" />
<input class="number" type="button" value="7" onclick="getNumber(this)" />
<input class="number" type="button" value="8" onclick="getNumber(this)" />
<input class="number" type="button" value="9" onclick="getNumber(this)" />
<input class="operator" type="button" value="×" onclick="setOperator(this)" />
<input class="number" type="button" value="4" onclick="getNumber(this)" />
<input class="number" type="button" value="5" onclick="getNumber(this)" />
<input class="number" type="button" value="6" onclick="getNumber(this)" />
<input class="operator" type="button" value="-" onclick="setOperator(this)" />
<input class="number" type="button" value="1" onclick="getNumber(this)" />
<input class="number" type="button" value="2" onclick="getNumber(this)" />
<input class="number" type="button" value="3" onclick="getNumber(this)" />
<input class="operator" type="button" value="+" onclick="setOperator(this)" />
<div class="elongatedButtonContainer" style="grid-column: 1/3">
<input class="elongatedButton" type="button" value="0" onclick="getNumber(this)" />
</div>

<input type="button" value="." onclick="addDecimal(this)" />
<input id="equalsign" type="button" value="=" onclick="equals()" />
</div>
</body>
</html>
165 changes: 165 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
const calculator = {
result: null,
firstOperand: null,
secondOperand: null,
operator: null,
};

getNumber = (num) => {
if (equaled) text = "";
if (calculatorReset) {
document.getElementById("outputTopLine").style.textAlign = "right";
document.getElementById("outputTopLine").innerHTML = null;
document.getElementById("outputBottomLine").innerHTML = null;
text = "";
calculatorReset = false;
}

equaled = false;

text += num.value;
Operand += num.value;
document.getElementById("outputTopLine").innerHTML = text;
secondOperandTurn
? ((calculator.secondOperand = parseFloat(Operand)), (operatorPlaced = false))
: (calculator.firstOperand = parseFloat(Operand));
console.log(calculator.firstOperand + "," + calculator.secondOperand);
console.log("text = " + text);
operatorTurn = true;
check();
};

setOperator = (op) => {
if ((op.value == "-" && calculatorReset) || operatorTurn) {
if (equaled) equaled = false;
if (operatorPlaced) {
text = text.toString().substring(0, text.length - 1);
console.log("text = " + text);
}

if (text == "") {
text += Operand = "-";
document.getElementById("outputTopLine").style.textAlign = "right";
document.getElementById("outputTopLine").innerHTML = text;
calculatorReset = false;
console.log(text + "sign");
return;
}

text += op.value;
calculator.operator = op.value;
document.getElementById("outputTopLine").innerHTML = text;
console.log("text = " + text);
secondOperandTurn = true;
Operand = "";
operatorPlaced = true;
}
shiftOperand();
};

check = () => {
if (calculator.firstOperand != null && calculator.secondOperand != null) {
calculator.result = evaluate();
document.getElementById("outputBottomLine").innerHTML = evaluate();
secondOperandTurn = true;
console.log("check");
}
};

shiftOperand = () => {
decimalPlaced = false;
if (calculator.firstOperand != null && calculator.secondOperand != null) {
calculator.secondOperand = null;
document.getElementById("outputBottomLine").innerHTML = calculator.firstOperand = calculator.result;
Operand = "";
console.log("shiftOperand");
}
};

evaluate = () => {
if (!equaled) {
equaled = false;
const { firstOperand, secondOperand, operator } = calculator;
switch (operator) {
case "+":
return firstOperand + secondOperand;
case "-":
return firstOperand - secondOperand;
case "×":
return firstOperand * secondOperand;
case "÷":
return firstOperand / secondOperand;
case "%":
return (firstOperand * secondOperand) / 100;
}
}
};

equals = () => {
if (!equaled) {
Operand = "";
document.getElementById("outputTopLine").innerHTML = text = calculator.firstOperand = evaluate();
document.getElementById("outputBottomLine").innerHTML = null;
secondOperandTurn = false;
decimalPlaced = false;
operatorTurn = true;
operatorPlaced = false;
calculator.secondOperand = null;
equaled = true;
console.log("=");
}
};

AC = () => {
(Operand = ""), (text = "");
document.getElementById("outputTopLine").innerHTML = "Calculator";
document.getElementById("outputTopLine").style.textAlign = "left";
document.getElementById("outputBottomLine").innerHTML = null;
secondOperandTurn = false;
decimalPlaced = false;
calculatorReset = true;
operatorTurn = false;
operatorPlaced = false;
calculator.firstOperand = calculator.secondOperand = null;
console.log("AC");
equaled = false;
};

addDecimal = (decimal) => {
if (!decimalPlaced) {
text += decimal.value;
Operand += decimal.value;
document.getElementById("outputTopLine").innerHTML = text;
decimalPlaced = true;
}
};

clearOperand = () => {
if (calculator.secondOperand == null && operatorPlaced == false) {
if (text.length <= 1) AC();
else {
text = Number(text)
.toString()
.substring(0, text.length - 1);
Operand = Operand.substring(0, Operand.length - 1);
calculator.firstOperand = parseFloat(Operand);
document.getElementById("outputTopLine").innerHTML = text;
console.log("First Operand " + Operand);
check();
return;
}
} else if (Operand.length > 1) {
text = text.toString().substring(0, text.length - 1);
Operand = Operand.substring(0, Operand.length - 1);
calculator.secondOperand = parseFloat(Operand);
document.getElementById("outputTopLine").innerHTML = text;
check();
console.log("Second Operand " + Operand);
} else if (Operand.length == 1) {
Operand = "";
calculator.secondOperand = null;
text = text.toString().substring(0, text.length - 1);
document.getElementById("outputTopLine").innerHTML = text;
console.log("Second Operand " + Operand);
}
};
87 changes: 87 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
body {
height : 100vh;
margin:0px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(
90deg,
rgb(102, 102, 102),
rgb(54, 54, 54)
);
}

#grid {
color: white;
background: #121212;
display: grid;
width: 350px;
height: 500px;
grid-template-rows: 25% auto auto auto auto;
grid-template-columns: 25% 25% 25%;
overflow-x: hidden;
}

#output {

grid-column: 1/5;
padding: 5px;
font-size: 2.25rem;
background-color: #2e2e2e;
}

#outputBottomLine {
overflow: hidden;
}

input {
font-family: sans-serif;
color: white;
background-color: transparent;
font-size: 2rem;
padding: 0px;
border: 0px;
border-radius: 50%;
margin: 5px 11px;
}

input:hover {
background: rgba(54, 54, 54, 0.75);
opacity: 0.75;
}

.operator {
border-radius: 50%;
background-color: #2e2e2e;
}

#equalsign {
background-color: #DC143C;
border-radius: 50%;
}


#outputTopLine{
text-align: left;
}

#outputBottomLine{
text-align : right;
}

.elongatedButton {
width: 43%;
height:100%;
margin: 0;
z-index: 1 ;
}

.elongatedButtonContainer{
text-align: center;
padding: 2px;
}

@media only screen and (max-width: 768px){

}

0 comments on commit 8577978

Please sign in to comment.