<!DOCTYPE html> <html lang="en"> <head> <title>Scientific Calculator</title> </head> <body> <h2>Scientific Calculator</h2> <input type="text" id="display" readonly> <br> <button onclick="clearDisplay()">C</button> <button onclick="appendToDisplay('7')">7</button> <button onclick="appendToDisplay('8')">8</button> <button onclick="appendToDisplay('9')">9</button> <button onclick="appendToDisplay('/')">/</button> <br> <button onclick="appendToDisplay('4')">4</button> <button onclick="appendToDisplay('5')">5</button> <button onclick="appendToDisplay('6')">6</button> <button onclick="appendToDisplay('')"></button> <br> <button onclick="appendToDisplay('1')">1</button> <button onclick="appendToDisplay('2')">2</button> <button onclick="appendToDisplay('3')">3</button> <button onclick="appendToDisplay('-')">-</button> <br> <button onclick="appendToDisplay('0')">0</button> <button onclick="calculate()">=</button> <button onclick="appendToDisplay('+')">+</button> <br> <button onclick="appendToDisplay('Math.sqrt(')">√</button> <button onclick="appendToDisplay('Math.pow(')">^</button> <button onclick="appendToDisplay('Math.sin(')">sin</button> <button onclick="appendToDisplay('Math.cos(')">cos</button> <script> function appendToDisplay(value) { document.getElementById("display").value += value; } function clearDisplay() { document.getElementById("display").value = ""; } function calculate() { try { document.getElementById("display").value = eval(document.getElementById("display").value); } catch { document.getElementById("display").value = "Error"; } } </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter