# Kalkulačka Simple verze s displayem ```htmlembedded= <!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" class="value-btn" value="1" /> </td> <td> <input type="button" class="value-btn" value="2" /> </td> <td> <input type="button" class="value-btn" value="3" /> </td> <td> <input type="button" value="/" /> </td> </tr> <tr> <td> <input type="button" class="value-btn" value="4" /> </td> <td> <input type="button" class="value-btn" value="5" /> </td> <td> <input type="button" class="value-btn" value="6" /> </td> <td> <input type="button" value="-" /> </td> </tr> <tr> <td> <input type="button" class="value-btn" value="7" /> </td> <td> <input type="button" class="value-btn" value="8" /> </td> <td> <input type="button" class="value-btn" value="9" /> </td> <td> <input type="button" value="+" /> </td> </tr> <tr> <td> <input type="button" class="value-btn" value="." /> </td> <td> <input type="button" class="value-btn" 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%; } 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; } .btn { background-color: #fb0066!important; } ``` ```javascript= "use strict"; const result = document.getElementById('result'); result.value = 0; const value_btns = document.getElementsByClassName('value-btn'); const button = document.getElementById('button'); var number = 1; function display(e){ const display_value = result.value; const value = e.target.value; console.log(e); console.log(value); if(parseInt(display_value) === 0){ result.value = value; } else { result.value += value; } //result.value = result.value + value; } function calculate() { console.log(value_btns); } function clearScreen() { result.value = 0; } for (var i = 0; i < value_btns.length; i++) { value_btns[i].addEventListener('click', display); } // 1 + 2 = 3 - // 1 + 2 - 3 // Nesmí nastat situace kde bude ++ a -- a ** // Nesmíš mít víc deset. čárek 15.52 // (15.52) - (35.25) // value_btns.addEventListener('click', display); ```