Simples Calculadora em HTML - Visual Studio Code

Simples Calculadora em HTML - Visual Studio Code

Código:

<meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Calculadora FMG SAMP</title>    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fundo{
            background-image: linear-gradient(45deg,rgb(0, 38, 255), rgb(52, 168, 28));
            height: 100vh;
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        .calculadora{
            position: absolute;
            background-color: rgba(0, 17, 255, 0.8);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 15px;
            padding: 15px;
        }
        .botao{
            width: 50px;
            height: 50px;
            font-size: 25px;
            cursor: pointer;
            margin: 3px;
            background-color: rgb(51, 253, 0);
            border: none;
            color: rgb(2, 2, 2);
        }
        .botao:hover{
            background-color: rgb(175, 233, 158);
        }
        #resultado{
            background-color: rgb(169, 243, 140);
            width: 207px;
            height: 30px;
            margin: 5px;
            font-size: 25px;
            color: black;
            text-align: right;
            padding: 5px;
        }
        h1 {
            color: rgb(12, 12, 12);
        }

        #titlefmg {
            color: rgb(9, 255, 0);
        }
    </style>   
<div class="fundo">
            
   <h1 id="titlefmg">
       Familia Garcia SAMP
   </h1>
            
   <div class="calculadora">
                   
      <h1>
          Calculadora
      </h1>
                   
      <p id="resultado">
         
      </p>
                   
      <table>
                         <tbody></tbody> <tbody></tbody>
         <tr style="">
                                 
            <td>
               
               <button class="botao" onclick="clean()">
                   C
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="back()">
                   <
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('/')">
                   /
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('*')">
                   X
               </button>
               
            </td>
                             
         </tr><tbody></tbody><tbody>                </tbody> <tbody></tbody>
         <tr style="">
                                 
            <td>
               
               <button class="botao" onclick="insert('7')">
                   7
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('8')">
                   8
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('9')">
                   9
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('-')">
                   -
               </button>
               
            </td>
                             
         </tr><tbody></tbody><tbody>                </tbody> <tbody></tbody>
         <tr style="">
                                 
            <td>
               
               <button class="botao" onclick="insert('4')">
                   4
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('5')">
                   5
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('6')">
                   6
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('+')">
                   +
               </button>
               
            </td>
                             
         </tr><tbody></tbody><tbody>                </tbody> <tbody></tbody>
         <tr style="">
                                 
            <td>
               
               <button class="botao" onclick="insert('1')">
                   1
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('2')">
                   2
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('3')">
                   3
               </button>
               
            </td>
                                 
            <td rowspan="2">
               
               <button class="botao" style="height: 106px;" onclick="calcular()">
                   =
               </button>
               
            </td>
                             
         </tr><tbody></tbody><tbody>                </tbody> <tbody></tbody>
         <tr style="">
                                 
            <td colspan="2">
               
               <button class="botao" style="width: 106px;" onclick="insert('0')">
                   0
               </button>
               
            </td>
                                 
            <td>
               
               <button class="botao" onclick="insert('.')">
                   .
               </button>
               
            </td>
                             
         </tr><tbody></tbody><tbody>            </tbody>
      </table>
               
   </div>
        
</div>
    <script>
        function insert(num)
        {
            var numero = document.getElementById('resultado').innerHTML;
            document.getElementById('resultado').innerHTML = numero + num;
        }
        function clean()
        {
            document.getElementById('resultado').innerHTML = "";
        }
        function back()
        {
            var resultado = document.getElementById('resultado').innerHTML;
            document.getElementById('resultado').innerHTML = resultado.substring(0, resultado.length -1);
        }
        function calcular()
        {
            var resultado = document.getElementById('resultado').innerHTML;
            if(resultado)
            {
                document.getElementById('resultado').innerHTML = eval(resultado);
            }
            else
            {
                document.getElementById('resultado').innerHTML = "Nada..."
            }
        }
    </script>