Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(251 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<style>
  /* Estilizando a calculadora */
  #calc {
    width: 220px;
    border: 2px solid #444;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin: 10px auto;
    font-family: Arial, sans-serif;
  }
  #display {
    width: 100%;
    height: 40px;
    font-size: 18px;
    text-align: right;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .buttons button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid #888;
    border-radius: 4px;
    background-color: #eee;
    transition: background-color 0.2s ease;
  }
  .buttons button:hover {
    background-color: #ddd;
  }
  /* Botão de limpar ocupa toda a linha */
  .clear-btn {
    width: 100%;
    background-color: #f66;
    color: #fff;
  }
  .clear-btn:hover {
    background-color: #e55;
  }
</style>


<div id="calc">
  <input type="text" id="display" disabled />
  <div class="buttons">
    <!-- Linha 1 -->
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('/')">÷</button>
    <!-- Linha 2 -->
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('*')">×</button>
    <!-- Linha 3 -->
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('-')">−</button>
    <!-- Linha 4 -->
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="computeResult()">=</button>
    <button onclick="appendToDisplay('+')">+</button>
    <!-- Linha 5: limpar -->
    <button class="clear-btn" onclick="clearDisplay()">C</button>
  </div>
</div>
<script>
  // Adiciona o valor clicado ao display
  function appendToDisplay(val) {
    document.getElementById('display').value += val;
  }
  // Calcula o resultado usando eval() e trata possíveis erros
  function computeResult() {
    let display = document.getElementById('display');
    try {
      // Usamos eval() para realizar o cálculo
      let result = eval(display.value);
      display.value = result;
    } catch (e) {
      display.value = "Erro";
    }
  }
  // Limpa o display
  function clearDisplay() {
    document.getElementById('display').value = '';
  }
</script>

Edição atual tal como às 19h10min de 12 de setembro de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=39086”