From 75e802e5b27425db95d000f714e3b3363a5e1a9c Mon Sep 17 00:00:00 2001 From: Dominic DiTaranto Date: Sun, 22 Sep 2024 21:30:28 -0400 Subject: inital commit --- static/fretboard.png | Bin 0 -> 4468 bytes static/main.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++ static/main.js | 29 ++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 static/fretboard.png create mode 100644 static/main.css create mode 100644 static/main.js (limited to 'static') diff --git a/static/fretboard.png b/static/fretboard.png new file mode 100644 index 0000000..eab2b88 Binary files /dev/null and b/static/fretboard.png differ diff --git a/static/main.css b/static/main.css new file mode 100644 index 0000000..63f6bc7 --- /dev/null +++ b/static/main.css @@ -0,0 +1,94 @@ +.fretboard-container { + position: relative; + padding: 30px; + padding-left: 50px; +} + +.fretboard-container div { + position: absolute; + height: 20px; + width: 30px; +} + +.fretboard-container div div { + width:100%; + height: 100%; + float:left; + position: relative; +} + +.e { + top: 20px +} + +.b { + top: 60px; +} + +.g { + top: 100px; +} + +.d { + top: 140px; +} + +.a { + top: 180px; +} + +.E { + top: 220px; +} + +.zero { + left: 10px; +} + +.one { + left: 70px; +} + +.two { + left: 125px +} + +.three { + left: 177px; +} + +.four { + left: 230px; +} + +.five { + left: 282px; +} + +.six { + left: 335px; +} + +.seven { + left: 385px; +} + +.eight { + left: 438px; +} + +.nine { + left: 491px; +} + +.ten { + left: 542px; +} + +.eleven { + left: 597px; +} + +.twelve { + left: 647px; +} \ No newline at end of file diff --git a/static/main.js b/static/main.js new file mode 100644 index 0000000..4fcb1bd --- /dev/null +++ b/static/main.js @@ -0,0 +1,29 @@ +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 += '' + chord + ' '; + chordCount++ + } +} -- cgit v1.2.3-70-g09d2