codebadges

Badges de code

Bonjour développeur ... il est temps de montrer vos progrès et vos réalisations!

Voir CodeBadges en action

Commencer

Monnaie

 <!-- 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 >

IMPORTANT: CodeBadges JS s'appuie sur jQuery JS, vous devez donc charger jQuery JS avant Codebadges JS

Usage

Html.

Ajoutez un seul badge ...

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

Ou une rangée de badges ...

 < 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.

Activez maintenant vos badges avec une ligne de JS ...

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

Activez CodeBadges avec votre nom d'utilisateur principal codeBadges("username") , puis chaîne sur les badges que vous avez dans votre HTML. Vous avez un nom d'utilisateur différent pour certaines plateformes? Pas de soucis, passez simplement ce nom d'utilisateur dans la plate-forme, par exemple .github("differentName") .

Personnalisation

Petits badges.

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

Ajoutez simplement l' badge-small à vos badges pour les rendre plus petits.

Couleurs personnalisées.

Vous avez une palette de couleurs stricte et vous voulez tous vos badges en rose? Qui suis-je pour juger ?!

Ajoutez vos propres cours ...

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

Dans votre propre CSS, ajoutez simplement une classe de badge de code pour .pink-badge comme l'exemple ci-dessus.

Appliquer à votre HTML ...

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

Badges

Disponible.

• codécade
• école de codes
• codewars
• freecodecamp
• github
• cabane dans les arbres

Demandes.

Vous voulez un nouveau badge ajoutant? Envoyez une demande via les problèmes ou soumettez une demande de traction. N'oubliez pas d'inclure votre nom d'utilisateur sur le site demandé afin qu'il puisse en présenter. Le site doit avoir des profils publics afin que les informations utilisateur puissent être demandées via une API ou grattées à partir d'une page de profil public.

Licence

La licence du MIT (MIT)

Copyright (C) Codemzy 2018