Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSOC - CALCULATOR #46

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

CSOC - CALCULATOR #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
247a345
Add files via upload
AnantJain05 Jun 9, 2022
1dd0d56
Update index.html
AnantJain05 Jul 4, 2022
5131cfb
Update style.css
AnantJain05 Jul 4, 2022
93ae054
Update app.js
AnantJain05 Jul 4, 2022
2942655
Update storage.js
AnantJain05 Jul 4, 2022
c5b18f5
Update index.html
AnantJain05 Jul 4, 2022
43904af
Update app.js
AnantJain05 Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 256 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
let slidingOn = false;

function slide() {
if (!slidingOn){
document.querySelector(".slide-box").style.display = "flex";
document.querySelector(".outer").style.width = "730px";
document.querySelector(".outer").style.transitionDuration="1s";
document.querySelector(".inner").style.flexBasis = "52%";
document.querySelector(".arrow-text").innerHTML = "<\n<\n<\n";

slidingOn = true;
}
else{
document.querySelector(".slide-box").style.display = "none";
document.querySelector(".outer").style.width = "100%";
document.querySelector(".inner").style.flexBasis = "93%";
document.querySelector(".arrow-text").innerHTML = ">\n>\n>\n";
slidingOn = false;
}
}

const calculator = {
displayNumber: '0',
operator: null,
firstNumber: "",
secondNumber: "",
waitingForOperator: false,
waitingForFirstNumber: true,
waitingForSecondNumber: false
};

const k=0;

function updateDisplay() {
document.querySelector("#displayNumber").innerText = calculator.displayNumber;
}

function clearCalculator() {
calculator.displayNumber= '0',
calculator.operator= null,
calculator.firstNumber= "",
calculator.secondNumber= "",
calculator.waitingForOperator= false,
calculator.waitingForFirstNumber= true,
calculator.waitingForSecondNumber= false
}

function backspace(){
calculator.displayNumber = calculator.displayNumber.slice(0, calculator.displayNumber.length-1);
if (calculator.waitingForFirstNumber){
calculator.firstNumber = calculator.firstNumber.slice(0, calculator.firstNumber.length-1);
}
else if (calculator.secondNumber === ""){
calculator.operator= null;
calculator.waitingForSecondNumber = false;
calculator.waitingForFirstNumber=true;
}
else{
calculator.secondNumber = calculator.secondNumber.slice(0, calculator.secondNumber.length-1);
}

if (calculator.displayNumber === "")calculator.displayNumber = "0";
}

function inputDigit(digit) {
if(calculator.waitingForFirstNumber){
// calculator.waitingForFirstNumber=true;
if (calculator.firstNumber === "NaN" || calculator.firstNumber === "Infinity"){
calculator.firstNumber = digit;
calculator.displayNumber = "";
}
else calculator.firstNumber+=digit;
if (calculator.displayNumber==='0')calculator.displayNumber=digit
else calculator.displayNumber += digit
}
else if (calculator.waitingForSecondNumber){
calculator.waitingForSecondNumber=true;
calculator.secondNumber+=digit;
calculator.displayNumber+=digit;
}
}

function inverseNumber() {
if (calculator.displayNumber === '0') {
return;
}
calculator.displayNumber = calculator.displayNumber * -1;
}

function handleOperator(operator) {
if (!calculator.waitingForSecondNumber) {
calculator.waitingForFirstNumber=false;
calculator.operator = operator;
calculator.displayNumber += operator;
calculator.waitingForSecondNumber = true;
// calculator.firstNumber = calculator.displayNumber;
} else {
alert('Enter 2nd number first')
}
}

function performCalculation(unary) {

if(calculator.firstNumber==""){
alert("Enter the First Number");
return;
}
else if(calculator.operator==""){
alert("Enter the operator");
return;
}
else if(!unary && calculator.secondNumber==""){
alert("Enter the second Number");
return;
}


let result = 0;
if (calculator.operator === "+") {
result = parseFloat(calculator.firstNumber) + parseFloat(calculator.secondNumber);
}
if (calculator.operator === "-") {
result = parseFloat(calculator.firstNumber) - parseFloat(calculator.secondNumber)
}
if (calculator.operator === "*") {
result = parseFloat(calculator.firstNumber) * parseFloat(calculator.secondNumber)
}
if (calculator.operator === "/") {
result = parseFloat(calculator.firstNumber) / parseFloat(calculator.secondNumber)
}
if (calculator.operator == "%") {
result = parseFloat(calculator.firstNumber) % parseFloat(calculator.secondNumber)
}

if (calculator.operator === "^") {
result = Math.pow(parseFloat(calculator.firstNumber),parseFloat(calculator.secondNumber) )
}
if (calculator.operator === "1/x") {
result = 1/parseFloat(calculator.firstNumber)
}
if (calculator.operator === "sin") {
result = Math.sin(parseFloat(calculator.firstNumber))
}
if (calculator.operator === "cos") {
result = Math.cos(parseFloat(calculator.firstNumber))
}
if (calculator.operator === "tan") {
result = Math.tan(parseFloat(calculator.firstNumber))
}
if (calculator.operator === "log") {
result = Math.log10(parseFloat(calculator.firstNumber))
}
if (calculator.operator === "ln") {
result = Math.log(parseFloat(calculator.firstNumber))
}
if (calculator.operator === "sqrt") {
result = Math.sqrt(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "x^2") {
result = Math.pow(parseFloat(calculator.firstNumber),2)
}
if (calculator.operator == "|x|") {
result = Math.abs(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "sin^-1") {
result = Math.asin(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "cos^-1") {
result = Math.acos(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "tan^-1") {
result = Math.atan(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "e^x") {
result = Math.exp(parseFloat(calculator.firstNumber))
}
if (calculator.operator == "π"){
result = parseFloat(calculator.firstNumber)*Math.PI;
}

console.log(calculator.firstNumber, calculator.secondNumber, result);

result = result.toFixed(5);

const history = {
firstNumber: calculator.firstNumber,
secondNumber: calculator.secondNumber,
operator: calculator.operator,
result: result
}
putHistory(history);
calculator.displayNumber = result.toString();
calculator.firstNumber=calculator.displayNumber;
calculator.waitingForFirstNumber = true;
calculator.waitingForSecondNumber = false;
calculator.secondNumber = "";
renderHistory();
}

// document.querySelector(".backspace").addEventListener('click',()=>{
// return(calculator.displayNumber=calculator.displayNumber-digit);
// })

document.querySelector(".clear").addEventListener('click', function(event) {
clearCalculator();
updateDisplay();
})

document.querySelector(".negative").addEventListener('click', function(event) {
inverseNumber();
updateDisplay();
})

document.querySelector(".equals").addEventListener('click', function(event) {
performCalculation(false);
updateDisplay();
})

document.querySelector(".backspace").addEventListener('click', function(event) {
backspace();
updateDisplay();
})

document.querySelectorAll(".unary").forEach(element => {
element.addEventListener('click', function(event) {
calculator.operator = element.innerText;
performCalculation(true);
updateDisplay();
})
})

document.querySelectorAll(".number").forEach(element => {
element.addEventListener('click', function(event) {
inputDigit(event.target.innerText);
updateDisplay()

// console.log(event);
console.log(calculator.firstNumber);
console.log(calculator.secondNumber);
console.log(calculator.displayNumber);
console.log(calculator.operator);
})
});

document.querySelectorAll(".operator").forEach(element => {
element.addEventListener('click', function(event) {
calculator.operator=event.target.innerText
handleOperator(event.target.innerText);
updateDisplay()
console.log(calculator.firstNumber);
console.log(calculator.secondNumber);
console.log(calculator.displayNumber);
console.log(calculator.operator);
})
})

133 changes: 133 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Web Calculator</title>
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand heading" href="#">CALCULATOR</a>
<my-button class="navbar-toggler" type="my-button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</my-button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">SCIENTIFIC <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="https://matrixcalc.org/en/">MATRIX CALCULATOR</a>
<a class="nav-item nav-link" href="https://www.desmos.com/calculator">GRAPHING CALCULATOR</a>
<!-- <a class="nav-item nav-link disabled" href="#">Disabled</a> -->
</div>
</div>
</nav>

<div class="main1">
<div class="my-display">
<h1 id="displayNumber">0</h1>
</div>
<div class="outer">
<div class="inner">
<div class="my-row">
<div class="my-button operator">%</div>
<div class="my-button operator">/</div>
<div class="my-button operator">*</div>
<div class="my-button backspace">C</div>
<!-- <div class="my-button operator operator">sin</div> -->
</div>
<div class="my-row">
<div class="my-button number">7</div>
<div class="my-button number">8</div>
<div class="my-button number">9</div>
<div class="my-button negative">+/-</div>
<!-- <div class="my-button operator operator">sin</div> -->
</div>
<div class="my-row">
<div class="my-button number">4</div>
<div class="my-button number">5</div>
<div class="my-button number">6</div>
<div class="my-button operator">-</div>
</div>
<div class="my-row">
<div class="my-button number">1</div>
<div class="my-button number">2</div>
<div class="my-button number">3</div>
<div class="my-button operator">+</div>
</div>
<div class="my-row">
<div class="my-button clear">AC</div>
<div class="my-button number">0</div>
<div class="my-button number">.</div>
<div class="my-button equals">=</div>

</div>
</div>

<div class="slide-box">
<div class="my-row">
<div class="my-button unary">sin</div>
<div class="my-button unary">cos</div>
<div class="my-button unary">tan</div>
</div>
<div class="my-row">
<div class="large my-button unary">sin^-1</div>
<div class="large my-button unary">cos^-1</div>
<div class="large my-button unary">tan^-1</div>
</div>
<div class="my-row">
<div class="my-button unary">log</div>
<div class="my-button unary">ln</div>
<div class="my-button unary">e^x</div>
</div>
<div class="my-row">
<div class="my-button unary">sqrt</div>
<div class="my-button operator">^</div>
<div class="my-button unary">x^2</div>
</div>
<div class="my-row">
<div class="my-button unary">1/x</div>
<div class="my-button unary">π</div>
<div class="my-button unary">|x|</div>

</div>
</div>

<div class="arrow1" onclick="slide()">
<pre class="arrow-text">
>
>
>
</pre>
</div>
</div>
</div>

<div class="history">
<h2>History</h2>
<table>
<thead>
<tr>
<th style="font-family: 'Roboto Slab', serif;">First Num</th>
<th style="font-family: 'Roboto Slab', serif;">Operator</th>
<th style="font-family: 'Roboto Slab', serif;">Second Num</th>
<th style="font-family: 'Roboto Slab', serif;">Result</th>
</tr>
</thead>
<tbody id="historyList"></tbody>
</table>
</div>

<script src="app.js"></script>
<script src="storage.js"></script>
</body>
</html>
Loading