https://github.com/rodrigobarbaedu/calculator-responsive

El repositorio almacena una calculadora web construida con tecnologías front-end como HTML, CSS y JavaScript, utilizando el framework de Bootstrap para diseñar la interfaz de usuario. Esta calculadora permite realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.
https://github.com/rodrigobarbaedu/calculator-responsive

bootstrap css html javascript

Last synced: about 2 months ago
JSON representation

El repositorio almacena una calculadora web construida con tecnologías front-end como HTML, CSS y JavaScript, utilizando el framework de Bootstrap para diseñar la interfaz de usuario. Esta calculadora permite realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.

• Host: GitHub
• URL: https://github.com/rodrigobarbaedu/calculator-responsive
• Owner: rodrigobarbaedu
• Created: 2023-09-26T05:45:13.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-26T06:17:17.000Z (almost 3 years ago)
• Last Synced: 2025-01-25T18:13:31.560Z (over 1 year ago)
• Topics: bootstrap, css, html, javascript
• Language: HTML
• Homepage: https://luisrodrigobarbanavarro.github.io/calculator-responsive/calculator-responsive/index.html
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Práctica 1 I Calculadora HTML + CSS + JavaScript 🐈

### Información Básica

**Nombre:** Barba Navarro Luis Rodrigo

**Fecha (Creación):** 25/09/23

**Descripción:** El repositorio almacena una calculadora web construida con tecnologías front-end como HTML, CSS y JavaScript, utilizando el framework de Bootstrap para diseñar la interfaz de usuario. Esta calculadora permite realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.

### Preguntas

1. `document.querySelector(".display");` selecciona el primer elemento en el documento HTML que tiene la clase CSS "display" y lo devuelve como un objeto que se puede manipular en JavaScript.

2. `const buttons = document.querySelectorAll("button");` selecciona todos los elementos `` en el documento HTML y los devuelve como una lista de nodos que se pueden usar en JavaScript.

3. `buttonText = button.textContent;` asigna el texto contenido dentro del elemento `` actual a la variable `buttonText`.

4. `buttons.forEach((button) => { ... })` es un bucle que itera a través de todos los elementos `` seleccionados por `document.querySelectorAll("button")`. Permite realizar una acción en cada uno de estos elementos.

5. `button.addEventListener("click", () => { ... })` agrega un "escuchador de eventos" a un elemento (en este caso, el elemento ``). Cuando se hace clic en ese botón, la función dentro del bloque `{ ... }` se ejecuta, lo que permite realizar acciones específicas en respuesta al evento de clic.

### Explicación 🐈

Para la creación de la calculadora, manejé el sistema de contenedores y disposición proporcionados por Bootstrap, aprovechando su capacidad preexistente para la adaptación a diferentes tamaños de pantalla. Esto simplificó la tarea de diseñar los botones y estructuras, gracias a las capacidades de responsividad de Bootstrap.

En lo que respecta al código JavaScript proporcionado, no realicé alteraciones significativas. Las modificaciones realizadas se centraron principalmente en las etiquetas de los botones y el campo de entrada de texto, con el propósito de permitir una comunicación efectiva con el JavaScript para procesar los datos de entrada y realizar los cálculos necesarios para mostrar el resultado de las operaciones.