Calculadora Web com Python

#HTML
#Flask
#Python

Uma breve introdução à construção de uma calculadora web utilizando o framework Flask e Python. Você encontrará informações sobre como configurar seu ambiente de desenvolvimento, como implementar a funcionalidade da calculadora e como executar o aplicativo. Este guia pretende ser uma referência rápida para ajudá-lo a começar a construir sua própria calculadora web com Flask e Python.

Link do Projeto: https://github.com/Marquezbertin/Calculadora

Este documento é uma breve introdução à construção de uma calculadora web utilizando o framework Flask e Python. Aqui, você encontrará informações sobre como configurar seu ambiente de desenvolvimento, como implementar a funcionalidade da calculadora e como executar o aplicativo. Este guia pretende ser uma referência rápida para ajudá-lo a começar a construir sua própria calculadora web com Flask e Python.

Calculadora.html

<!DOCTYPE html>
<html>

<head>
  <title>Calculadora</title>
      <style>
          h1 {
              text-align: center;
              color: orange;
          }
           h2 {
              text-align: center;
              color: orange;
          }
          body {
          position: relative;
          min-height: 100vh;
          margin: 0;
          padding-bottom: 50px;
      }

      footer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #333;
          color: #fff;
          padding: 20px;
          text-align: center;
      }

      footer a {
          color: #fff;
          text-decoration: none;
      }

      footer a:hover {
          text-decoration: underline;
      }
      
      p {
          font-size: 18px;
          color: #555;
          text-align: center;
          margin: 20px 0;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      }

      form {
          max-width: 400px;
          margin: 0 auto;
          padding: 20px;
          background-color: #f0f0f0;
          border: 1px solid #ccc;
          border-radius: 5px;
          text-align: center;
      }

      input, select, button {
          display: block;
          width: 100%;
          margin-bottom: 10px;
          padding: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
      }

      button {
          background-color: #007BFF;
          color: #fff;
          cursor: pointer;
          /* Remover o efeito padrão do botão */
          border: none;
          outline: none;
      }

      button:hover {
          background-color: #0056b3;
          }

      </style>

</head>

<body>
  <h1>Calculadora</h1>
  <p>Calculadora simples utilizando HTML, CSS e, Python para realizar operações de soma, subtração, multiplicação e divisão</p>
  <form action="/calcular" method="post">
      <input type="number" name="num1" placeholder="Digite o primeiro número" required value="{{ num1 }}">
      <input type="number" name="num2" placeholder="Digite o segundo número" required value="{{ num2 }}">
      <select name="operacao" required>
          <option value="soma" {% if operacao=='soma' %}selected{% endif %}>Soma</option>
          <option value="subtracao" {% if operacao=='subtracao' %}selected{% endif %}>Subtração</option>
          <option value="multiplicacao" {% if operacao=='multiplicacao' %}selected{% endif %}>Multiplicação</option>
          <option value="divisao" {% if operacao=='divisao' %}selected{% endif %}>Divisão</option>
      </select>
      <button type="submit">Calcular</button>
  </form>

  {% if resultado is not none %}
  <h2>Resultado: {{ resultado }}</h2>
  {% endif %}

  <footer>
      <p>Está Calculadora foi desenvolvida por: Bruno Bertin Marquez</p>
      <p>email:<a href="mailto:exemplo@calculadora.com">bertinmarquez84@gmail.com</a></p>
      <p>GitHub:<a href="<https://github.com/Marquezbertin>">Bruno Bertin</a></p>
      <p>Linkedin:<a href="<https://www.linkedin.com/in/bruno-bertin/>">Bruno Bertin</p>
      <p>Whatsapp:<a href="<https://api.whatsapp.com/send?phone=5519993157272>">(19) 99315-7272</a></p>
  </footer>
</body>

</html>

Esse código HTML representa uma página de calculadora simples, utilizando HTML, CSS e Python. Análise linha por linha e uma descrição de cada parte:

<!DOCTYPE html>: Declara o tipo de documento HTML5.
<html>: Tag raiz que envolve todo o conteúdo HTML do documento.
<head>: Contém informações sobre o documento, como o título exibido na barra de título do navegador.
<title>Calculadora</title>: Define o título da página como "Calculadora".
<style>: Iniciação das definições de estilo CSS diretamente na página HTML.
h1 e h2 styling: Define estilos para os cabeçalhos de nível 1 e 2 (títulos) usando cores laranja e centralizando o texto.
body styling: Define estilos para o corpo da página, posicionando-o relativamente com uma altura mínima de 100% da altura visível da janela.
footer styling: Define estilos para o rodapé da página, fixando-o na parte inferior, com um fundo cinza escuro, texto branco e alinhamento central.
p styling: Estilos para parágrafos, incluindo tamanho da fonte, cor e sombra de texto.
form styling: Define estilos para o formulário de entrada, incluindo largura máxima, margens, preenchimento, cor de fundo e borda.
input, select, button styling: Estilos para os elementos de entrada no formulário, configurando a exibição, largura, margens, preenchimento, tamanho da fonte e bordas.
button styling: Estilos específicos para o botão, como cor de fundo, cor do texto, cursor e remoção de estilos padrões de botão.
button:hover styling: Estilos quando o botão é destacado (hover), alterando a cor de fundo.
</style>: Fim das definições de estilo CSS.
<body>: Início do corpo do documento HTML.
<h1>Calculadora</h1>: Título principal da calculadora.
<p>: Descrição da calculadora, explicando as operações que ela realiza.
<form>: Formulário que envia os dados para a rota "/calcular" usando o método POST.
<input> e <select>: Campos de entrada para os números e a operação a ser realizada, com alguns valores predefinidos.
<button>: Botão "Calcular" que envia o formulário.
{% if resultado is not none %}: Início de uma condição em template Python (usando Jinja2). Se o resultado não for nulo, exibirá o resultado.
<h2>Resultado: {{ resultado }}</h2>: Exibe o resultado da operação se houver um.
{% endif %}: Fim da condição.
<footer>: Rodapé da página, incluindo informações de contato e links sociais do desenvolvedor.
</body>: Fim do corpo do documento HTML.
</html>: Fim do documento HTML.

A tecnologia usada inclui HTML para estruturação, CSS para estilo e Jinja2 para lógica de template Python incorporada. O formulário é configurado para enviar dados para a rota "/calcular" usando o método POST, indicando uma possível implementação backend em Python.

Resultado.html

<!DOCTYPE html>
<html>

<head>
  <title>Resultado</title>
</head>

<body>
  <h1>Resultado do Cálculo</h1>
  <p>O resultado é: {{ resultado }}</p>
</body>

</html>

Este código HTML parece ser uma página simples para exibir o resultado de um cálculo. Aqui está uma análise linha por linha:

<!DOCTYPE html>: Declara o tipo de documento HTML5.
<html>: Tag raiz que envolve todo o conteúdo HTML do documento.
<head>: Contém informações sobre o documento, como o título exibido na barra de título do navegador.
<title>Resultado</title>: Define o título da página como "Resultado".
</head>: Fim da seção <head>.
<body>: Início do corpo do documento HTML.
<h1>Resultado do Cálculo</h1>: Título principal da página, indicando que se trata do resultado de um cálculo.
<p>O resultado é: {{ resultado }}</p>: Parágrafo que exibe o resultado do cálculo. A expressão {{ resultado }} sugere que este é um template de algum framework de backend, possivelmente utilizando uma linguagem como Python com um framework web como Flask ou Django, que usa um mecanismo de template (como Jinja2) para incorporar dinamicamente dados na página.
</body>: Fim do corpo do documento HTML.
</html>: Fim do documento HTML.

No geral, este código representa uma página HTML básica para exibir o resultado de um cálculo. A tecnologia usada inclui HTML para a estruturação da página e, potencialmente, um framework de backend que usa um mecanismo de template para inserir dinamicamente o resultado do cálculo na página. O conteúdo exibido na página dependerá dos dados fornecidos durante a renderização da página pelo servidor backend.

Aplicativo.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
  return render_template('calculator.html')

@app.route('/calcular', methods=['POST'])
def calcular():
  num1 = float(request.form['num1'])
  num2 = float(request.form['num2'])
  operacao = request.form['operacao']

  resultado = None

  if operacao == 'soma':
      resultado = num1 + num2
  elif operacao == 'subtracao':
      resultado = num1 - num2
  elif operacao == 'multiplicacao':
      resultado = num1 * num2
  elif operacao == 'divisao':
      if num2 != 0:
          resultado = num1 / num2

  return render_template('calculator.html', resultado=resultado, num1=num1, num2=num2, operacao=operacao)

if __name__ == '__main__':
  app.run()

Este código é uma aplicação web simples usando o framework Flask em Python. Vamos analisar linha por linha:

from flask import Flask, render_template, request: Importa as classes e funções necessárias do módulo Flask. Flask é o framework web, render_template é usado para renderizar templates HTML, e request é usado para acessar os dados enviados pelos formulários.
app = Flask(__name__): Cria uma instância do Flask. __name__ é uma variável que representa o nome do módulo atual, e é utilizado pelo Flask para determinar a localização dos templates e arquivos estáticos.
@app.route('/'): Define um decorador para a função index(), associando-a à rota padrão '/'. Quando alguém acessa a página inicial do aplicativo, a função index() será chamada.
def index(): ...: Função que renderiza o template 'calculator.html' quando a rota padrão é acessada. Esta função não parece manipular operações de cálculo diretamente.
@app.route('/calcular', methods=['POST']): Define um decorador para a função calcular(), associando-a à rota '/calcular' e especifica que ela só deve responder a requisições POST.
def calcular(): ...: Função que realiza o cálculo com base nos dados enviados via formulário POST. Extrai os valores de 'num1', 'num2' e 'operacao' do formulário e realiza a operação correspondente, atualizando a variável resultado.
if __name__ == '__main__':: Verifica se o script está sendo executado diretamente, não sendo importado como um módulo.
app.run(): Inicia o servidor de desenvolvimento quando o script é executado diretamente.

Em resumo, este código implementa um servidor web usando Flask. Quando a rota padrão é acessada, o servidor renderiza a página 'calculator.html'. Quando a rota '/calcular' é acessada por meio de um formulário POST, a função calcular() é chamada para realizar a operação matemática e retornar o resultado para ser exibido na página 'calculator.html'. A tecnologia usada é o framework web Flask em conjunto com Python.

A análise dos códigos fornecidos revela a construção de uma aplicação web simples utilizando o framework Flask em conjunto com HTML e CSS. O código Python define rotas para as páginas, lida com requisições POST de um formulário HTML e realiza operações de cálculo com base nos dados recebidos. O frontend é estruturado usando templates HTML, e o estilo é aplicado usando CSS para proporcionar uma experiência de usuário mais agradável.

A página principal (calculator.html) apresenta um formulário que permite aos usuários inserir dois números e selecionar uma operação matemática (soma, subtração, multiplicação ou divisão). A aplicação Flask recebe esses dados, realiza os cálculos correspondentes e retorna o resultado, que é exibido na mesma página.

Além disso, o código inclui uma página adicional (result.html) que é responsável por exibir o resultado do cálculo. Ambas as páginas compartilham uma estrutura básica HTML, mas a segunda é destinada a mostrar resultados específicos.

Em resumo, a aplicação é uma calculadora web simples que utiliza tecnologias como Flask para o backend e HTML/CSS para o frontend. A estrutura modularizada permite a fácil manutenção e expansão do código, tornando-a uma base sólida para implementações mais complexas, se necessário.