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 27, 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 = `
.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, .calculator-toggle-container {
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
animation: fadeInInput 1.2s ease-out;
}
.calculator-input {
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:focus {
outline: none;
border-color: #01c89b;
box-shadow: 0 0 8px rgba(1, 243, 179, 0.6);
background-color: #ffffff;
}
.calculator-toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #dddddd;
border: 2px solid #dddddd;
border-radius: 8px;
}
.calculator-toggle-label {
font-size: 18px;
color: black;
font-weight: bold;
}
.calculator-toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.calculator-toggle-switch input {
display: none;
}
.calculator-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 25px;
}
.calculator-toggle-slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
.calculator-toggle-switch input:checked + .calculator-toggle-slider {
background-color: #01f3b3;
}
.calculator-toggle-switch input:checked + .calculator-toggle-slider:before {
transform: translateX(24px);
}
.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); }
}
`;
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 actual";
input.className = "calculator-input";
container.appendChild(input);
// Toggle: Pensión máxima
const toggleContainer = document.createElement("div");
toggleContainer.className = "calculator-toggle-container";
const toggleLabel = document.createElement("span");
toggleLabel.textContent = "¿Percibe la pensión máxima?";
toggleLabel.className = "calculator-toggle-label";
toggleContainer.appendChild(toggleLabel);
const toggleSwitch = document.createElement("label");
toggleSwitch.className = "calculator-toggle-switch";
const toggleInput = document.createElement("input");
toggleInput.type = "checkbox";
toggleSwitch.appendChild(toggleInput);
const toggleSlider = document.createElement("span");
toggleSlider.className = "calculator-toggle-slider";
toggleSwitch.appendChild(toggleSlider);
toggleContainer.appendChild(toggleSwitch);
container.appendChild(toggleContainer);
// 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 actual";
container.appendChild(result);
// Funcionalidad para el botón
button.addEventListener("click", () => {
const value = parseFloat(input.value);
const isMaxPension = toggleInput.checked;
if (isNaN(value) || value < 0) {
result.textContent = "Valor incorrecto";
} else {
const factor = isMaxPension ? 1.03 : 1.028;
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;
}
html`${calculator}`
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.
