genera una calculadora con interfaz grafica
Aquí te muestro un ejemplo básico de una calculadora con interfaz gráfica utilizando JavaScript y HTML/CSS. **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculadora</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculadora"> <input type="text" id="display" disabled> <div class="fila"> <button class="boton" id="btn7">7</button> <button class="boton" id="btn8">8</button> <button class="boton" id="btn9">9</button> <button class="boton" id="btnDividir">/</button> </div> <div class="fila"> <button class="boton" id="btn4">4</button> <button class="boton" id="btn5">5</button> <button class="boton" id="btn6">6</button> <button class="boton" id="btnRestar">-</button> </div> <div class="fila"> <button class="boton" id="btn1">1</button> <button class="boton" id="btn2">2</button> <button class="boton" id="btn3">3</button> <button class="boton" id="btnSumar">+</button> </div> <div class="fila"> <button class="boton" id="btn0">0</button> <button class="boton" id="btnPunto">.</button> <button class="boton" id="btnIgual">=</button> <button class="boton" id="btnMultiplicar">*</button> </div> <div class="fila"> <button class="boton" id="btnLimpiar">C</button> <button class="boton" id="btnBorrar">DEL</button> </div> </div> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css .calculadora { width: 300px; margin: 50px auto; padding: 20px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .fila { display: flex; justify-content: space-between; margin-bottom: 10px; } .boton { width: 60px; height: 60px; font-size: 24px; font-weight: bold; border: none; border-radius: 10px; background-color: #fff; cursor: pointer; } .boton:hover { background-color: #f5f5f5; } #display { width: 100%; height: 60px; font-size: 24px; font-weight: bold; border: none; border-radius: 10px; padding: 10px; text-align: right; } ``` **script.js** ```javascript const display = document.getElementById('display'); const botones = document.querySelectorAll('.boton'); botones.forEach(boton => { boton.addEventListener('click', () => { const valor = boton.textContent; if (valor === 'C') { display.value = ''; } else if (valor === 'DEL') { display.value = display.value.slice(0, -1); } else { display.value += valor; } }); }); document.getElementById('btnIgual').addEventListener('click', () => { try { const resultado = eval(display.value); display.value = resultado; } catch (error) { display.value = 'Error'; } }); ``` Este código crea una calculadora básica con botones para números, operadores y funciones de limpieza. Cuando se hace clic en un botón, el valor se agrega al display. Cuando se hace clic en el botón "=" se evalúa la expresión y se muestra el resultado. Si se produce un error, se muestra el mensaje "Error". Recuerda que este es un ejemplo básico y no incluye validación de entrada ni otras características avanzadas que podrías necesitar en una calculadora real.