codebadges

Insignias de código

Hola desarrollador ... ¡Es hora de mostrar tu progreso y logros!

Ver CodeBadges en acción

Empezar

CDN

 <!-- codeBadges minified CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.css " >
<!-- codeBadges minified JavaScript -->
< script src =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.js " > </ script >

IMPORTANTE: CodeBadges JS se basa en jQuery JS, por lo que debe cargar jQuery JS antes de CodeBadges JS

Uso

Html.

Agregue una sola insignia ...

 < div class =" code-badge freecodecamp " > </ div >

O una fila de insignias ...

 < div align =" center " >
  < div class =" code-badge freecodecamp " > </ div >
  < div class =" code-badge github " > </ div >
  < div class =" code-badge codeschool " > </ div >
  < div class =" code-badge codecademy " > </ div >
  < div class =" code-badge treehouse " > </ div >
  < div class =" code-badge codewars " > </ div >
</ div > 

Javascript.

Ahora active sus insignias con una línea de js ...

 codeBadges ( "codemzy" ) . freecodecamp ( ) . github ( ) . codeschool ( ) . codecademy ( ) . treehouse ( "ryancarson" ) . codewars ( ) ;

Active CodeBadges con su nombre de usuario principal codeBadges("username") y luego encadena las insignias que tiene en su HTML. ¿Tienes un nombre de usuario diferente para algunas plataformas? No se preocupe, solo pase ese nombre de usuario a la plataforma, por ejemplo, .github("differentName") .

Personalización

Pequeñas insignias.

 < div class =" code-badge badge-small freecodecamp " > </ div >

Simplemente agregue la clase badge-small a sus insignias para que sean más pequeñas.

Colores personalizados.

¿Tienes un esquema de color estricto y quieres todas tus insignias en rosa? ¿Quién soy yo para juzgar?

Agrega tus propias clases ...

. code-badge . pink-badge . outer {
  background-color : # DB0A5B ;
}

En su propio CSS, simplemente agregue una clase de insignia de código para .pink-badge como el ejemplo anterior.

Aplicar a su HTML ...

 < div class =" code-badge freecodecamp pink-badge " > </ div >

Insignias

Disponible.

• Codecademy
• escolar
• codewars
• Freecodecamp
• github
• casa del árbol

Solicitudes.

¿Quieres una nueva insignia que agrega? Envíe una solicitud a través de los problemas o envíe una solicitud de extracción. No olvide incluir su nombre de usuario en el sitio solicitado para que pueda presentarse. El sitio debe tener perfiles públicos para que la información del usuario se pueda solicitar a través de una API o raspada de una página de perfil público.

Licencia

La licencia del MIT (MIT)

Copyright (c) 2018 Codemzy