JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="Intro">
</div>
<!--
  <script>
    chord('A1', 'A', A());
  </script>
  <script>
    chord('G1', 'G', G());
  </script>
  <script>
    chord('Em1', 'Em', Em());
  </script>
</div>
<div id="Verse">
  <script>
    chord('D1', 'D', D());
  </script>
  <script>
    chord('A1', 'A', A());
  </script>
  <script>
    chord('C1', 'C', C());
  </script>
  <script>
    chord('G1', 'G', G());
  </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 {
  font-family: Arial;
  font-weight: bold;
  font-size: 14px;
  width: 80px;
  margin: 0 auto;
  border: 1px inset #eee;
  text-align: center;
}

JavaScript

var Bmsus2_A = [22, 22, 3, 3, 22, 22];
var A = [-1, 0, 2, 2, 2, 0];
var G = [3, 2, 0, 0, 3, 3];
var Gm = [33, 3, 3, 33, 33, 33];
var Em = [0, 2, 2, 0, 0, 0];
var D = [-1, 0, 0, 2, 3, 2];
var C = [-1, 3, 2, 0, 1, 0];

function setChord(str6, str5, str4, str3, str2, str1) { 
  var domPath = 'http://chords.netcentrx.net/img/halfsize/f';
  var setFrets =  ' <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'; 
  return setFrets;              
}

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

testChord(Gm);
testChord(G);

function testChord2(divID, chordDesc, chordName)    {
  var setChordDiv = '<div class="chord" id="' + divID + '">\n' +
  ' <div class="chord">\n' +
  '  <div class="chordName">' + chordDesc + '</div>';
  return setChordDiv;                  
  var myObject = setChord.apply(myObject, chordName);  
  var setChordDiv2 = '   </div>'+
  ' </div>'+
  '</div>';
  return setChordDiv2;                  
  $('body').append(setChordDiv+myObject+setChordDiv2);  
}

testChord2('Gm1','Gm', Gm);