Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais HTML - 12
Tutorial para Criar uma Calculadora

Neste tutorial veremos como criar uma calculadora usando HTML com a ajuda de alguns exemplos. Para isso, vamos aprender aspectos fundamentais do HTML. Depois disso, saberemos como criar uma calculadora básica com HTML.
O que é uma calculadora?
Uma calculadora é um dispositivo eletrônico capaz de realizar vários cálculos matemáticos, como adição, multiplicação, subtração, divisão, etc. A Casio Company desenvolveu a primeira calculadora eletrônica em 1957. Ela pode ser executada em vários sistemas operacionais em computadores, smartphones e tablets. Podemos criar uma calculadora com a ajuda de várias ferramentas de desenvolvimento, linguagens etc.
Vejamos alguns Exemplos:
Exemplo 1: Neste exemplo vamos criar uma calculadora padrão com as quatro operações.
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemplo 1 - Calculadora Padrão</title> <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet"> <style> html { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ff00ff; background-image: linear-gradient(315deg, #2d3436 0%, #0000ff 74%); font-family: 'Arial', cursive; } .title { margin-bottom: 10px; padding: 5px 0; font-size: 26px; font-weight: bold; text-align: center; color: white; font-family: 'Arial', cursive; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 10px; box-sizing: border-box; background: #ffff00; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #ff5858; cursor: pointer; } input[type=text] { width: 270px; height: 70px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: yellow; text-align: right; font-weight: 700; font-size: 70px; line-height: 60px; margin: 0 25px; } .calculator { background-color: #0000aa; box-shadow: 0px 0px 0px 10px #666; border: 5px solid black; border-radius: 10px; } #display { height: 60px; text-align: right; background-color: black; border: 3px solid white; font-size: 28px; left: 2px; top: 2px; color: white; } .btnTop { color: white; background-color: #6f6f6f; font-size: 14px; margin: auto; width: 50px; height: 25px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <div class = "title" align="center"> Exemplo de Calculadora Padrão </div> <form name="Calculator" class = "calculator" > <table border="2" align="center" cellpadding="15" cellspacing="12" bgcolor="#c0c0c0"> <tr> <td> <input type="text" name="Input" Size="35" id="display"> <br> </td> </tr> <tr> <td> <input type="button" name = "one" style="font-size:30px" value=" 1 " OnClick="Calculator.Input.value += '1'"> <input type="button" name = "two" style = "font-size:30px" value=" 2 " OnCLick="Calculator.Input.value += '2'"> <input type="button" name = "three" style="font-size:30px" value=" 3 " OnClick="Calculator.Input.value += '3'"> <input type="button" name="add" class ="btnTop" style="font-size:30px" value=" + " OnClick="Calculator.Input.value += ' + '"> <br> <input type="button" name = "four" style="font-size:30px" value=" 4 " OnClick="Calculator.Input.value += '4'"> <input type="button" name = "five" style="font-size:30px" value=" 5 " OnCLick="Calculator.Input.value += '5'"> <input type="button" name = "six" style="font-size:30px" value=" 6 " OnClick="Calculator.Input.value += '6'"> <input type="button" name = "minus" style="font-size:30px" value=" - " OnClick="Calculator.Input.value += ' - '"> <br> <input type="button" name = "seven" style="font-size:30px" value=" 7 " OnClick="Calculator.Input.value += '7'"> <input type="button" name = "eight" style="font-size:30px" value=" 8 " OnCLick="Calculator.Input.value += '8'"> <input type="button" name = "nine" style="font-size:30px" value=" 9 " OnClick="Calculator.Input.value += '9'"> <input type="button" name = "mul" style="font-size:30px" value=" x " OnClick="Calculator.Input.value += ' * '"> <br> <input type="button" name = "clear" style="font-size:30px" value=" c " OnClick="Calculator.Input.value = ''"> <input type="button" name="zero" style="font-size:30px" value=" 0 " OnClick="Calculator.Input.value += '0'"> <input type="button" name="DoIt" style="font-size:30px" value=" = " OnClick="Calculator.Input.value = eval(Calculator.Input.value)"> <input type="button" name="div" style="font-size:30px" value=" : " OnClick="Calculator.Input.value += ' / '"> <br> </td> </tr> </table> </form> </body> </html>
Veja na imagem abaixo o resultado desse código depois de executado:

Exemplo 2: Neste exemplo vamos criar uma calculadora padrão com algumas teclas adicionais.
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calculadora Padrão</title> <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">  <style> body { background-color: white; } .box { background-color: #ffff43; height: 300px; width: 270px; border-radius: 10px; position: relative; top: 80px; left: 40%; } .display { background-color: white; width: 200px; position: relative; left: 15px; top: 20px; height: 40px; } .display input { width: 220px; position: relative; left: 2px; top: 2px; height: 35px; color: black; background-color: white; font-size: 21px; text-align: right; } .keys { position: relative; top: 15px; } .button { width: 40px; height: 30px; border: blue; border-radius: 8px; margin-left: 17px; cursor: pointer; border-top: 2px solid transparent; } .button.gray { color: white; font-color: black; background-color: #6f6f6f; border-bottom: black 2px solid; border-top: 2px #6f6f6f solid; } .title:hover { color: #fff; } .title { margin-bottom: 10px; margin-top: 30px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: black; font-family: 'Cookie', cursive; } .button.pink { color: black; background-color: #ffffff; font-size: 20px; border-bottom: black 2px solid; } .button.black { color: #0000ff; background-color: #00ffff; border-bottom: #00ffff 2px solid; border-top: 2px #00ffff solid; font-weight: bold; } .button.orange { color: black; background-color: #FF9933; border-bottom: black 2px solid; border-top: 2px #FF9933 solid; } .gray:active { border-top: black 2px solid; border-bottom: 2px #6f6f6f solid; } .pink:active { border-top:#ffaaaa 2px solid; border-bottom:#ffaaaa 2px solid; } .black:active { border-top: black 2px solid; border-bottom: #303030 2px solid; } .orange:active { border-top: black 2px solid; border-bottom: #FF9933 2px solid; } p { line-height: 10px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <div class = "title align="center">Calculadora Padrão </div> <div class="box"> <div class="display"> <input type="text" readonly size="18" id="d"> </div> <div class="keys"> <p> <input type="button" class="button gray" value="mrc" onclick='c("Created....................")'> <input type="button" class="button gray" value="m-" onclick='c("...............by............")'> <input type="button" class="button gray" value="m+" onclick='c(".....................Anoop")'> <input type="button" class="button pink" value=":" onclick='v(":")'> </p> <p> <input type="button" class="button black" value="7" onclick='v("7")'> <input type="button" class="button black" value="8" onclick='v("8")'> <input type="button" class="button black" value="9" onclick='v("9")'> <input type="button" class="button pink" value="x" onclick='v("x")'> </p> <p> <input type="button" class="button black" value="4" onclick='v("4")'> <input type="button" class="button black" value="5" onclick='v("5")'> <input type="button" class="button black" value="6" onclick='v("6")'> <input type="button" class="button pink" value="-" onclick='v("-")'> </p> <p> <input type="button" class="button black" value="1" onclick='v("1")'> <input type="button" class="button black" value="2" onclick='v("2")'> <input type="button" class="button black" value="3" onclick='v("3")'> <input type="button" class="button pink" value="+" onclick='v("+")'> </p> <p> <input type="button" class="button black" value="0" onclick='v("0")'> <input type="button" class="button black" value="." onclick='v(".")'> <input type="button" class="button black" value="C" onclick='c("")'> <input type="button" class="button orange" value="=" onclick='e()'> </p> </div> </div> </body> <script> function c(val) { document.getElementById("d").value=val; } function v(val) {document.getElementById("d").value+=val; } function e() { try { c(eval(document.getElementById("d").value)) } catch(e) { c('Error') } } </script> </html>
Veja na imagem abaixo o resultado desse código depois de executado:

<< Tutorial para Criar um Botão com Imagem em Formulários
Tutorial para Criar um Color Picker >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino