{"pageProps":{"title":"Criando uma calculadora simples com: HTML, CSS e JavaScript","description":"Vou mostrar o código de como criei uma simples calculadora com o básico.","thumbnailUrl":"https://blogdomat.vercel.app/api/thumbnail.png?title=Criando uma calculadora simples com: HTML, CSS e JavaScript&icon=https://cdn.worldvectorlogo.com/logos/visual-studio-code-1.svg","slug":"8-criando-uma-calculadora-com-html-css-javascript","content":"

Calculadora 💥

\n

Para um exercício de HTML, CSS e Javascript, desenvolvi uma calculadora, usando o báciso,\nsem framework. Segue o código.

\n

\"\"

\n

Para visualizar o projeto online, clique aqui.

\n

Para acessar o código completo da aplicação, clique aqui.

\n

HTML

\n
<!DOCTYPE html>\n<html lang="pt-br">\n\n<head>\n    <!-- META TAGS -->\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n\n    <!-- TITLE -->\n    <title>Calculadora | DevBSB</title>\n\n    <!-- SEO TAGS -->\n    <meta name="description"\n        content="Uma simples calculadora com funções báricas: adição, subtração, multiplicação e divisão, desenvolvida em HMTL, CSS e Javascript." />\n    <meta name="keywords"\n        content="calculadora, devbsb, html, css, javascript, animation, adição, subtração, multiplicação, divisão, projeto" />\n    <meta name="robots" content="" />\n    <meta name="revisit-after" content="1 day" />\n    <meta name="language" content="Portuguese" />\n    <meta name="generator" content="N/A" />\n    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n\n    <!-- FAVICON -->\n    <link rel="icon" href="/img/favicon.ico" />\n\n    <!-- FONT ROTOBO -->\n    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />\n\n    <!-- STYLE CSS -->\n    <link href="/css/style.min.css" rel="stylesheet" />\n</head>\n\n<body>\n\n    <!-- CALCULATOR -->\n    <div class="calculator">\n\n        <!-- DISPLAY -->\n        <div class="display">\n            <input id="display" placeholder="0" disabled>\n            <h2 id="history"></h2>\n        </div>\n\n        <!-- <BUTTONS -->\n        <div class="row">\n            <button class="button purple-text" onclick="limpar()">AC</button>\n            <div></div>\n            <div></div>\n            <button class="button gray" onclick="add_operador('/')">/</button>\n        </div>\n\n        <div class="row">\n            <button class="button" onclick="add_numero(7)">7</button>\n            <button class="button" onclick="add_numero(8)">8</button>\n            <button class="button" onclick="add_numero(9)">9</button>\n            <button class="button gray" onclick="add_operador('*')">*</button>\n        </div>\n\n        <div class="row">\n            <button class="button" onclick="add_numero(4)">4</button>\n            <button class="button" onclick="add_numero(5)">5</button>\n            <button class="button" onclick="add_numero(6)">6</button>\n            <button class="button gray" onclick="add_operador('-')">-</button>\n        </div>\n\n        <div class="row">\n            <button class="button" onclick="add_numero(1)">1</button>\n            <button class="button" onclick="add_numero(2)">2</button>\n            <button class="button" onclick="add_numero(3)">3</button>\n            <button class="button gray" onclick="add_operador('+')">+</button>\n        </div>\n\n        <div class="row">\n            <div></div>\n            <button class="button" onclick="add_numero(0)">0</button>\n            <button class="button" onclick="add_numero('.')">.</button>\n            <button class="button purple" onclick="total()">=</button>\n        </div>\n        <!-- BUTTONS/> -->\n    </div>\n\n    <!-- LINK TO GITHUB PROJECT -->\n    <div class="github">\n        <a href="https://github.com/iaematt/calculator" target="_blank" title="Code in GitHub">\n            <img src="/img/github.svg" width="35" />\n        </a>\n    </div>\n\n    <!-- SCRIPTS -->\n    <script type="text/javascript" src="/js/script.js"></script>\n    <script type="text/javascript" src="/js/keyboard.min.js"></script>\n\n</body>\n\n</html>
\n

CSS

\n
/* DEFAULT CSS */\n* {\n  box-sizing: border-box;\n  margin: 0;\n  outline: 0;\n  padding: 0;\n}\n\nbody {\n  background: url(/img/background.png) #cfcfcf;\n  color: #111111;\n  font-size: 16px;\n\n  /* FLEX */\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: "Roboto", sans-serif;\n}\n\nhtml,\nbody {\n  height: 100%;\n}\n\n/* CALCULATOR CONTAINER */\n.calculator {\n  animation: sideIn 480ms cubic-bezier(0.42, 0, 0.21, 1);\n  background-color: #2f2b39;\n  border-radius: 2px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  padding: 10px 20px;\n  width: 252px;\n}\n\n/* DISPLAY */\n.display {\n  margin: 50px 0 60px;\n  text-align: right;\n}\n\n.display input {\n  background: transparent;\n  border: none;\n  color: #f2f2f2;\n  font-size: 40px;\n  font-weight: 400;\n  text-align: right;\n  width: 100%;\n}\n\n.display h2 {\n  color: #6d53d6;\n  font-size: 15px;\n  font-weight: 500;\n  height: 18px;\n}\n\n/* ROW GRID */\n.row {\n  display: grid;\n  grid-template-columns: repeat(4, 25%);\n  margin-bottom: 10px;\n}\n\n/* BUTTON */\n.button {\n  background-color: transparent;\n  border: none;\n  border-radius: 2px;\n  color: #f2f2f2;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 500;\n  height: 50px;\n  margin: 2px;\n  transition: all 0.15s ease-in-out;\n  width: 50px;\n}\n\n.button:hover {\n  transform: scale(1.04);\n}\n.button:active {\n  transform: scale(0.97);\n}\n\n/* COLORS */\n.gray {\n  background-color: #eaeaea;\n  color: #2f2d38;\n}\n\n.purple {\n  background-color: #7d5dfe;\n  color: #f2f2f2;\n}\n\n.purple-text {\n  color: #7d5dfe;\n}\n\n/* GIT HUB LOGO/LINK */\n.github {\n  position: fixed;\n  bottom: 15px;\n  right: 15px;\n}\n\n.github a {\n  opacity: 0.8;\n  transition: all 0.15s ease-in-out;\n}\n\n.github a img {\n  transform: scale(0.9);\n  transition: all 0.15s ease-in-out;\n}\n\n.github a:hover {\n  opacity: 1;\n}\n\n.github a:hover img {\n  transform: scale(1);\n}\n\n/* ANIMATION */\n@keyframes sideIn {\n  from {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n\n  50% {\n    transform: translateY(-75px);\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}
\n

Javascript

\n
var input = document.querySelector("#display");\nvar operador = "";\nvar parar = false;\n\nfunction limpar() {\n  input.value = "";\n  document.querySelector("#history").innerHTML = "";\n  operador = ""\n}\n\nfunction add_numero(string) {\n  if (!parar) {\n    if (string === '.' && input.value.indexOf(".") === -1 || string !== '.') {\n      input.value = input.value + string;\n      history.value = input.value;\n    }\n  } else {\n    if (string === '.' && input.value.indexOf(".") === -1 || string !== '.') {\n      input.value = "";\n      parar = false;\n      document.querySelector("#history").innerHTML = "";\n      operador = "";\n\n      input.value = input.value + string;\n    }\n  }\n}\n\nfunction add_operador(op) {\n  if (input.value == "") {\n    input.value = "0";\n  }\n\n  if (operador == "") {\n    operador = op;\n    input.value = input.value + op;\n  } else {\n    total()\n    input.value = input.value + op;\n    operador = op;\n    parar=false;\n  }\n}\n\nfunction total() {\n  if (!parar) {\n    numeros = input.value.split(operador);\n\n    if (numeros[1] == "") {\n      input.value = input.value + '0';\n      numeros[1] = 0;\n\n    }\n\n    document.querySelector("#history").innerHTML = input.value;\n\n    switch (operador) {\n      case "+":\n        input.value = Number(numeros[0]) + Number(numeros[1]);\n        break;\n\n      case "-":\n        input.value = numeros[0] - numeros[1];\n        break;\n\n      case "*":\n        input.value = numeros[0] * numeros[1];\n        break;\n\n      case "/":\n        input.value = numeros[0] / numeros[1];\n        break;\n    }\n\n    parar = true;\n  }\n}
\n

Conclusão

\n

Para acessar as imagens de fundo e demais coisas, visite o GitHub e clone o projeto.

\n"},"__N_SSG":true}