Thursday, March 21, 2024

HTML Help for Guitar Chord Changes


We committed to learning the guitar (again).  However, this time we are taking a more methodical approach vs. just getting frustrated that we don't sound like Monte Montgomery.   

The internet is helpful and one of our favorite resources has been Lauren Bateman who encourages "Embace the Suck".   Lauren encourages other things too... like practicing chord changes with a metronome and keeping a progress log.  These two suggestions are huge.  We created some simple HTML markup to help us practice random chord changes and, gotta say, you show more results with practice than with excuses.   

Just copy and save the HTML markup between the "-----"s below on your hard drive as "random_guitar_chords.html" and it should work in any web browser.    NOTE:  There is no spyware, tracking, cookies, disk writes, etc.  Feel free to edit the HTML to meet your needs.

 Good luck and see you on the stage!


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Guitar Chords</title>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    #chordDisplay {
        font-size: 36px;
        margin-top: 50px;
    .checkbox-container {
        margin-bottom: 5px;

<h1>Select Guitar Chords</h1>

<form id="chordForm">
    <div class="checkbox-container">
        <input type="checkbox" id="A" value="A" checked>
        <label for="A">A</label>
    <div class="checkbox-container">
        <input type="checkbox" id="C" value="C" checked>
        <label for="C">C</label>
    <div class="checkbox-container">
        <input type="checkbox" id="D" value="D" checked>
        <label for="D">D</label>
    <div class="checkbox-container">
        <input type="checkbox" id="E" value="E" checked>
        <label for="E">E</label>
    <div class="checkbox-container">
        <input type="checkbox" id="Em" value="Em" checked>
        <label for="Em">Em</label>
    <div class="checkbox-container">
        <input type="checkbox" id="F" value="F" checked>
        <label for="F">F</label>
    <div class="checkbox-container">
        <input type="checkbox" id="F#m" value="F#m" checked>
        <label for="F#m">F#m</label>
    <div class="checkbox-container">
        <input type="checkbox" id="G" value="G" checked>
        <label for="G">G</label>

<p><strong>!!! ALWAYS USE A METRONOME AND LOG YOUR PROGRESS!!!</strong></p>

<label for="initialChordsSelect">How many chords to cycle:</label><br>
<select id="initialChordsSelect">
    <option value="2" selected>2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>


<label for="timeSelect">Seconds until next random chords:</label><br>
<select id="timeSelect">
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
    <option value="60" selected>60</option>
    <option value="65">65</option>
    <option value="70">70</option>
    <option value="75">75</option>
    <option value="80">80</option>
    <option value="85">85</option>
    <option value="90">90</option>
    <option value="95">95</option>
    <option value="100">100</option>
    <option value="105">105</option>
    <option value="110">110</option>
    <option value="115">115</option>
    <option value="120">120</option>


<button onclick="startDisplay()">Let's Jam!</button>

<div id="chordDisplay"></div>
<div id="timer"></div>
<div id="totalMinutes"></div>

var startTime;
var timerInterval;

function startDisplay() {
    clearInterval(timerInterval); // Clear previous interval
    document.getElementById("chordDisplay").textContent = ""; // Clear previous chords
    document.getElementById("timer").textContent = ""; // Clear previous timer
    startTime = new Date().getTime();

function displayChords() {
    var chords = [];
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    for (var i = 0; i < checkboxes.length; i++) {

    var numInitialChords = parseInt(document.getElementById("initialChordsSelect").value);
    var initialChords = [];
    for (var i = 0; i < numInitialChords; i++) {
        var randomChord;
        do {
            randomChord = chords[Math.floor(Math.random() * chords.length)];
        } while (initialChords.includes(randomChord));

    document.getElementById("chordDisplay").textContent = initialChords.join(" ");

function displayTimer() {
    var timeInSeconds = parseInt(document.getElementById("timeSelect").value);
    var count = timeInSeconds;
    timerInterval = setInterval(function() {
        if (count <= 0) {
            document.getElementById("timer").textContent = "";
            setTimeout(displayTimer, 1000); // Restart the timer after displaying new chords
        } else {
            document.getElementById("timer").textContent = "SPACEBAR for immediately ELSE selecting new chords in: " + count + " seconds";
    }, 1000);

    function updateTimeElapsed() {
        var currentTime = new Date().getTime();
        var elapsedTime = (currentTime - startTime) / (1000 * 60);
        document.getElementById("totalMinutes").textContent = "Total practice time in minutes: " + elapsedTime.toFixed(1);

document.body.addEventListener('keydown', function(e) {
    if (e.keyCode === 32) { // Spacebar key code
        document.getElementById("chordDisplay").textContent = ""; // Clear previous chords
        document.getElementById("timer").textContent = ""; // Clear previous timer
        e.preventDefault(); // Prevent default spacebar behavior (scrolling)