A Simple calculator (Updated version)
A simple calculator created in HTML
HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="iconT.png" type="image/png">
<title>Calculus.net</title>
<style>
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image: linear-gradient(to right, #de73b7, #a273de, #73acde);
color: #333;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
overflow-x: hidden;
animation: backgroundFade 30s ease-in-out infinite; /* Smoother gradient animation */
}
/* Keyframes for smoother background gradient animation */
@keyframes backgroundFade {
0% {
background-image: linear-gradient(to right, #de73b7, #a273de, #73acde);
}
20% {
background-image: linear-gradient(to right, #a273de, #73acde, #de73b7);
}
40% {
background-image: linear-gradient(to right, #73acde, #de73b7, #a273de);
}
60% {
background-image: linear-gradient(to right, #de73b7, #a273de, #73acde);
}
80% {
background-image: linear-gradient(to right, #a273de, #73acde, #de73b7);
}
100% {
background-image: linear-gradient(to right, #73acde, #de73b7, #a273de);
}
}
/* Container for header information */
.header-container {
border: 2px solid #ccc;
width: 90%;
max-width: 1200px;
padding: 20px;
margin: 20px 0;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
text-align: center;
animation: fadeIn 2s ease-out;
}
.header-container h2 {
text-decoration: underline 3px teal;
margin-bottom: 10px;
animation: slideInDown 1s ease-out;
}
.header-container a {
color: #0066cc;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.header-container a:hover {
color: #004499;
text-decoration: underline;
}
/* Main Content Styles */
main {
width: 90%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
animation: fadeInUp 1.5s ease-out;
}
main h1, main h3 {
text-align: center;
animation: fadeIn 2s ease-out;
}
main h1 {
text-decoration: underline 3px coral dotted;
margin-bottom: 10px;
animation: pulse 2s infinite;
}
main h3 {
margin-bottom: 15px;
}
main p {
padding: 10px;
border: 1.75px solid #c6de73;
background-color: #c295f0;
border-radius: 12px 0;
font-size: 1em;
animation: fadeIn 2s ease-out;
}
/* Input Fields */
.input-group {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px 0;
animation: fadeIn 2s ease-out;
}
.input-group input[type="number"] {
width: 80%;
max-width: 300px;
padding: 10px;
margin: 5px 0;
border: 3px solid #ecaeae;
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.input-group input[type="number"]:focus {
border-color: #73acde;
transform: scale(1.02);
outline: none;
box-shadow: 0 0 10px rgba(115, 172, 222, 0.5);
}
/* Operator Checkboxes */
.operators {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 15px 0;
animation: fadeIn 2s ease-out;
}
.inputOperator {
display: flex;
align-items: center;
transition: transform 0.3s ease;
}
.inputOperator input[type="checkbox"] {
margin-right: 5px;
transform: scale(1.2);
cursor: pointer;
transition: transform 0.3s ease;
}
.inputOperator input[type="checkbox"]:hover {
transform: scale(1.4);
}
/* Buttons */
.button-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin: 20px 0;
animation: fadeIn 2s ease-out;
}
button {
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button#viewResultBtn {
background-color: #000;
color: ivory;
}
button#viewResultBtn:hover {
background-color: #333;
transform: translateY(-2px);
}
button#saveButton {
display: none;
background-color: #4CAF50;
color: white;
}
button#saveButton:hover {
background-color: #45a049;
transform: translateY(-2px);
}
button#saveNoteButton {
background-color: green;
color: ivory;
}
button#saveNoteButton:hover {
background-color: darkgreen;
transform: translateY(-2px);
}
/* Output Section */
#output {
padding: 10px;
font-size: 1.2em;
text-align: center;
border-radius: 15px;
margin-top: 10px;
background-color: #f0f8ff;
opacity: 0;
transition: opacity 0.5s ease, border 0.5s ease;
}
/* When output is visible */
#output.visible {
opacity: 1;
}
/* Error and Success States */
#output.error {
border: 3px solid red;
}
#output.success {
border: 3px solid green;
}
/* Saved Operations and Notes */
.saved-operation, .saved-note {
border: 1px solid #ddd;
background-color: #f9f9f9;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
animation: fadeIn 1s ease-out;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.delete-btn:hover {
background-color: darkred;
transform: scale(1.1);
}
/* Saved Operations and Notes Containers */
#savedOperations, #savedNotes {
width: 100%;
max-width: 600px;
margin: 10px auto;
animation: fadeIn 2s ease-out;
}
/* Notes Section */
.notes-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
animation: fadeIn 2s ease-out;
}
.notes-container textarea {
width: 100%;
max-width: 600px;
height: 100px;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
resize: vertical;
font-size: 1em;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.notes-container textarea:focus {
border-color: #73acde;
box-shadow: 0 0 10px rgba(115, 172, 222, 0.5);
outline: none;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Responsive Design */
@media (max-width: 768px) {
.header-container, main {
width: 95%;
}
.input-group input[type="number"], .notes-container textarea {
width: 100%;
max-width: none;
}
.button-group {
width: 100%;
}
.operators {
gap: 10px;
}
button#saveButton, button#saveNoteButton {
width: 100%;
max-width: 300px;
margin: 0;
}
.notes-container textarea {
width: 100%;
}
}
@media (max-width: 480px) {
.operators {
flex-direction: column;
align-items: center;
}
.inputOperator {
width: 100%;
justify-content: center;
}
button#saveButton, button#saveNoteButton {
width: 80%;
}
.header-container h2, .header-container h5 {
font-size: 1.2em;
}
main h1 {
font-size: 1.5em;
}
main h3, main p {
font-size: 1em;
}
#output {
font-size: 1em;
}
}
</style>
</head>
<body>
<!-- Header Section -->
<div class="header-container">
<h2>
A Creation by <strong>@</strong>Trojan Virus # eelldi44y882y8h
</h2>
<div>
<a href="https://onecompiler.com/users/42rtb5uyq" target="_blank">View Profile</a>
</div>
<br>
<h5>
Other creations/Posts by Trojan Virus # eelldi44y882y8h:
<a href="https://onecompiler.com/posts/42sdg8a54/prime-number-checker" target="_blank">Prime number checker</a>
</h5>
</div>
<!-- Main Content -->
<main>
<h1>Welcome to Calculus.net</h1>
<h3>Basic Calculator</h3>
<p>
The calculator you are using right now is one of our basic calculators which carries out basic operations of math like +, -, ÷, and ×.
</p>
<!-- Input Fields -->
<div class="input-group">
<input type="number" placeholder="Enter a Number" class="input1" id="input1">
<input type="number" placeholder="Enter a Number" class="input2" id="input2">
</div>
<!-- Operator Checkboxes -->
<div class="operators">
<div class="inputOperator">
<input type="checkbox" id="plusOperator" onclick="uncheckOthers('plusOperator')">
<label for="plusOperator">+</label>
</div>
<div class="inputOperator">
<input type="checkbox" id="minusOperator" onclick="uncheckOthers('minusOperator')">
<label for="minusOperator">-</label>
</div>
<div class="inputOperator">
<input type="checkbox" id="multiplyOperator" onclick="uncheckOthers('multiplyOperator')">
<label for="multiplyOperator">×</label>
</div>
<div class="inputOperator">
<input type="checkbox" id="divideOperator" onclick="uncheckOthers('divideOperator')">
<label for="divideOperator">÷</label>
</div>
</div>
<!-- Buttons -->
<div class="button-group">
<button id="viewResultBtn" onclick="outputProcessorFunction()">View Result</button>
<button id="saveButton" onclick="saveOperation()">Save Operation</button>
</div>
<!-- Output Section -->
<p id="output"></p>
<hr>
<!-- Saved Operations -->
<h3>Saved Operations</h3>
<div id="savedOperations"></div>
<br>
<hr>
<!-- Notes Section -->
<h3>Saved Notes</h3>
<div class="notes-container">
<textarea id="notesInput" placeholder="Write your notes here..."></textarea>
<br>
<button id="saveNoteButton" onclick="saveNote()">Save Note</button>
<div id="savedNotes"></div>
</div>
</main>
<br>
<footer style="font-size: 14px; color: white; font-weight: bold; font-style: italic; ">
v2.1.0 Beta
</footer>
<!-- JavaScript -->
<script>
function uncheckOthers(selectedId) {
const checkboxes = ['plusOperator', 'minusOperator', 'multiplyOperator', 'divideOperator'];
checkboxes.forEach(id => {
if (id !== selectedId) {
document.getElementById(id).checked = false;
}
});
}
let currentResult = null;
function outputProcessorFunction() {
const input1 = document.getElementById("input1").value;
const input2 = document.getElementById("input2").value;
const isPlusChecked = document.getElementById("plusOperator").checked;
const isMinusChecked = document.getElementById("minusOperator").checked;
const isMultiplyChecked = document.getElementById("multiplyOperator").checked;
const isDivideChecked = document.getElementById("divideOperator").checked;
const output = document.getElementById("output");
output.classList.add("visible");
output.classList.remove("error", "success");
if (input1 === "" || input2 === "") {
output.innerHTML = "Please fill both numeric fields.";
output.classList.add("error");
return;
}
const num1 = parseFloat(input1);
const num2 = parseFloat(input2);
let result;
if (isPlusChecked) {
result = num1 + num2;
} else if (isMinusChecked) {
result = num1 - num2;
} else if (isMultiplyChecked) {
result = num1 * num2;
} else if (isDivideChecked) {
if (num2 === 0) {
output.innerHTML = "Cannot divide by zero.";
output.classList.add("error");
return;
} else {
result = num1 / num2;
}
} else {
output.innerHTML = "Please check an operator to perform the operation.";
output.classList.add("error");
return;
}
currentResult = `${num1} ${getOperatorSymbol()} ${num2} = ${result}`;
output.innerHTML = "Result: " + result;
output.classList.add("success");
document.getElementById("saveButton").style.display = "block";
}
function getOperatorSymbol() {
if (document.getElementById("plusOperator").checked) return "+";
if (document.getElementById("minusOperator").checked) return "-";
if (document.getElementById("multiplyOperator").checked) return "×";
if (document.getElementById("divideOperator").checked) return "÷";
}
function saveOperation() {
const savedOperationsDiv = document.getElementById("savedOperations");
const operationDiv = document.createElement("div");
operationDiv.className = "saved-operation";
operationDiv.innerHTML = `<span>${currentResult}</span>
<button class="delete-btn" onclick="deleteOperation(this)">Delete</button>`;
savedOperationsDiv.appendChild(operationDiv);
operationDiv.style.animation = "fadeIn 1s ease-out";
let savedOperations = JSON.parse(localStorage.getItem("savedOperations")) || [];
savedOperations.push(currentResult);
localStorage.setItem("savedOperations", JSON.stringify(savedOperations));
document.getElementById("saveButton").style.display = "none";
}
function deleteOperation(button) {
const operationDiv = button.parentElement;
operationDiv.style.animation = "fadeOut 0.5s forwards";
operationDiv.addEventListener('animationend', () => {
const operationText = operationDiv.querySelector('span').innerText;
let savedOperations = JSON.parse(localStorage.getItem("savedOperations")) || [];
savedOperations = savedOperations.filter(op => op !== operationText);
localStorage.setItem("savedOperations", JSON.stringify(savedOperations));
operationDiv.remove();
});
}
function saveNote() {
const notesInput = document.getElementById("notesInput").value;
if (notesInput.trim() === "") {
alert("Please write something in the notes.");
return;
}
const savedNotesDiv = document.getElementById("savedNotes");
const noteDiv = document.createElement("div");
noteDiv.className = "saved-note";
noteDiv.innerHTML = `<span>${notesInput}</span>
<button class="delete-btn" onclick="deleteNote(this)">Delete</button>`;
savedNotesDiv.appendChild(noteDiv);
noteDiv.style.animation = "fadeIn 1s ease-out";
let savedNotes = JSON.parse(localStorage.getItem("savedNotes")) || [];
savedNotes.push(notesInput);
localStorage.setItem("savedNotes", JSON.stringify(savedNotes));
document.getElementById("notesInput").value = "";
}
function deleteNote(button) {
const noteDiv = button.parentElement;
noteDiv.style.animation = "fadeOut 0.5s forwards";
noteDiv.addEventListener('animationend', () => {
const noteText = noteDiv.querySelector('span').innerText;
let savedNotes = JSON.parse(localStorage.getItem("savedNotes")) || [];
savedNotes = savedNotes.filter(note => note !== noteText);
localStorage.setItem("savedNotes", JSON.stringify(savedNotes));
noteDiv.remove();
});
}
window.onload = function() {
// Load saved operations
let savedOperations = JSON.parse(localStorage.getItem("savedOperations")) || [];
savedOperations.forEach(operation => {
const savedOperationsDiv = document.getElementById("savedOperations");
const operationDiv = document.createElement("div");
operationDiv.className = "saved-operation";
operationDiv.innerHTML = `<span>${operation}</span>
<button class="delete-btn" onclick="deleteOperation(this)">Delete</button>`;
savedOperationsDiv.appendChild(operationDiv);
operationDiv.style.animation = "fadeIn 1s ease-out";
});
// Load saved notes
let savedNotes = JSON.parse(localStorage.getItem("savedNotes")) || [];
savedNotes.forEach(note => {
const savedNotesDiv = document.getElementById("savedNotes");
const noteDiv = document.createElement("div");
noteDiv.className = "saved-note";
noteDiv.innerHTML = `<span>${note}</span>
<button class="delete-btn" onclick="deleteNote(this)">Delete</button>`;
savedNotesDiv.appendChild(noteDiv);
noteDiv.style.animation = "fadeIn 1s ease-out";
});
};
</script>
</body>
</html>