Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.
Public
Edited
Nov 28, 2024
viewof calculator = {
const container = document.createElement("div");
container.className = "calculator-container";
// Estilos en línea con animaciones
const style = document.createElement("style");
style.textContent = `
/* Estilos generales */
.calculator-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
border: 2px solid #01f3b3;
border-radius: 15px;
background-color: white;
width: 350px;
margin: auto;
font-family: 'Arial', sans-serif;
box-shadow: 0 8px 15px rgba(0, 243, 179, 0.2);
animation: fadeIn 1s ease-out;
}
.calculator-container h1 {
color: #013f3b;
margin-bottom: 20px;
font-size: 22px;
text-align: center;
font-weight: bold;
animation: slideIn 1s ease-out;
}
.calculator-input {
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 17px;
animation: fadeInInput 1.2s ease-out;
border: 2px solid #01f3b3;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 243, 179, 0.3);
background-color: #f5f5f5;
}
.calculator-input::placeholder {
text-align: center; /* Centra el texto del placeholder */
color: #a0a0a0; /* Color para el placeholder, opcional */
}
.calculator-input:focus {
outline: none;
border-color: #01c89b;
box-shadow: 0 0 8px rgba(1, 243, 179, 0.6);
background-color: #ffffff;
}
.calculator-button {
padding: 12px 18px;
background-color: #01f3b3;
color: black;
border: 2px solid #01f3b3;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 243, 179, 0.3);
transition: all 0.3s ease;
animation: fadeInButton 1.5s ease-out;
}
.calculator-button:hover {
background-color: #01c89b;
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 243, 179, 0.4);
}
.calculator-button:active {
animation: buttonClick 0.2s ease-out;
}
.calculator-output {
font-size: 20px;
color: black;
margin-top: 20px;
text-align: center;
word-wrap: break-word;
background-color: #dddddd;
border-radius: 8px;
padding: 15px;
width: 100%;
opacity: 0;
animation: fadeInOutput 1.5s ease-out forwards;
}
.highlighted {
font-size: 2rem;
color: #013f3b;
font-weight: bold;
padding: 10px 0;
}
/* Animaciones */
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInInput {
0% { opacity: 0; transform: translateY(15px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInButton {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeInOutput {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes buttonClick {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* Media query para pantallas móviles */
@media (max-width: 600px) {
.calculator-container {
width: 90%; /* Ajusta el ancho a un porcentaje */
padding: 20px; /* Reduce el padding */
}
.calculator-input {
font-size: 16px; /* Reduce el tamaño del texto */
padding: 12px; /* Ajusta el padding */
}
.calculator-button {
font-size: 14px; /* Reduce el tamaño del texto del botón */
padding: 10px 14px; /* Ajusta el tamaño del botón */
}
.calculator-output {
font-size: 18px; /* Reduce el tamaño del texto */
padding: 10px; /* Ajusta el padding */
}
`;
container.appendChild(style);
// Título
const title = document.createElement("h1");
title.textContent = "Calculadora de revalorización de las pensiones";
container.appendChild(title);
// Input: Pensión actual
const input = document.createElement("input");
input.type = "number";
input.placeholder = "Pensión bruta mensual actual";
input.className = "calculator-input";
input.max = 3500; // Limitar el valor máximo del input a 3500
container.appendChild(input);
// Botón
const button = document.createElement("button");
button.textContent = "Calcular";
button.className = "calculator-button";
container.appendChild(button);
// Output
const result = document.createElement("output");
result.className = "calculator-output";
result.textContent = "Introduce el valor bruto de pensión mensual actual";
container.appendChild(result);
// Funcionalidad para el botón
button.addEventListener("click", () => {
const value = parseFloat(input.value);
if (isNaN(value) || value < 0) {
result.textContent = "Valor incorrecto";
} else if (value > 3500) {
result.textContent = "El valor máximo permitido es 3.500 €";
} else {
const factor = 1.028; // Eliminamos la lógica del toggle
const pension = value * factor;
const increase = pension - value;
// Eliminar decimales y formatear con punto como separador de miles
const formattedPension = Math.floor(pension) // Redondeo hacia abajo, sin decimales
.toString()
.replace('.', ',')
.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
const formattedIncrease = Math.floor(increase) // Redondeo hacia abajo, sin decimales
.toString()
.replace('.', ',')
.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
result.innerHTML = `
La pensión para 2025 será de
<span class="highlighted">${formattedPension} €</span><br><br>
La pensión aumentará en <span class="highlighted">${formattedIncrease} €</span>
`;
}
});
container.value = null; // No emitir valores dinámicos
return container;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
