<div class = "box">

    <div id = "display"><input type = "text" readonly size="20" id="btn"></div>

     <div class = "key">

    <p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">

       <input type = "button" class = "button gray" value = "2">

       <input type = "button" class = "button gray" value = "3">

       <input type = "button" class = "button black" value = "+"></p>

    <p><input type = "button" class = "button gray" value = "4">

       <input type = "button" class = "button gray" value = "5">

       <input type = "button" class = "button gray" value = "6">

       <input type = "button" class = "button black" value = "-"></p>

    <p><input type = "button" class = "button gray" value = "7">

       <input type = "button" class = "button gray" value = "8">

       <input type = "button" class = "button gray" value = "9">

       <input type = "button" class = "button black" value = "*"></p>

    <p><input type = "button" class = "button black" value = "%">

       <input type = "button" class = "button gray" value = "0">

       <input type = "button" class = "button black" value = "^">

       <input type = "button" class = "button black" value = "/"></p>

    <p><input type = "button" class = "button black" value = "C">

       <input type = "button" class = "button black" value = "="></p>

</div>

</div>