HTML
!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Kalkulator</title>
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table id="calc">
<tr>
<td>C</td>
<td colspan="2"></td>
<td>/</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>+</td>
</tr>
<tr>
<td colspan="3">0</td>
<td>=</td>
</tr>
</table>
</body>
</html>
CSS
#calc
{
font-size: 32px;
border-spacing: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid black;
border-radius: 10px;
box-shadow: 0 10px 10px;
}
#calc td
{
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
}
#calc td:hover
{
background-color: grey;
color: red;
}
#calc tr:first-child td:not(:last-child):hover
{
background-color: white;
color: black;
Mam już zrobioną że tak powiem obudowe ale musze jeszcze zająć się tym by ten kalkulator działał .
Głównie nie wiem w jaki sposób podpiąć to do javascripta żeby po wciśnięciu np 1 + 2 w pustym okinie przeznaczonym do wyniku ( <td colspan="2"> </td ) wyskoczyło to w co kliknąłem. Mam nadzieję ,że w miare czytelnie wytłumaczyłem
.
