Calsy Minor

Download as pdf or txt
Download as pdf or txt
You are on page 1of 7

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap">

<title>Online Calculator</title>

</head>

<body>

<div class="container">

<div class="calculator-container">

<h1 class="header">WELCOME TO THE ONLINE CALCULATOR!!</h1>

<div class="calculator">

<div class="display" id="display">0</div>

<div class="buttons">

<button onclick="clearDisplay()">C</button>

<button onclick="deleteLast()">DEL</button>

<button onclick="appendCharacter('%')">%</button>

<button class="operation" onclick="appendCharacter('/')">/</button>

<button onclick="appendCharacter('7')">7</button>

<button onclick="appendCharacter('8')">8</button>

<button onclick="appendCharacter('9')">9</button>

<button class="operation" onclick="appendCharacter('*')">*</button>

<button onclick="appendCharacter('4')">4</button>

<button onclick="appendCharacter('5')">5</button>

<button onclick="appendCharacter('6')">6</button>

<button class="operation" onclick="appendCharacter('-')">-</button>

<button onclick="appendCharacter('1')">1</button>

<button onclick="appendCharacter('2')">2</button>
<button onclick="appendCharacter('3')">3</button>

<button class="operation" onclick="appendCharacter('+')">+</button>

<button onclick="appendCharacter('0')">0</button>

<button onclick="appendCharacter('.')">.</button>

<button class="equal" onclick="calculateResult()">=</button>

</div>

</div>

</div>

</div>

<script>

let display = document.getElementById('display');

let history = document.getElementById('history');

function clearDisplay() {

display.textContent = '0';

function deleteLast() {

if (display.textContent.length > 1) {

display.textContent = display.textContent.slice(0, -1);

} else {

display.textContent = '0';

function appendCharacter(char) {

if (display.textContent === '0' && char !== '.') {

display.textContent = char;

} else {

display.textContent += char;
}

function calculateResult() {

try {

const result = eval(display.textContent);

const expression = display.textContent + ' = ' + result;

addHistory(expression);

display.textContent = result;

} catch {

display.textContent = 'Error';

</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

height: 100vh;

display: flex;
justify-content: center;

align-items: center;

background: url('—Pngtree—3d\ rendering\ of\ calculator\ symbol_11772116.jpg') no-repeat


center center fixed;

background-size: cover;

position: relative;

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

z-index: 1;

.container {

position: relative;

z-index: 2;

display: flex;

flex-direction: column;

align-items: center;

color: white;

.calculator-container {

text-align: center;

margin-bottom: 20px;
}

.calculator {

background: rgba(0, 0, 0, 0.8);

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

.display {

text-align: right;

background: rgba(255, 255, 255, 1);

color: black;

font-size: 2em;

padding: 10px;

border-radius: 5px;

margin-bottom: 10px;

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

button {

padding: 20px;

font-size: 1.2em;

border: none;

border-radius: 5px;

cursor: pointer;
background: rgba(255, 255, 255, 0.9);

color: black;

button.operation {

background: rgba(255, 165, 0, 1);

button.equal {

background: rgba(0, 128, 0, 1);

grid-column: span 2;

.history-container {

position: absolute;

bottom: 20px;

left: 20px;

width: 200px;

.history {

background: rgba(0, 0, 0, 0.7);

padding: 10px;

border-radius: 10px;

max-height: 200px;

overflow-y: auto;

.history h2 {

margin-top: 0;

}
.history-item {

margin-bottom: 5px;

padding: 5px;

background: rgba(255, 255, 255, 0.1);

border-radius: 5px;

.header {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
Verdana, sans-serif;

font-size: 2.5em;

margin: 20px 0;

You might also like