<html> <head> <style> html { background-color: #000; color: #fff; } body { background-color: #446; max-width: 400px; }
.display { display: flex; align-items: center; height: 70px; padding-left: 10px; padding-right: 10px; background-color: #668; font-size: 20px; }
.buttons { display: flex; flex-wrap: wrap; height: 400px; }
.buttons > button { background-color: #2196F3; flex-grow: 1; flex-basis: 20%; margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px; } </style> </head> <body> <div class="display">0</div>
<div class="buttons"> <button>7</button> <button>8</button> <button>9</button> <button>*</button>
<button>4</button> <button>5</button> <button>6</button> <button>-</button>
<button>1</button> <button>2</button> <button>3</button> <button>+</button>
<button>0</button> <button>,</button> <button>/</button> <button>=</button> </div>
<script> const display = document.querySelector('.display') for (const btn of document.querySelectorAll('.buttons button')) { btn.onclick = () => display.textContent += btn.textContent } </script> </body></html>