How do i fix my calculator?

HTML-CSS
1 
<!DOCTYPE html>
<html>
<head>
	<title> Calculator </title>
</head>

<style>
    

    body
    {
        background-image:  linear-gradient(to right, #7b4397 ,#dc2430 ) ;
    }
    
    input[type=button]
    {
        
        font-size: 20px;
        width: 50px;
        height: 50px;
        margin-right: -6px;
        margin-top: -6px;
        border: 
        color: none;
    }
    
    
    input[type=text]
    {
        font-family: cursive;
        margin-left: 3px;
        margin-top: ;
        margin-bottom: inherit;
        width: 140px;
        height: 42px;
        
    }


</style>

<body>

	<form name="Calculator">
        
        
        
		<table>
			<tr>
				<input type="text" name="Answer"> <input type="button" value="C" name="Delete" onclick="Calculator.Answer.value = ' ' ">
			</tr>

			<tr>
				<td><input type="button" value="+" onclick="Calculator.Answer.value += '+' "></td>
				<td><input type="button" value="-" onclick="Calculator.Answer.value += '-' "></td>
				<td><input type="button" value="/" onclick="Calculator.Answer.value += '/' "></td>
				<td><input type="button" value="*" onclick="Calculator.Answer.value += '*' "></td>
			</tr>

			<tr>
				<td><input type="button" value="7" onclick="Calculator.Answer.value += '7' "></td>
				<td><input type="button" value="9" onclick="Calculator.Answer.value += '8' "></td>
				<td><input type="button" value="9" onclick="Calculator.Answer.value += '9' "></td>
				<td><input type="button" value="=" id="del" onclick="Calculator.Answer.value = eval(Calculator.Answer.value) "></td>
			</tr>

			<tr>
				<td><input type="button" value="4" onclick="Calculator.Answer.value += '4' "></td>
				<td><input type="button" value="5" onclick="Calculator.Answer.value += '5' "></td>
				<td><input type="button" value="6" onclick="Calculator.Answer.value += '6' "></td>
			</tr>

			<tr>
				<td><input type="button" value="1" onclick="Calculator.Answer.value += '1' "></td>
				<td><input type="button" value="2" onclick="Calculator.Answer.value += '2' "></td>
				<td><input type="button" value="3" onclick="Calculator.Answer.value += '3' "></td>
			</tr>
		<table>
         
       
	</form>

</body>
        
</html>

1. Also how do i put these together?!!
2. Increase height of “=” button wihtout affecting other buttons
Capture

2

Hey,
try this :

<!DOCTYPE html>
<html>
<head>
	<title> Calculator </title>
</head>

<style>
    

    body
    {
        background-image:  linear-gradient(to right, #7b4397 ,#dc2430 ) ;
    }
    
    input[type=button]
    {
        
        font-size: 20px;
        width: 50px;
        height: 50px;
        margin-right: -6px;
        margin-top: -6px;
        color: none;
    }
    
    
    input[type=text]
    {
        font-family: cursive;
        margin-left: 3px;
        margin-top: ;
        margin-bottom: inherit;
        width: 140px;
        height: 42px;
        
    }
  input[id=del]{
    height: 150px;
  }

</style>

<body>

	<form name="Calculator">
        
        
        
		<table>
			<tr>
				<input type="text" name="Answer"> <input type="button" value="C" name="Delete" onclick="Calculator.Answer.value = ' ' ">
			</tr>

			<tr>
				<td><input type="button" value="+" onclick="Calculator.Answer.value += '+' "></td>
				<td><input type="button" value="-" onclick="Calculator.Answer.value += '-' "></td>
				<td><input type="button" value="/" onclick="Calculator.Answer.value += '/' "></td>
				<td><input type="button" value="*" onclick="Calculator.Answer.value += '*' "></td>
			</tr>

			<tr>
				<td><input type="button" value="7" onclick="Calculator.Answer.value += '7' "></td>
				<td><input type="button" value="8" onclick="Calculator.Answer.value += '8' "></td>
				<td><input type="button" value="9" onclick="Calculator.Answer.value += '9' "></td>
				<td rowspan="3"><input type="button" value="=" id="del" onclick="Calculator.Answer.value = eval(Calculator.Answer.value) "></td>
			</tr>

			<tr>
				<td><input type="button" value="4" onclick="Calculator.Answer.value += '4' "></td>
				<td><input type="button" value="5" onclick="Calculator.Answer.value += '5' "></td>
				<td><input type="button" value="6" onclick="Calculator.Answer.value += '6' "></td>
			</tr>

			<tr>
				<td><input type="button" value="1" onclick="Calculator.Answer.value += '1' "></td>
				<td><input type="button" value="2" onclick="Calculator.Answer.value += '2' "></td>
				<td><input type="button" value="3" onclick="Calculator.Answer.value += '3' "></td>
			</tr>
		<table>
         
       
	</form>

</body>
        
</html>

calc
calc818×591 10.2 KB

3

So, i chaged a bit the code to make it a grid but it does’nt seem to be working.
Any idea why?

<!DOCTYPE html>
<html>
<head>
	<title> Calculator </title>
</head>

<style>
    

    body
    {
        background-image:  linear-gradient(to right, #7b4397 ,#dc2430 ) ;
		align-content:center;
	justify-content:center;
	margin:center;
    }
    
    input[type=button]
    {
        
        font-size: 20px;
        width: 50px;
        height: 50px;
        margin-right: -6px;
        margin-top: -6px;
        border: 
        color: none;
    }
    
    
    input[type=text]
    {
        font-family: cursive;
        margin-left: 3px;
        margin-top: ;
        margin-bottom: inherit;
        width: 140px;
        height: 42px;
        
    }
#wrapper {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-area: ' answer answer answer del '
			   ' add del divide mul'
			   ' seven eight nine equal'
			   ' four five six equal  '
			   ' one two three equal ';
	align-content:center;
	justify-content:center;
	margin:center;
	
}
.answer {grid-area:answer;}
.del{grid-area:del;}
.add { grid-area:add;}
.sub {grid-area:sub;}
.divide {grid-area:divide;}
.mul {grid-area:mul;}
.equal {grid-area:equal;}
.one {grid-area:one;}
.two {grid-area:two;}
.three {grid-area:three;}
.four {grid-area:four;}
.five {grid-area:five;}
.six {grid-area:six;}
.seven	{grid-area:seven;}
.eight	{grid-area:eight;}
.nine	{grid-area:nine;}

</style>

<body>

	<form name="Calculator">
        
        
        
			<div id="wrapper" >
				<input type="text" class="answer" name="Answer"> 
				<input type="button" value="C" class="del" name="Delete" onclick="Calculator.Answer.value = ' ' ">
			

			
				<td><input type="button" value="+" class="add" onclick="Calculator.Answer.value += '+' "></td>
				<td><input type="button" value="-" class="sub" onclick="Calculator.Answer.value += '-' "></td>
				<td><input type="button" value="/" class="divide" onclick="Calculator.Answer.value += '/' "></td>
				<td><input type="button" value="*" class="mul" onclick="Calculator.Answer.value += '*' "></td>		
				<td><input type="button" value="7" class="seven"onclick="Calculator.Answer.value += '7' "></td>
				<td><input type="button" value="8" class="eight" onclick="Calculator.Answer.value += '8' "></td>
				<td><input type="button" value="9" class="nine" onclick="Calculator.Answer.value += '9' "></td>
				<td><input type="button" value="=" class="equal" id="del" onclick="Calculator.Answer.value = eval(Calculator.Answer.value) "></td>
				<td><input type="button" value="4" class="four" onclick="Calculator.Answer.value += '4' "></td>
				<td><input type="button" value="5" class="five" onclick="Calculator.Answer.value += '5' "></td>
				<td><input type="button" value="6" class="six" onclick="Calculator.Answer.value += '6' "></td>	
				<td><input type="button" value="1" class="one" onclick="Calculator.Answer.value += '1' "></td>
				<td><input type="button" value="2" class="two" onclick="Calculator.Answer.value += '2' "></td>
				<td><input type="button" value="3" class="three" onclick="Calculator.Answer.value += '3' "></td>        
			</div>
	</form>

</body>
        
</html>