Scribd
Upload
3 views

DWM_Project_Report_Logistic regression (1)

The document is a mini project report for a scientific calculator developed by engineering students at Xavier Institute of Engineering. It includes acknowledgments, code snippets in HTML, PHP, CSS, and JavaScript for the calculator's functionality and design. The project aims to provide a functional calculator interface with basic arithmetic operations and user interactions.

Uploaded by

Hardik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

DWM_Project_Report_Logistic regression (1)

The document is a mini project report for a scientific calculator developed by engineering students at Xavier Institute of Engineering. It includes acknowledgments, code snippets in HTML, PHP, CSS, and JavaScript for the calculator's functionality and design. The project aims to provide a functional calculator interface with basic arithmetic operations and user interactions.

Uploaded by

Hardik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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="*">&CenterDot;</button>
<button value="/">&divide;</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

You might also like