<!DOCTYPE html> <html> <head> <title>Calculator</title> <style> .calculator { width: 400px; height: 500px; margin: 0 auto; text-align: center; } .output { height: 50px; font-size: 36px; text-align: right; padding-right: 10px; border: 1px solid black; margin-bottom: 20px; } button { width: 70px; height: 70px; font-size: 24px; margin-right: 10px; margin-bottom: 10px; } </style> </head> <body> <div class="calculator"> <div class="output">0</div> <button>1</button> <button>2</button> <button>3</button> <button>+</button> <br> <button>4</button> <button>5</button> <button>6</button> <button>-</button> <br> <button>7</button> <button>8</button> <button>9</button> <button>x</button> <br> <button>C</button> <button>0</button> <button>=</button> <button>/</button> </div> </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