WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculator
1266
robustarray63
Open In Editor
Publish Your Code
Recommended
17 July 2025
Scientific Calculator
29 August 2024
Calculator UI -Neumorphism -Drak
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scientific Calculator</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator" id="calculator"> <div class="header"> <div class="time" id="time">12:45</div> </div> <div class="display" id="display">0</div> <div class="buttons"> <button class="button operator" onclick="clearDisplay()">C</button> <button class="button operator" onclick="appendToDisplay('(')">(</button> <button class="button operator" onclick="appendToDisplay(')')">)</button> <button class="button operator" onclick="appendToDisplay('%')">%</button> <button class="button operator" onclick="appendToDisplay('/')">/</button> <button class="button operator" onclick="appendToDisplay('*')">*</button> <button class="button operator" onclick="appendToDisplay('-')">-</button> <button class="button operator" onclick="appendToDisplay('+')">+</button> <button class="button" onclick="appendToDisplay('Math.sqrt(')">√</button> <button class="button" onclick="appendToDisplay('Math.pow(')">x²</button> <button class="button" onclick="appendToDisplay('Math.abs(')">|x|</button> <button class="button" onclick="appendToDisplay('Math.log(')">log</button> <button class="button" onclick="appendToDisplay('Math.sin(')">sin</button> <button class="button" onclick="appendToDisplay('Math.cos(')">cos</button> <button class="button" onclick="appendToDisplay('Math.tan(')">tan</button> <button class="button" onclick="appendToDisplay('Math.exp(')">e^x</button> <button class="button" onclick="appendToDisplay('7')">7</button> <button class="button" onclick="appendToDisplay('8')">8</button> <button class="button" onclick="appendToDisplay('9')">9</button> <button class="button" onclick="appendToDisplay('4')">4</button> <button class="button" onclick="appendToDisplay('5')">5</button> <button class="button" onclick="appendToDisplay('6')">6</button> <button class="button" onclick="appendToDisplay('1')">1</button> <button class="button" onclick="appendToDisplay('2')">2</button> <button class="button" onclick="appendToDisplay('3')">3</button> <button class="button zero" onclick="appendToDisplay('0')">0</button> <button class="button equal" onclick="calculate()">=</button> </div> <div class="info">Swipe to rotate!</div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
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
Copy
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) */
