#code: js

[thecozycorgi]

Codember2024 - Pulse

Buenas a todos, para este challenge del codember2024 organizado por @elalmacen-rp e inspirándome en pulsos, he decidido compartir un código en el que vengo trabajando hace tiempo y es un código que permite hacer que el código bbcode de la lanzada de dados se vuelva un HTML fácil de estilizar con CSS. Además, también permite modificar las lanzadas de dados para que, en vez de un número se muestre información en HTML como se muestra en la imagen permitiendo personalizar aún más cada lanzada de dado.

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Ante cualquier duda, mis ask están abiertos.

Códigos

Nota: en codepen está el código HTML ya "transformado" para que puedan visualizar el estilo y cómo se vería. Además, no se puede visualizar los iconos de font awesome por cuestiones de licencia.

Para instalar correctamente, copiar el código JS en un nuevo JavaScript habilitado en todas las páginas para que también se pueda ver en el historial de mensajes (preview).

Crear un dado con el nombre 'Pulse' de seis caras, para visualizar el ejemplo. Lanzar dados de manera normal.

Aquí os dejo un pequeño video para que puedan ver cómo crear los dados y agregarle información con el JSON para que se visualice una vez que se realizan las lanzadas de dados:

Pueden incluir todo el HTML que deseen, desde imágenes, más cajas interiores, etc.

Cada nombre de dado, en el ejemplo 'Pulse', agrega una nueva clase: roll-nombre (en el ejemplo, roll-pulse) permite personalizar cada lanzada de dados a gusto permitiendo más versatilidad a la hora de diseñar el mismo.

[thecozycorgi]

Codember2024 - Eclipse

Buenas a todos, para este desafío del codember2024 organizado por @elalmacen-rp e inspirándome en la famosa saga de Crepúsculo, he creado este código que permite crear una página HTML con información, fácil de completar y con filtros.

Es editable para cualquier información que quieran poner, en el ejemplo, son personajes canon, pero también puede servir para pokemones, criaturas, lugares, cualquier información narrativa que sea muy útil con un buen filtro.

He dejado los códigos tan comentados como me fue posible para que puedan realizar cualquier modificación y así lo puedan adaptar como más les guste.

Ninguno de los gifs utilizados es de mi autoría.

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Ante cualquier duda, mis ask están abiertos.

Código + Live Preview

[thecozycorgi]

Codember2024 - Orbit

Buenas a todos, para este prompt del codember2024 organizado por @elalmacen-rp e inspirándome en que todo orbita alrededor de los usuarios realice este código que permite traer la información de cualquier usuario ya sea a un post o a una plantilla para traer más información sobre el mismo, como su frase, ficha, etc, etc.

El código JS lo que hace es mapear el nombre de lo que queremos traer con el campo en el perfil del usuario. Para hacer eso más sencillo incluí un código que, basándose en el usuario fundador, trae todos los campos y su correspondiente identificador. Posteriormente, solo hay que usar el código HTML indicando el campo y el usuario, o, en caso de querer usarlo de manera general, indicando desde donde se encuentre el link al perfil del usuario, donde queremos que traiga toda la información.

El código también agrega el color del usuario como variable.

Todos los avatares utilizados pertenecen a @monoclegraphic.

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Ante cualquier duda, mis ask están abiertos. Espero que les resulte tan útil como me lo ha resultado a mi.

Código + Live Preview

[thecozycorgi]

Codember2024 - Echo

Buenas a todos, para este desafío del codember2024 organizado por @elalmacen-rp he creado un tablón de anuncios sencillo, cuyos datos se editan desde JS para simplificar edición (requiere tener previamente instalado el código de getUserData -con el JS es suficiente).

Ninguno de los gifs utilizados es de mi autoría.

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Ante cualquier duda, mis ask están abiertos.

Código + Live Preview

[thecozycorgi]

Codember2024 - Fragment

Buenas a todos, para este challenge del codember2024 organizado por @elalmacen-rp he preparado este código que actualiza con JS algunos campos del bloque de citación, spoiler, bloque de código y bloque oculto para que sea más editable por CSS. Adicionando, uno de mis códigos favoritos que permite copiar el código del bloque de código al hacer click en el botón "seleccionar código".

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Código JS - Código CSS (opcional) - Código HTML (para pruebas)