backup
This commit is contained in:
boris
BIN
js_workshop7/favicon.ico
Normal file
BIN
js_workshop7/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
52
js_workshop7/index.html
Normal file
52
js_workshop7/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
<div class="row m-3 justify-content-center">
|
||||
<div class="calculator p-3 border bg-secondary rounded-3">
|
||||
<div class="form-group form-floating">
|
||||
<input disabled class="form-control" type="text" value="0" id="result">
|
||||
<label for="result">Result</label>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="btn is-clear span-2 btn-danger operator">C</button>
|
||||
<button class="btn btn-warning operator">←</button>
|
||||
<button class="btn btn-primary operator">÷</button>
|
||||
<button class="btn bg-white">7</button>
|
||||
<button class="btn bg-white">8</button>
|
||||
<button class="btn bg-white">9</button>
|
||||
<button class="btn btn-primary operator">x</button>
|
||||
<button class="btn bg-white">4</button>
|
||||
<button class="btn bg-white">5</button>
|
||||
<button class="btn bg-white">6</button>
|
||||
<button class="btn btn-primary">-</button>
|
||||
<button class="btn bg-white">1</button>
|
||||
<button class="btn bg-white">2</button>
|
||||
<button class="btn bg-white">3</button>
|
||||
<button class="btn btn-primary operator">+</button>
|
||||
<button class="btn bg-white span-3">0</button>
|
||||
<button class="btn btn-success operator">=</button>
|
||||
</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>
|
||||
108
js_workshop7/index.js
Normal file
108
js_workshop7/index.js
Normal file
@@ -0,0 +1,108 @@
|
||||
// Creates the Calculator Object
|
||||
function Calculator() {
|
||||
// Set current and buffer values to 0
|
||||
this.current = 0;
|
||||
this.buffer = "0";
|
||||
// Set previous operator to null
|
||||
this.previousOperator = null;
|
||||
// When button is clicked, if not a number, buffer an operator
|
||||
// if a number, buffer the operand.
|
||||
this.buttonClicked = ( value ) => {
|
||||
if (isNaN(parseInt(value))) {
|
||||
calculator.bufferOperator(value);
|
||||
} else {
|
||||
calculator.bufferOperand(value);
|
||||
}
|
||||
// Push to value
|
||||
this.renderResult();
|
||||
}
|
||||
// Function to buffer an operator given a value
|
||||
this.bufferOperator = (value) =>
|
||||
{
|
||||
switch( value ) {
|
||||
// If the value is Clear, reset all values to default.
|
||||
case "C":
|
||||
this.buffer = "0";
|
||||
this.current = 0;
|
||||
this.previousOperator = null;
|
||||
break;
|
||||
// If the value is equals, set previous operator to null,
|
||||
// flush the operation using the typecasted buffer, and set
|
||||
// buffer to the current value in order to continue operations.
|
||||
// Finally set current value and previous operator to default.
|
||||
case "=":
|
||||
if( this.previousOperator === null ) {
|
||||
return;
|
||||
}
|
||||
this.flushOperation( parseInt( this.buffer ));
|
||||
this.buffer = "" + this.current;
|
||||
this.previousOperator = null;
|
||||
this.current = 0;
|
||||
break;
|
||||
// If value is backspace, delete the last digit in the buffer.
|
||||
case "←":
|
||||
if( this.buffer.length === 1 ) {
|
||||
this.buffer = 0;
|
||||
}
|
||||
else {
|
||||
this.buffer = this.buffer.substring( 0, this.buffer.length - 1 );
|
||||
}
|
||||
break;
|
||||
default:
|
||||
this.calculate( value );
|
||||
}
|
||||
}
|
||||
// Adds operand, given a value, to the buffer.
|
||||
this.bufferOperand = ( value ) =>
|
||||
{
|
||||
if( this.buffer === "0" )
|
||||
{
|
||||
this.buffer = value;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.buffer += value;
|
||||
}
|
||||
}
|
||||
// Performs operator functions depending on which operator was clicked.
|
||||
// Given a tempBuffer, perform the corresponding operation to the current value.
|
||||
this.flushOperation = ( tempBuffer ) => {
|
||||
if( this.previousOperator === "+" ) { this.current += tempBuffer}
|
||||
else if( this.previousOperator === "-" ) { this.current -= tempBuffer}
|
||||
else if( this.previousOperator === "x" ) { this.current *= tempBuffer}
|
||||
else { this.current /= tempBuffer}
|
||||
}
|
||||
// Given a value, create a temporary buffer equal to current buffer,
|
||||
// perform the corresponding operation, and reset operator and buffer to
|
||||
// default values.
|
||||
this.calculate = ( value ) => {
|
||||
const tempBuffer = parseInt( this.buffer );
|
||||
if ( this.current === 0 ) {
|
||||
this.current = tempBuffer;
|
||||
}
|
||||
else {
|
||||
this.flushOperation(tempBuffer)
|
||||
}
|
||||
this.previousOperator = value;
|
||||
this.buffer = "0";
|
||||
}
|
||||
// Exclusively called when a button is clicked, display a value
|
||||
// rounded to 4 decimal places in the result box.
|
||||
this.renderResult = () => {
|
||||
// Note: this is the proper way to round to decimal places. Math.round( ( x * 100 ) / 100 )
|
||||
// will almost always give rounding errors
|
||||
result.value = +(Math.round(this.buffer + 'e+4') + 'e-4');
|
||||
}
|
||||
}
|
||||
|
||||
// Instantiate Calculator
|
||||
let calculator = new Calculator();
|
||||
|
||||
// Create constant for result display HTML object
|
||||
const result = document.querySelector("#result");
|
||||
|
||||
// Create Event Listener for button
|
||||
document.querySelector( '.buttons' ).addEventListener( 'click', function( event ) {
|
||||
// Pass the value of the HTML button to the buttonClicked() function.
|
||||
calculator.buttonClicked( event.target.innerHTML );
|
||||
});
|
||||
45
js_workshop7/styles.css
Normal file
45
js_workshop7/styles.css
Normal file
@@ -0,0 +1,45 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 320px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.calculator{
|
||||
max-width:320px;
|
||||
}
|
||||
.buttons{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
border:0;
|
||||
}
|
||||
#result {
|
||||
font-family: 'Monospaced', monospace ;
|
||||
background: black;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
border:0;
|
||||
padding: 0.3em;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size:1em;
|
||||
height: 65px;
|
||||
border:1px solid black;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.span-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
Reference in New Issue
Block a user