Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Joseph Greco
Joseph Greco
13,405 Points

I want to make a Capo-Chord Converter for Guitar.

I want to make an App where you can input a music chord and a capos fret placement on your guitar, then you will be shown how that chord is played at that capos location.

Heres a simple image of a table showing how to play chords with different capo placement,

https://www.google.ca/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiijbrcm5DOAhXkxYMKHURXCIMQjRwIBw&url=http%3A%2F%2Fwww.theguitarcapo.com%2Fguitar-capo-chart%2F&bvm=bv.127984354,d.amc&psig=AFQjCNGjQ4u_NhP4Jh2t1AwmXeL42uHiBA&ust=1469590653117116

However often times some chords are hard to find conversions for. Id like to make an in depth table of almost all capo-chord combinations then create an interface where users can access it easily.

Im thinking Javascript/jQuery would be my best bet but I'm overwhelmed on how to start. Should I create an HTML table in a separate document with all the data then access its specific columns and rows based upon what the user inputs? Any advice would help to send me into the right direction.

Thanks,

1 Answer

jag
jag
18,266 Points
jag
jag
18,266 Points

Fetching data as a HTML Table won't do, it's something no one will do or has done that I've seen. You would need JSON.

I wouldn't really be able to say much about the converting function since I am not aware of how the capochord conversion works.

Every time you want to start a project you need to break down problems into small ones so you can tackle them.

My thoughts would be you will use objects, arrays, loops and inputs. jQuery will do where it takes the two values and returns the converted value.

If you want a full in-depth of all the conversions when a picture of a table would do but since you want to create something users can use then I'd suggest not focusing on a table but rather letting the user select / type a list of values and get a converted value back.

  1. Get user inputs
  2. Convert inputs
  3. Show converted values

As simple as it gets.

conversionObject.js 
{
"Capo": {
  "A":{
    "NO_CAPO":"A",
    "1-FRET":"Bb"
    ...
    "7-FRET":"E"
  }
  "B":{},
  ...
  "Key":{
    "CAPO_POSITION":"CONVERSION"
  }
}
}
Joseph Greco
Joseph Greco
13,405 Points

Thanks for responding, Jag.

I converted the chart into JSON data:

[
  {
    "A": {
      "NO_CAPO" : "A",
      "FRET1" : "Bb",
      "FRET2" : "B",
      "FRET3" : "C",
      "FRET4" : "C#",
      "FRET5" : "D",
      "FRET6" : "Eb",
      "FRET7" : "E"
    }
  },
  {
    "B": {
      "NO_CAPO" : "B",
      "FRET1" : "C",
      "FRET2" : "C#",
      "FRET3" : "D",
      "FRET4" : "Eb",
      "FRET5" : "E",
      "FRET6" : "F",
      "FRET7" : "F#"
    }
  },
  {
    "C": {
      "NO_CAPO" : "C",
      "FRET1" : "C#",
      "FRET2" : "D",
      "FRET3" : "Eb",
      "FRET4" : "E",
      "FRET5" : "F",
      "FRET6" : "F#",
      "FRET7" : "G"
     }
   },
   {
     "D": {
       "NO_CAPO" : "D",
       "FRET1" : "Eb",
       "FRET2" : "E",
       "FRET3" : "F",
       "FRET4" : "F#",
       "FRET5" : "G",
       "FRET6" : "G#",
       "FRET7" : "A"
     }
   },
   {
      "E": {
        "NO_CAPO" : "E",
        "FRET1" : "F",
        "FRET2" : "F#",
        "FRET3" : "G",
        "FRET4" : "G#",
        "FRET5" : "A",
        "FRET6" : "Bb",
        "FRET7" : "B"
      }
    },
    {
       "F": {
         "NO_CAPO" : "F",
         "FRET1" : "F#",
         "FRET2" : "G",
         "FRET3" : "G#",
         "FRET4" : "A",
         "FRET5" : "Bb",
         "FRET6" : "B",
         "FRET7" : "C"
       }
     },
     {
        "G": {
          "NO_CAPO" : "G",
          "FRET1" : "G#",
          "FRET2" : "A",
          "FRET3" : "Bb",
          "FRET4" : "B",
          "FRET5" : "C",
          "FRET6" : "C#",
          "FRET7" : "D"
       }
     }
   ]

I ran it through a validator and everything checks out. Then I created a xhr request and parsed the response to log to my console. My next step will be writing the jQuery to capture a users input from two select menus once submit is clicked, then append the result into the output <div>.

Here is this HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Capo Chord Conversion</title>
  </head>
  <body>
    <header>
    </header>
      <h1>Capo Chord Converter</h1>
    <div>
      <form id="chordConverter">
        <label>
          <strong>You play:</strong>
            <select id="chord">
              <option value="0">A</option>
              <option value="1">B</option>
              <option value="2">C</option>
              <option value="3">D</option>
              <option value="4">E</option>
              <option value="5">F</option>
              <option value="6">G</option>
            </select>
        </label>
        <label>
          <strong>With capo on fret:</strong>
            <select id="capo">
              <option value="NO_CAPO">No Capo</option>
              <option value="FRET1">1</option>
              <option value="FRET2">2</option>
              <option value="FRET3">3</option>
              <option value="FRET4">4</option>
              <option value="FRET5">5</option>
              <option value="FRET6">6</option>
              <option value="FRET7">7</option>
            </select>
      </label>
             <input type="submit" value="Go">
      </form>
    </div>
      <h3>You will Hear:</h3>
    <div id="output">

    </div>
    <footer>
    </footer>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="js/conversionCode.js"></script>
  </body>
</html>

The jQuery:

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);

        var chord = ($('#chord').find(":selected").val());
        var capo = ($('#capo').find(":selected").val());

        $('output').append("<p></p>").text(data[chord].capo);



      }
    };

    xhr.open('GET', 'data/conversionData.json');
    xhr.send();

I tested my chord and capo variables to display as alerts which worked. I know this code is incorrect but I'm a little stumped here. I still need to add the submit function as well. Any ideas?