JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<script src="https://fonts.googleapis.com/css?family=Candal|Francois+One"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chord">
<script>
if(getQS('chord')!=='') {
    console.log(getQS('chord'));
    /* getChord(getQS('chord'));*/
}
getChord(A);
</script>
</div>

CSS

.chord {display: inline-block;}
.fretboard {float: left;background: url(http://chords.netcentrx.net/img/halfsize/fretboard.png) no-repeat;width: 75px;height: 125px;padding-left: 4px;}
.str6 {margin-left: 0.5px;margin-top: -2px;}
.str5 {margin-left: -0.5px;margin-top: -2px;}
.str4 {margin-left: -3px;margin-top: -2px;}
.str3 {margin-left: -3.5px;margin-top: -2px;}
.str2 {margin-left: -3px;margin-top: -2px;}
.str1 {margin-left: -2px;margin-top: -2px;}
.chordName {background:#777;color: #fff;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666;
font-size: 18px;font-family: 'Arial Bold MT','Candal', 'Francois One', sans-serif;text-align:center;line-height:1.5;border:1px #fff groove;width:80px;font-weight:normal;margin-bottom:5px;}

JavaScript

// A
var A = ["A",-1,0,2,2,2,0];
var Am = ["Am",-1,0,2,2,1,0];
// B
var Bmsus2_A = ["Bmsus2_A",22,22,3,3,22,22];
var B = ["B",22,22,3,3,3,22];
var Bm = ["Bm",22,22,3,3,2,22];
// C
var C = ["C",-1,3,2,0,1,0];
var Cm = ["Cm",33,33,3,3,33,33];
// D
var D = ["D",-1,0,0,2,3,2];
var Dm = ["Dm",-1,0,0,2,3,1];
// E 
var E = ["E",0,2,2,1,0,0];
var Em = ["Em",0,2,2,0,0,0];
// F
var F = ["F",11,3,3,2,11,11];
var Fm = ["Fm",11,3,3,11,11,11];
// G
var G = ["G",3,2,0,0,3,3];
var Gm = ["Gm",33,3,3,33,33,33];

function getQS(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
}

function setChord(chordDesc, str6, str5, str4, str3, str2, str1) { 
  var domPath = 'http://chords.netcentrx.net/img/halfsize/f';
  var setFrets =    '<div class="chord" id="chord">\n' +
                    ' <div class="chord">\n' +
                    '  <div class="chordName">' + chordDesc + '</div>'+
                    '   <div class="fretboard">\n' +
                    '    <img class="str6" src="' + domPath + str6 + '.png" />\n' +
                    '    <img class="str5" src="' + domPath + str5 + '.png" />\n' +
                    '    <img class="str4" src="' + domPath + str4 + '.png" />\n' +
                    '    <img class="str3" src="' + domPath + str3 + '.png" />\n' +
                    '    <img class="str2" src="' + domPath + str2 + '.png" />\n' +
                    '    <img class="str1" src="' + domPath + str1 + '.png" />\n' +
                    '   </div>\n'+ 
                    '  </div>'+
                    ' </div>'+
                    '</div>';                  
  return setFrets;              
}

function getChord(chordName)    {
  var myObject = setChord.apply(myObject, chordName);  
  $('body').append(myObject);  
}