boris/phpstorm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

backup

Browse Source
This commit is contained in:
boris
2025-02-06 12:28:24 +00:00
parent 2238305d65
commit f30a8fe711
133 changed files with 1262 additions and 8255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
js_workshop6/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

54
js_workshop6/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-Calc</title>
<link href="favicon.ico" rel="icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
</head>
<body class="d-flex bg-secondary-subtle justify-content-center">
<div class="p-0 container border rounded bg-white">
<div id="titlebox" class="w-100">
<h1 class="text-center mb-0 py-4 bg-dark-subtle shadow-sm">JS-Calc</h1>
</div>
<br>
<div class="row mb-4 justify-content-center">
<div class="col-md-8 d-flex flex-column gap-2">
<div class="form-group form-floating shadow-sm">
<input class="form-control" id='num1' type="text">
<label for="num1">Number 1</label>
</div>
<div class="form-group form-floating shadow-sm">
<select class="form-select" id="operator">
<option selected value="add">Add (+)</option>
<option value="minus">Minus (-)</option>
<option value="mult">Mult (x)</option>
<option value="div">Div (÷)</option>
</select>
<label for="operator">Operator</label>
</div>
<div class="form-group form-floating shadow-sm">
<input class="form-control" id='num2' type="text">
<label for="num2">Number 2</label>
</div>
<div class="form-group form-floating shadow-sm align-self-center">
<button class="btn btn-primary" id="calculate">Calculate</button>
</div>
<div class="form-group form-floating shadow-sm">
<input disabled class="form-control" id="result">
<label for="result">Result</label>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
<script src="index.js" defer></script>
</body>
<footer class="bg-dark-subtle fixed-bottom">
<div class="d-flex flex-row justify-content-center pt-3">
<p>Made by George Wilkinson @ 2025. Powered by Bootstrap and JS.</p>
</div>
</footer>
</html>

40
js_workshop6/index.js Normal file
View File

@@ -0,0 +1,40 @@
// Creates the Calculator Object
function Calculator() {
this.number1 = 0;
this.number2 = 0;
this.op = 'add';
this.add = function() { return this.number1 + this.number2; }
this.minus = function() { return this.number1 - this.number2; }
this.multiply = function() { return this.number1 * this.number2; }
this.divide = function() { return this.number1 / this.number2; }
this.Calculate = function getResult() {
if (this.op === 'add') return this.add();
if (this.op === "mult") return this.multiply();
if (this.op === "minus") return this.minus();
if (this.op === "div") return this.divide()
}
}
// Create Event Listener for button
document.getElementById('calculate').addEventListener('click', getResult, false);
// Instantiate Calculator
let calculator = new Calculator();
// Validates input and sets disabled input box to result
function getResult() {
// handler function for the calcButton
if (document.getElementById("num1").value === "") {
// show error or make a page element show the error
alert("Enter some values")
return;
}
// Give object variables values.
calculator.number1 = parseFloat(document.getElementById("num1").value);
calculator.number2 = parseFloat(document.getElementById("num2").value);
calculator.op = document.getElementById("operator").value;
// This is pretty cool, + typecasts to Number, I multiply by 100, then divide by 100,
// while avoiding rounding errors!
document.getElementById('result').value = +(Math.round(calculator.Calculate() + "e+2") + "e-2");
}

7
js_workshop6/styles.css Normal file
View File

@@ -0,0 +1,7 @@
.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20% !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}