WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculator
1432
robustarray63
Open In Editor
Publish Your Code
Recommended
14 September 2024
Simple Calculator
17 September 2024
Date Calculator
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) */
