<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="container"> <form name="calculator"> <input class="textfield" type="textfield" name="ans" value=" "> <input class="key3" type="button" value="del" onClick="document.calculator.ans.value = document.calculator.ans.value.substring(0, document.calculator.ans.value.length - 1)"> <br> <!--first row--> <input class="key" type="button" value="7" onClick="document.calculator.ans.value+='7'"> <input class="key" type="button" value="8" onClick="document.calculator.ans.value+='8'"> <input class="key" type="button" value="9" onClick="document.calculator.ans.value+='9'"> <input class="key2" type="button" value="+" onClick="document.calculator.ans.value+='+'"> <br> <!--second row--> <input class="key" type="button" value="4" onClick="document.calculator.ans.value+='4'"> <input class="key" type="button" value="5" onClick="document.calculator.ans.value+='5'"> <input class="key" type="button" value="6" onClick="document.calculator.ans.value+='6'"> <input class="key2" type="button" value="-" onClick="document.calculator.ans.value+='-'"> <br> <!--third row--> <input class="key" type="button" value="1" onClick="document.calculator.ans.value+='1'"> <input class="key" type="button" value="2" onClick="document.calculator.ans.value+='2'"> <input class="key" type="button" value="3" onClick="document.calculator.ans.value+='3'"> <input class="key2" type="button" value="*" onClick="document.calculator.ans.value+='*'"> <br> <!--fourth row--> <input class="key2 key4" type="reset" value="C"> <input class="key" type="button" value="0" onClick="document.calculator.ans.value+='0'"> <input class="key2" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> <input class="key2 key5" type="button" value="/" onClick="document.calculator.ans.value+='/'"> </form> </div> <button id="submit">Create Story</button> <div id="story"></div>
body{ margin: 0; padding: 0; } #container{ width: 450px; height: 560px; background-color: honeydew; border: 1px solid black; border-radius: 25px; margin: 0 auto; } .textfield{ width: 380px; height: 100px; text-align: center; border-radius: 25px 0px 0px 0px; padding: 10px; font-size: 45px; } input{ border: 1px solid #333333; outline: none; transition: color .6s, background-color .6s, border-radius .6s, border .6s, font-size .6s; } .key:hover{ border-radius: 25px; font-size: 32px; } .key{ width: 100px; margin: 1%; background-color: #333333; color: green; height: 100px; font-size: 30px; } .key2{ width: 100px; margin: 1%; background-color: white; color: red; height: 100px; font-size: 30px; } .key2:hover{ border: 15px outset red; border-radius: 25px; font-size: 32px; } .key3{ width: 48px; height: 122px; float: right; background-color: white; border-radius: 0px 25px 0px 0px; color: #333333; font-size: 15px; } .key3:hover{ background-color: red; color: white; } .key4{ border-radius: 0px 0px 0px 25px; } .key5{ border-radius: 0px 0px 25px 0px; }
See the Pen Calculator by Alex Coy (@CoyFish) on CodePen.