NDEX Studio: Pure

ESTRUCTURA (NDEX) Compila a HTML

box Contenedor (id: "app") {
    
    crown Titulo (size: 1) { "Calculadora NDEX" }
    
    box DisplayBox {
        flat Resultado (id: "res") { "0" }
    }

    box Teclado {
        trigger Boton (val: "1") { "1" }
        trigger Boton (val: "2") { "2" }
        trigger Boton (val: "3") { "3" }
        trigger Boton (action: "sumar") { "+" }
        trigger Boton (action: "igual", id: "btn-igual") { "=" }
    }

    flat Footer { "Solo estructura, sin estilos inline." }
}

DISEÑO (CSS) Estilos Nativos

body { font-family: sans-serif; background: #eee; display: flex; justify-content: center; padding-top: 50px; }

/* En NDEX, el nombre del elemento es su Clase */
.Contenedor {
    background: #333; color: white; padding: 20px;
    border-radius: 10px; width: 250px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.Titulo { text-align: center; margin-top: 0; color: #ff9800; }

.DisplayBox {
    background: #222; padding: 10px; 
    text-align: right; font-size: 2em; margin-bottom: 15px;
    border: 1px solid #444; border-radius: 5px;
}

.Teclado {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}

.Boton {
    padding: 15px; background: #555; color: white;
    border: none; border-radius: 3px; cursor: pointer;
    font-size: 1.2em;
}
.Boton:hover { background: #666; }

#btn-igual { background: #ff9800; color: black; font-weight: bold; }

LÓGICA (JS) DOM Manipulation

// Seleccionamos elementos creados por NDEX usando sus IDs o Clases
const display = document.getElementById('res');
const botones = document.querySelectorAll('.Boton');

let cuenta = 0;

botones.forEach(btn => {
    btn.addEventListener('click', () => {
        // NDEX pasa atributos extra como atributos HTML data- o directos
        // En este prototipo, leemos el texto del botón por simplicidad
        const texto = btn.innerText;
        
        if(texto === "=") {
            alert("Lógica JS separada funcionando");
        } else if (texto === "+") {
            display.innerText += " + ";
        } else {
            if(display.innerText === "0") display.innerText = texto;
            else display.innerText += texto;
        }
    });
});