This page is set aside for experiments with GSites formatting and content.
1) The header above shows how to restrict the size of the header, as compared with the standard small banner setting, and still retain a background image.
2) The box below shows the result of embedding HTML code directly into the website to produce something useful. You can also edit the HTML code using the editing tool at any time after embedding - remember to save the changes, though....
For any HTML enthusiast out there (or anyone interested in how the internet actually works !) here is the HTML code which encodes for and runs the calculator. You'll see remarks enclosed in /slashes/ which help explain what each section of the code is doing.
------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
/* Style for the entire body, centering the calculator */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Style for the calculator container */
.calculator {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Style for the display area */
.display {
width: 160px;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 1.5em;
padding: 5px;
}
/* Grid layout for the calculator buttons */
.buttons {
display: grid;
grid-template-columns: repeat(4, 40px);
gap: 10px;
}
/* Style for the buttons */
.buttons button {
width: 40px;
height: 40px;
font-size: 1.2em;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
}
/* Hover effect for the buttons */
.buttons button:hover {
background-color: #45a049;
}
/* Special style for the equals button */
.buttons .equals {
grid-column: span 2; /* Spans over 2 columns */
background-color: #2196F3;
}
/* Hover effect for the equals button */
.buttons .equals:hover {
background-color: #0b7dda;
}
</style>
</head>
</header>
<p>Simple Calculator</p>
<p> - </p>
<p> VW 12.1.26</p>
<p> - </p>
<p> Rudimentary...but it works!</p>
<body>
<div class="calculator">
<!-- Input field to display the calculator results -->
<input type="text" class="display" id="display" disabled>
<!-- Calculator buttons laid out in a grid -->
<div class="buttons">
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperator('-')">-</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperator('*')">*</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="clearDisplay()">C</button>
<button onclick="setOperator('/')">/</button>
<button onclick="calculate()" class="equals">=</button>
</div>
</div>
<script>
/* Variables to store current input, previous input, and operator */
let currentInput = '';
let operator = '';
let previousInput = '';
/* Function to append numbers to the current input */
function appendNumber(number) {
currentInput += number; // Append the clicked number to current input
document.getElementById('display').value = currentInput; // Update the display
}
/* Function to set the operator and prepare for the next input */
function setOperator(op) {
operator = op; // Store the chosen operator
previousInput = currentInput; // Store the current input as previous
currentInput = ''; // Clear the current input for the next number
}
/* Function to perform the calculation based on the operator */
function calculate() {
let result;
// Perform the appropriate operation based on the operator
if (operator === '+') {
result = parseFloat(previousInput) + parseFloat(currentInput);
} else if (operator === '-') {
result = parseFloat(previousInput) - parseFloat(currentInput);
} else if (operator === '*') {
result = parseFloat(previousInput) * parseFloat(currentInput);
} else if (operator === '/') {
result = parseFloat(previousInput) / parseFloat(currentInput);
}
document.getElementById('display').value = result; // Display the result
currentInput = result.toString(); // Store the result as the new current input
operator = ''; // Reset the operator
}
/* Function to clear the display and reset the calculator */
function clearDisplay() {
currentInput = '';
previousInput = '';
operator = '';
document.getElementById('display').value = ''; // Clear the display
}
</script>
</body>
</html>
3. This section tests the results of embedding a single excel file. This particular workbook allows you to assess low or no standing charge tariffs to see whether you would be better off switching..... might be useful when the suppliers finally decide to comply with OFGEM's ruling.....
No SC Tariff Calculator.xlsx