Papitas Fritas - Botón Inicio Arrastrable (Corregido)

SnippetGen Generador de Código HTML/CSS/JS Crea Código al Instante Selecciona un concepto y obtén un ejemplo funcional de HTML, CSS y JavaScript listo para usar o estudiar. Buscar snippet (ej: ‘botón’, ‘formulario’, ‘hover’…) Conceptos Disponibles Abreviatura (abbr) Acordeón simple (mostrar/ocultar contenido) Agrupar elementos (fieldset, legend) Agrupar selectores (h1, h2) Alerta al enviar un formulario Alternar una clase CSS (classList.toggle) Ámbito de variables (scope) Ancho de borde Animación simple: cambiar color (keyframes) Animación simple: mover elemento Añadir elemento al DOM (appendChild) Añadir una clase CSS (classList.add) Aplicar animación (animation name, duration) Aplicar estilo a un ID específico Aplicar estilo a un tipo de elemento (ej: p) Aplicar estilo a una clase Área de texto (textarea) Atributo ‘name’ en formularios Atributo ‘value’ en inputs Autocompletado (autocomplete attribute) Bloque de cita (blockquote) Botón de envío (input type submit) Botón de reseteo (input type reset) Botón que cambia el texto de un párrafo al hacer clic Botón simple (button tag) Bucle do…while Bucle for Bucle while Calculadora simple (suma) Cambiar color de fondo Cambiar color de texto Cambiar el color de fondo de la página con un botón Campo de búsqueda (input type search) Campo de entrada de color (input type color) Campo de entrada de contraseña (input type password) Campo de entrada de email (input type email) Campo de entrada de fecha (input type date) Campo de entrada de rango (input type range) Campo de entrada de texto (input type text) Campo de entrada numérico (input type number) Campo de solo lectura (readonly attribute) Campo de subida de archivos (input type file) Campo de teléfono (input type tel) Campo de URL (input type url) Campo obligatorio (required attribute) Campo oculto (input type hidden) Casilla de verificación (input type checkbox) Centrar texto horizontalmente (text-align center) Centrar un elemento de bloque (margin auto) Cita en línea (q) Código en línea (code) Color de borde Colores CSS: HSL, HSLA Colores CSS: nombre, HEX, RGB, RGBA Comentario de una línea en JS Comentario en CSS Comentario en HTML Comentario multilínea en JS Comprobar si existe una clase (classList.contains) Comprobar si una checkbox está marcada Concatenación de strings (+) Condicional if Condicional if…else Condicional if…else if…else Contador simple con botones + y – Convertir a mayúsculas (toUpperCase) Convertir a minúsculas (toLowerCase) Crear un clearfix Crear un nuevo elemento HTML (createElement) Crear una lista dinámica desde un input Declarar constante (const) Declarar variable (let) Definir una función simple Delegación de eventos (básico) Desactivar un campo (disabled attribute) Detener propagación de evento (event.stopPropagation) Dirección (address) Dirección de animación (animation-direction) Efecto hover con JavaScript (cambiar clase) Efecto hover: cambiar color de fondo Efecto hover: cambiar color de texto Efecto hover: escalar elemento (transform scale) Efecto hover: rotar elemento (transform rotate) Efecto hover: subrayar texto Ejecutar función al hacer clic (addEventListener ‘click’) Ejecutar función al hacer clic (onclick attribute) El objeto ‘event’ Elemento
y Elemento