console
<style>
*{margin:0;padding:0;}
.box{
width:300px;
height:400px;
padding:50px;
background:#ccc;
}
.box>button{
width:60px;
height:50px;
border-radius:50%;
background:#999;
outline: none;
font-size:24px;
color:#fff;
}
.box>input{
width:180px;
height:40px;
border-radius:20px;
outline: none;
}
</style>
<body>
<div class="box">
<button class="clear">C</button>
<input type="text">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="jis">+</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="jis">*</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="jis">-</button>
<button class="number">0</button>
<button class="number">.</button>
<button class="jis">/</button>
<button id="result">=</button>
</div>