├── console-output.png
├── README.md
├── index.html
├── consoleBuddy.min.js
└── consoleBuddy.js
/console-output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pattle/console-buddy/HEAD/console-output.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # console-buddy
2 | A small JavaScript library for styling console.log()
3 |
4 | Start by including the consoleBuddy.js script on your page
5 |
6 |
7 |
8 | You can then start using the library
9 |
10 | $consoleBuddy.log('This is a success message', 'success');
11 |
12 | Please consult index.html for a full list of examples
13 |
14 | 
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | consoleBuddy
6 |
7 |
8 |
9 |
10 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/consoleBuddy.min.js:
--------------------------------------------------------------------------------
1 | var $consoleBuddy={log:function(e,t){var n="";var r="";var i="";if(!e){console.log("Please make sure you enter a message (e.g $consoleBuddy.log('Hello World');");return false}if(t==="uppercase"){n="text-transform: uppercase"}if(t==="success"){n="color: #ffffff; background: #9dcf24; border: 1px solid #7eae0c;"}if(t==="warning"){n="color: #ffffff; background: #de8e0f; border: 1px solid #b8760e;"}if(t==="error"){n="color: #ffffff; background: #d93625; border: 1px solid #a71c0d;"}if(t==="info"){n="color: #ffffff; background: #1d69db; border: 1px solid #0f4ba6;"}if(t==="pink"){n="color: #ffffff; background: #db178a; border: 1px solid #ae0c6b;"}if(t==="chalkboard"){n="color: #ffffff; background: #000000; border: 1px solid #000000;"}if(t==="tiger"){n="color: #ffffff; background: repeating-linear-gradient(-45deg, #e5910d, #e5910d 10px, #000000 10px, #000000 20px); border: 1px solid #000000;"}if(t==="rainbow"){n="color: #000000; background-image: linear-gradient(90deg, #ff0000 0%, #ffff00 15%, #00ff00 30%, #00ffff 50%, #0000ff 65%, #ff00ff 80%, #ff0000 100%); border: 1px solid #000000;"}if(e.search(/<(\/?b>)/img)>-1){r+="font-weight: bold;";i+="font-weight: normal;"}if(e.search(/<(\/?i>)/img)>-1){r+="font-style: italic;";i+="font-style: normal;"}if(e.search(/<(\/?u>)/img)>-1){r+="text-decoration: underline;";i+="text-decoration: none;"}if(n&&r){console.log("%c "+e.replace(/(<\/?[uib]>)+/img,"%c")+" ",n+"border-right: none; border-radius: 3px 0 0 3px;",n+r+"border-left: none; border-right: none;",n+i+"border-left: none; border-radius: 0 3px 3px 0;")}else if(n){console.log("%c "+e+" ",n+"border-radius: 3px;")}else if(r){console.log(e.replace(/(<\/?[uib]>)+/img,"%c"),r,i)}else{console.log(e)}}}
--------------------------------------------------------------------------------
/consoleBuddy.js:
--------------------------------------------------------------------------------
1 | var $consoleBuddy = {
2 | log: function($message, $type) {
3 |
4 | //Define some variables we'll use
5 | var $typeStyle = '';
6 | var $tagStyle = '';
7 | var $tagUnStyle = '';
8 |
9 | //We need a message to be able to do anything
10 | if(!$message) {
11 | console.log("Please make sure you enter a message (e.g $consoleBuddy.log('Hello World');");
12 | return false;
13 | }
14 |
15 | if($type === 'uppercase') {
16 | $typeStyle = 'text-transform: uppercase';
17 | }
18 | if($type === 'success') {
19 | $typeStyle = 'color: #ffffff; background: #9dcf24; border: 1px solid #7eae0c;';
20 | }
21 | if($type === 'warning') {
22 | $typeStyle = 'color: #ffffff; background: #de8e0f; border: 1px solid #b8760e;';
23 | }
24 | if($type === 'error') {
25 | $typeStyle = 'color: #ffffff; background: #d93625; border: 1px solid #a71c0d;';
26 | }
27 | if($type === 'info') {
28 | $typeStyle = 'color: #ffffff; background: #1d69db; border: 1px solid #0f4ba6;';
29 | }
30 | if($type === 'pink') {
31 | $typeStyle = 'color: #ffffff; background: #db178a; border: 1px solid #ae0c6b;';
32 | }
33 | if($type === 'chalkboard') {
34 | $typeStyle = 'color: #ffffff; background: #000000; border: 1px solid #000000;';
35 | }
36 | if($type === 'tiger') {
37 | $typeStyle = 'color: #ffffff; background: repeating-linear-gradient(-45deg, #e5910d, #e5910d 10px, #000000 10px, #000000 20px); border: 1px solid #000000;';
38 | }
39 | if($type === 'rainbow') {
40 | $typeStyle = 'color: #000000; background-image: linear-gradient(90deg, #ff0000 0%, #ffff00 15%, #00ff00 30%, #00ffff 50%, #0000ff 65%, #ff00ff 80%, #ff0000 100%); border: 1px solid #000000;';
41 | }
42 |
43 | //Check to see if tag is present in the message
44 | if($message.search(/<(\/?b>)/img) > -1) {
45 | $tagStyle += 'font-weight: bold;';
46 | $tagUnStyle += 'font-weight: normal;';
47 | }
48 |
49 | //Check to see if tag is present in the message
50 | if($message.search(/<(\/?i>)/img) > -1) {
51 | $tagStyle += 'font-style: italic;';
52 | $tagUnStyle += 'font-style: normal;';
53 | }
54 |
55 | //Check to see if tag is present in the message
56 | if($message.search(/<(\/?u>)/img) > -1) {
57 | $tagStyle += 'text-decoration: underline;';
58 | $tagUnStyle += 'text-decoration: none;';
59 | }
60 |
61 | //Do we have both a type and
62 | if($typeStyle && $tagStyle) {
63 | console.log('%c ' + $message.replace(/(<\/?[uib]>)+/img, "%c") + ' ', $typeStyle + 'border-right: none; border-radius: 3px 0 0 3px;', $typeStyle + $tagStyle + 'border-left: none; border-right: none;', $typeStyle + $tagUnStyle + 'border-left: none; border-radius: 0 3px 3px 0;');
64 | } else if($typeStyle) {
65 | console.log('%c ' + $message + ' ', $typeStyle + 'border-radius: 3px;');
66 | } else if($tagStyle) {
67 | console.log($message.replace(/(<\/?[uib]>)+/img, "%c"), $tagStyle, $tagUnStyle);
68 | } else {
69 | console.log($message);
70 | }
71 | }
72 | }
--------------------------------------------------------------------------------