Editor de Código con Tutorial Interactivo y Ejemplo

✖

Tutorial: Cómo usar el Editor de Código

Paso 1: Escribe tu código JavaScript en el área de texto.

Paso 2: Haz clic en "Ejecutar Código" para ver los resultados en el área de salida.

Paso 3: Usa "Limpiar Output" para borrar los resultados anteriores.

Paso 4: Experimenta con diferentes funciones y elementos DOM.

Ejemplo: Aquí tienes un ejemplo de código que crea un elemento interactivo:

function crearBotonCambiante() {
  const boton = document.createElement('button');
  boton.textContent = 'Haz clic en mí';
  boton.style.padding = '10px';
  boton.style.margin = '10px';
  
  let contador = 0;
  boton.addEventListener('click', () => {
    contador++;
    boton.textContent = `Clics: ${contador}`;
    boton.style.backgroundColor = `hsl(${contador * 20}, 100%, 50%)`;
  });
  
  return boton;
}

document.getElementById('output').appendChild(crearBotonCambiante());