Scientific Calculator
IP Mini Project Report
BACHELOR OF ENGINEERING
COMPUTER ENGINEERING
By
Name Roll Number
Chirag Jawle 202101026
Sam Saji 202101052
Hardik Tiwari 202101061
Krish Parmar 202101041
Department of Computer
Engineering,
Xavier Institute of Engineering,
Mahim, Mumbai - 400 016,
University of
Mumbai
(AY 2023 - 24)
Acknowledgments
It gives us great pleasure to express our profound gratitude to Prof. Sayali
Mane, Department of Computer Science and Engineering for her constructive
academic advice and guidance, constant encouragement, valuable suggestions,
and all other support throughout this project work. We would like to appreciate
all those who inspired to help us work on this project and make it successful.
We would like to thank all the team members for their cooperation and
support to create this project successfully.
I would like to thank my fellow students who engaged in insightful discussions
shared their ideas and offered their valuable feedback Your input enhanced the
quality of this research.
I acknowledge Xavier Institute of Engineering for providing the academic
environment, resources, and facilities that enabled the successful completion of
this mini project.
Code:
HTML and PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHPmyCalculator</title>
<link rel="stylesheet" href="rr.css">
<script src="hhh.js" defer></script>
</head>
<!--
TODO: Implement the logic for the calculator using the form
- The logic of the calculator need to be implemented in php
- Can add a final 0 + at the start of the total operation
- Implement the logic to assign the value to total and calculate the "equal"
- Implement the logic to calculate
- Check to use the title to display the value or another element, using the input only for the new value
-->
<body>
<header>
<h1>
<?php
if (isset($_POST["operation"])) {
$operation = $_POST["operation"];
eval("echo $operation;");
} else {echo "PHPmyCalculator";}
?>
</h1>
</header>
<main>
<section>
<form name="calculate" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<input type="number" name="number" id="value" value="0" min="<?php
echo PHP_INT_MIN; ?>"
max="<?php echo PHP_INT_MAX; ?>" step="1" pattern="\d{1}"
required>
<input type="hidden" name="operator"
value="<?php echo isset($_POST["operator"])?
$_POST["operator"]:"+"?>">
<input type="hidden" name="operation" value="<?php
if (isset($_POST["calculate"]) && $_POST["calculate"] == "true") echo
"0";
else echo isset($_POST["operation"])? $_POST["operation"]:"0";
?>">
<input type="hidden" name="calculate" value="false">
<button type="submit">=</button>
</form>
</section>
<aside>
<div>
<button value="+">+</button>
<button value="-">-</button>
<button value="*">·</button>
<button value="/">÷</button>
</div>
<div>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
</div>
<div>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
</div>
<div>
<button value="9">9</button>
<button value="0">0</button>
<button value=".">,</button>
<button value="clear">C</button>
</div>
</aside>
</main>
</body>
</html>
CSS:
:root {
--main: #3F0071;
--second: #FB2576;
--third: #332FD0;
--contrast: #0002A1;
}
/* * {outline: solid red;} */
body {
overflow: hidden;
width: 100vw;
height: 100vh;
background-color: var(--main);
display: grid;
justify-items: center;
align-items: flex-start;
margin: unset;
}
header {
align-self: center;
}
h1 {
color: var(--main);
font-weight: 500;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--second);
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
width: auto;
margin: 3vh 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
column-gap: 2vmax;
}
input[type="number"] {
transition-property: background-color, color, border-color;
transition-duration: 500ms;
width: 25vmin;
height: 6vmin;
background-color: var(--second);
color: var(--main);
border-radius: 2em;
border-style: solid;
border-color: var(--contrast);
border-width: .25em;
font-size: 2em;
text-align: start;
padding: .25em 1em;
}
input[type="number"]:hover,
input[type="number"]:focus {
background-color: var(--main);
color: var(--second);
border-color: var(--second);
outline: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
form > button {
background-color: var(--second);
color: var(--main);
border-color: var(--contrast);
}
form > button:hover {
background-color: var(--main);
color: var(--second);
border-color: var(--second);
}
div {
margin: 1.5vh 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
column-gap: 2vmax;
}
aside {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
transition-property: scale, color, border-color, border-width;
transition-duration: 250ms;
aspect-ratio: 1/1;
width: 10vmin;
scale: 1;
background-color: var(--contrast);
color: var(--second);
border-radius: 50%;
border-style: solid;
border-width: .25em;
border-color: var(--third);
font-size: 2em;
text-align: center;
}
button:hover,
button:active {
color: var(--second);
border-width: .3em;
border-color: var(--second);
}
button:hover {
scale: 1.25;
}
button:active {
scale: .75;
}
JavaScript:
const buttons = Array.from(document.querySelectorAll("div > button"))
const numericButtons = buttons.filter(button => button.innerText.match(/\d/g))
const operatorsButtons = buttons.filter(button => button.innerText.match(/\+|\-|·|÷/g))
const decimalButton = buttons.filter(button => button.innerText == ",")[0]
const clearButton = buttons.filter(button => button.innerText == "C")[0]
const numberInput = document.querySelector("input[name=\"number\"]")
const operatorInput = document.querySelector("input[name=\"operator\"]")
const operationInput = document.querySelector("input[name=\"operation\"]")
const calculateInput = document.querySelector("input[name=\"calculate\"]")
const submitButton = document.querySelector("button[type=\"submit\"]")
const form = document.querySelector("form[name=\"calculate\"]")
let nextDecimal = false
operatorsButtons.forEach(
operators => operators.addEventListener(
"mouseup",
() => {
operationInput.value += operatorInput.value + numberInput.value
operatorInput.value = operators.value
form.submit()
}
)
)
numericButtons.forEach(
number => number.addEventListener(
"mouseup",
() => {
const numberValue = number.value
if (nextDecimal) numberInput.value += ".".concat(numberValue)
else if (numberInput.value === "0") numberInput.value = numberValue
else numberInput.value += numberValue
nextDecimal = false
limitInput()
}
)
)
decimalButton.addEventListener(
"mouseup",
() => nextDecimal = numberInput.value.includes(".")? false:true
)
clearButton.addEventListener(
"mouseup",
() => numberInput.value = "0"
)
numberInput.addEventListener("input", limitInput)
numberInput.addEventListener("change", limitInput)
submitButton.addEventListener(
"mousedown",
() => {
operationInput.value += operatorInput.value + numberInput.value
calculateInput.value = "true"
form.submit()
}
)
function limitInput() {
if (numberInput.value.length > 13) numberInput.value = numberInput.value.slice(0, 13)
}
5. Frontend
