Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Scientific Calculator</title>

</head>

<body>

</div>

</div>

<div class="info">Swipe to rotate!</div>

</div>

</body>

</html>

CSS

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: linear-gradient(135deg, #1c1c1c, #333);

font-family: 'Arial', sans-serif;

margin: 0;

}

.calculator {

background: #282828;

border-radius: 10px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

width: 400px;

padding: 20px;

display: flex;

flex-direction: column;

}

.header {

display: flex;

justify-content: space-between;

align-items: center;

color: #ffffff;

font-size: 1.2em;

padding: 10px 0;

}

.display {

background: #1e1e1e;

border-radius: 10px;

padding: 20px;

font-size: 2.5em;

text-align: right;

height: 60px;

line-height: 60px;

color: #ffffff;

overflow: hidden;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

margin-bottom: 20px;

}

.buttons {

display: grid;

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

gap: 10px;

}

.button {

padding: 20px;

font-size: 1.5em;

border: none;

background: #3a3a3a;

border-radius: 10px;

color: #ffffff;

cursor: pointer;

transition: background 0.3s, transform 0.2s;

}

.button:hover {

background: #4a4a4a;

transform: scale(1.05);

}

.operator {

background: #f39c12;

}

.operator:hover {

background: #e67e22;

}

.equal {

background: #2ecc71;

grid-column: span 4;

}

.equal:hover {

background: #27ae60;

}

.zero {

grid-column: span 2;

}

.info {

font-size: 0.8em;

color: #ffffff;

text-align: center;

margin-top: 10px;

}

JS

let timeElement = document.getElementById('time');

function updateTime() {

const now = new Date();

const hours = String(now.getHours()).padStart(2, '0');

const minutes = String(now.getMinutes()).padStart(2, '0');

timeElement.innerText = `${hours}:${minutes}`;

}

setInterval(updateTime, 1000);

updateTime();

function appendToDisplay(value) {

if (display.innerText === '0' || display.innerText === 'Error') {

display.innerText = '';

}

display.innerText += value;

playSound();

}

function clearDisplay() {

display.innerText = '0';

playSound();

}

function calculate() {

try {

let result = eval(display.innerText.replace(/Math\.sqrt$(.*?)$/g, 'Math.sqrt($1)')

.replace(/Math\.pow$(.*?)$/g, 'Math.pow($1)')

.replace(/Math\.abs$(.*?)$/g, 'Math.abs($1)'));

display.innerText = result;

playSound();

} catch {

display.innerText = 'Error';

}

function playSound() {

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const oscillator = audioContext.createOscillator();

oscillator.type = 'sine';

oscillator.frequency.setValueAtTime(440, audioContext.currentTime);

oscillator.connect(audioContext.destination);

oscillator.start();

oscillator.stop(audioContext.currentTime + 0.1);

}

t needed) */

Calculator

Recommended

Date Calculator

Simple Calculator

my first calculator

HTML

CSS

JS

Recommended

Date Calculator

Simple Calculator

my first calculator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS