Computación

9no. Grado

Proyecto en Programación HTML

Calculadora Elementos en HTML/CSS/Script

Actividad 13

Proyecto Química | Calculadora Elementos

Espacio colaborativo

Base de datos de los Elementos

Obtener en ChatGPT los datos especificados del correspondiente Elementop Químico asignado.

Símbolo
Nombre
Número Másico
Configuración Electrónica explícita

Prompt para ChatGPT

Elemento 120. Símbolo, Nombre, Número Másico y Configuración Electrónica explicita, no abreviada.

Editar el Código. Ingresar los datos obtenidos en el código del link a la base de datos proporcionada:

Acceso a la base de Datos y Código HTML

IMPORTANTE! Verificar que el Código haya sido editado correctamente.

Proyecto Química. Tabla de Elementos (Calculadora)

Código HTML/CSS/JavaScript

<!DOCTYPE html>

<head>

<title>Calculadora de Elementos Químicos</title>

<style>

body { background-color: grey; font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }

.container { text-align: center; max-width: 600px; padding: 40px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

input[type="number"] { padding: 8px; font-size: 16px; width: 80%; margin-top: 10px; }

button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin-top: 10px; }

.results { margin-top: 50px; text-align: left; }

.results p { margin: 5px 0; }

</style>

</head>

<body>

<h4>Instituto Arnold Gesell</h4>

<h2>Calculadora de Elementos Químicos</h2>

<p>Ingresa el número atómico:</p>

<button onclick="buscarElemento()">Buscar Elemento</button>

<p id="simbolo">Símbolo: </p>

<p id="nombre">Nombre: </p>

<p id="masico">Número Másico (u): </p>

<p id="configuracion">Configuración Electrónica: </p>

</div>

const elementos = {

1: { simbolo: "H", nombre: "Hidrógeno", masico: 1.008, configuracion: "1s1" },

2: { simbolo: "He", nombre: "Helio", masico: 4.0026, configuracion: "1s2" },

};

function buscarElemento() {

const numeroAtomico = parseInt(document.getElementById("numeroAtomico").value);

const elemento = elementos[numeroAtomico];

if (elemento) {

document.getElementById("simbolo").textContent = `Símbolo: ${elemento.simbolo}`;

document.getElementById("nombre").textContent = `Nombre: ${elemento.nombre}`;

document.getElementById("masico").textContent = `Número Másico (u): ${elemento.masico}`;

document.getElementById("configuracion").textContent = `Configuración Electrónica: ${elemento.configuracion}`;

} else {

document.getElementById("simbolo").textContent = "Símbolo: No encontrado";

document.getElementById("nombre").textContent = "Nombre: No encontrado";

document.getElementById("masico").textContent = "Número Másico (u): No encontrado";

document.getElementById("configuracion").textContent = "Configuración Electrónica: No encontrado";

}

</script>

</body>

</html>