CODEWITHSUNDEEP
javascripthtml
Raymart C. Lopez
Raymart C. Lopez

Reputation: 25

Use keyboard keys instead of mouse in calculator

Can somebody help me how to do this? This is my calculator and instead of using mouse i want to use the keyboard function. how will i do that? below is the full code of my calculator.

<html>
<head></head>
<style>
input[type=button] {
    color:white;
    border:0;
    display:block;
    height:110px;
    width: 90px;
	font-family: Broadway;
	font-size:200%;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	margin: 0 7px 11px 0;
	transition: all 0.2s ease;
}
td{
	background-color:;
	
	

}
input[type=text] {
    color:black;
	font-size:300%;
    	height:100px;
	border-radius: 5px;
	 
	
}
#calculator {
	width: 425px;
	height: auto;
	
	margin: 100px auto;
	padding: 20px 20px 9px;
	
	background: #9dd2ea;
	background: linear-gradient(#9dd2ea, #8bceec);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
	
}

p{
	color:grey;
}

#clear{
	height:2px;
	width:2px;
	background-color: red;
}



</style>

<body background="background.jpg">


<div style="background-color: " id=calculator>

<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
	<table>
		<tr>
			<td colspan=4><input style="background-color:#F0FFFF" type="text" size=12 id="textboxes" Name="display"></td> //This is for the textbox of the calculator
		</tr>
	</table>
	<br>
	</center>
	<center>
	<table>	
		<tr>
		
			<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value=''"></td>  //This one is for clearing anything on the textbox display of the calculator
		</tr>
		<tr> //below is the code for the numbers of the calculator
			<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
			<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
			<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
			<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
		</tr>
		<tr>
			<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
			<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
			<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
			<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
		</tr>
		<tr>
			<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
			<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
			<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
			<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
		</tr>
		<tr>
			<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
			<td><input type=button value="." OnClick="calc.display.value+='.'"></td>
			<td><input type=button value="=" id="equals" OnClick="calc.display.value=eval(calc.display.value)"></td>
			<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
		</tr>
	</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
</body>
</html>

Upvotes: 1

Views: 2279

Answers (2)

www139
www139

Reputation: 5227

You can try something like this:

Try and tell me what happens :)

window.addEventListener('keypress', function(e) {
  var keycode = e.which || e.keyCode;
  var valueEntered = String.fromCharCode(keycode);
  console.log(valueEntered);
});

This will give you the value of the key pressed. You will want to do switch/if statements to determine which key was pressed. You can also check to make sure the value is a number with isNan();.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Looks like you just need a event listener on the input for = alone.

$(function () {
  $("#textboxes, body").keydown(function (event) {
    if (event.which == 187) {
      $("#equals").trigger("click");
      return false;
    }
  });
});

I have used jQuery. You can also use a jQuery-less version:

window.addEventListener('keydown',function (event) {
  if (event.which == 187) {
    $("#equals").trigger("click");
    return false;
  }
});

Fiddle: http://output.jsbin.com/pegigulibe

Upvotes: 1

Related Questions