Features:
Dark Mode: The entire website has a dark theme.
Animated Background: A gradient background with smooth animation.
Modern Buttons: Buttons are styled with hover and active effects.
Header: "Arrow Calculator" is displayed in the top-left corner.
Footer: Includes a copyright notice.
SEO Meta Tags: Added meta description and keywords for better search engine visibility.
HTML. CSS, JAVA Code
-----------------------------------------------------------------
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content=" Calculator - A modern, sleek, and user-friendly online calculator with dark mode and animated background. Perfect for quick and accurate calculations." name="description"></meta>
<meta content="calculator, online calculator, dark mode calculator, modern calculator, Calculator" name="keywords"></meta>
<meta content="Arrow Calculator" name="author"></meta>
<title>Arrow Calculator</title>
<style>
/* General Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(-45deg, #1a1a1a, #2c3e50, #34495e, #1a1a1a);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Header Styles */
header {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: #fff;
}
/* Calculator Container */
.calculator {
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
width: 320px;
text-align: center;
}
/* Display Screen */
.display {
background: #ffffff;
color: #fff;
font-size: 2em;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: right;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Buttons */
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.buttons button {
background: #444;
color: #fff;
border: none;
padding: 20px;
font-size: 1.2em;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.buttons button:hover {
background: #555;
transform: scale(1.05);
}
.buttons button:active {
background: #666;
transform: scale(0.95);
}
.buttons button.operator {
background: #ff9500;
}
.buttons button.operator:hover {
background: #ffaa33;
}
.buttons button.operator:active {
background: #cc7700;
}
.buttons button.clear {
background: #ff3b30;
}
.buttons button.clear:hover {
background: #ff5c52;
}
.buttons button.clear:active {
background: #cc2c24;
}
/* Footer Styles */
footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 14px;
color: #aaa;
}
</style>
</head>
<body>
<!-- Header -->
<header>Calculator</header>
<!-- Calculator -->
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button class="operator" onclick="appendOperator('/')">/</button>
<button class="operator" onclick="appendOperator('*')">*</button>
<button class="operator" onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button class="operator" onclick="appendOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="calculateResult()" style="background: #34c759; grid-row: span 2;">=</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendNumber('0')" style="grid-column: span 2;">0</button>
<button onclick="appendNumber('.')">.</button>
</div>
</div>
<!-- Footer -->
<footer>
© 2025 Calculator. All rights reserved.
</footer>
<!-- JavaScript -->
<script>
let display = document.getElementById('display');
let currentInput = '';
let operator = null;
let previousInput = '';
function appendNumber(number) {
if (currentInput.includes('.') && number === '.') return;
currentInput += number;
updateDisplay();
}
function appendOperator(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculateResult();
}
operator = op;
previousInput = currentInput;
currentInput = '';
}
function calculateResult() {
if (operator === null || currentInput === '') return;
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operator = null;
previousInput = '';
updateDisplay();
}
function clearDisplay() {
currentInput = '';
operator = null;
previousInput = '';
updateDisplay();
}
function updateDisplay() {
display.innerText = currentInput || '0';
}
</script>
</body>
</html>
Comments
Post a Comment
Thank you for your message.