var colors = ['red', 'green', 'blue', 'grey']
var stats = document.getElementById("stats")

function generateFretMarkers(chordMap, counts) {
    var chordCount = 0;
    for (const [chord, notes] of Object.entries(chordMap)) {
        for (let i = 0; i < notes.length; i++) {
            var fret = document.getElementById(notes[i]);
            var fretMarker = document.createElement("div");
            fretMarker.style.backgroundColor = colors[chordCount]

            if (counts[notes[i]] == 2) {
                fretMarker.style.width = "50%"
            }

            if (counts[notes[i]] == 3) {
                fretMarker.style.width = "33%"
            }

            if (counts[notes[i]] == 4) {
                fretMarker.style.width = "25%"
            }

            fret.appendChild(fretMarker)
        }
    stats.innerHTML += '<button style="height:20px; width:20px; background-color:' + colors[chordCount] + ';"></button>' + chord + '     ';
    chordCount++
    }
}