# Kalkulačka simple ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Moje aplikace</h1> <table class="calculator" > <tr> <td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td> <!-- clearScreen() function clears all the values --> <td> <input type="button" value="C" onclick="clearScreen()" class="btn" /> </td> </tr> <tr> <!-- display() function displays the value of clicked button --> <td> <input type="button" value="1" /> </td> <td> <input type="button" value="2" /> </td> <td> <input type="button" value="3" /> </td> <td> <input type="button" value="/" /> </td> </tr> <tr> <td> <input type="button" value="4" /> </td> <td> <input type="button" value="5" /> </td> <td> <input type="button" value="6" /> </td> <td> <input type="button" value="-" /> </td> </tr> <tr> <td> <input type="button" value="7" /> </td> <td> <input type="button" value="8" /> </td> <td> <input type="button" value="9" /> </td> <td> <input type="button" value="+" /> </td> </tr> <tr> <td> <input type="button" value="." /> </td> <td> <input type="button" value="0" /> </td> <!-- calculate() function evaluates the mathematical expression --> <td> <input type="button" value="=" onclick="calculate()" class="btn" /> </td> <td> <input type="button" value="*" /> </td> </tr> </table> <script type="text/javascript" src="script.js"></script> </body> </html> ``` ```css @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); .calculator { padding: 10px; border-radius: 1em; height: 380px; width: 400px; margin: auto; background-color: #191b28; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .display-box { font-family: 'Orbitron', sans-serif; background-color: #dcdbe1; border: solid black 0.5px; color: black; border-radius: 5px; width: 100%; height: 65%; } .btn { background-color: #fb0066!important; } input[type=button] { font-family: 'Orbitron', sans-serif; background-color: #64278f; color: white; border: solid black 0.5px; width: 100%; border-radius: 5px; height: 70%; outline: none; } input:active[type=button] { background: #e5e5e5; -webkit-box-shadow: inset 0px 0px 5px #c1c1c1; -moz-box-shadow: inset 0px 0px 5px #c1c1c1; box-shadow: inset 0px 0px 5px #c1c1c1; } ```