Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="chords">
  <h1>Guitar Chord Names</h1>
  <form id="notes-form">
    <fieldset>
      <legend>Enter fret numbers for your chord</legend>
      <label>6: <input class="note" id="note1" type="number" min="0" step="1" max="15" value="0" /></label>
      <label>5: <input class="note" id="note2" type="number" min="0" step="1" max="15" value="0" /></label>
      <label>4: <input class="note" id="note3" type="number" min="0" step="1" max="15" value="0" /></label>
      <label>3: <input class="note" id="note4" type="number" min="0" step="1" max="15" value="0" /></label>
      <label>2: <input class="note" id="note5" type="number" min="0" step="1" max="15" value="0" /></label>
      <label>1: <input class="note" id="note6" type="number" min="0" step="1" max="15" value="0" /></label> 
    </fieldset>
    <div>
      <input id="user-chord" type="submit" value="Submit" />
    </div>
  </form>

  <div id="note-output"></div>
  <div id="interval-output"></div>
  <!-- <div id="chord-intervals"></div> -->
</section>
<section class="chord-info">
  <!-- HARD-CODING THESE VALUES FOR NOW -->
  <div class="chord-details">
<!--     <h2>Hard-coded values for now</h2> -->
    <div>
      <p class="chord-name"><strong>Chord Name</strong>: </p>
      <p><span class="user-chord-name">Em11</span></p>
    </div>
    <div>
      <p class="chord-notes"><strong>Chord Notes</strong>: </p>
      <p><span class="user-chord-noyes">E G B D A</span></p>
    </div>
    <div>
      <p class="chord-name"><strong>Equal Chord(s)</strong>: </p>
      <p>A9sus</p>
      <p>D6sus add9</p>
      <p>G6 add9</p>
    </div>
  </div>
  
  <div class="scale-info">
    <h3>Scales that built a <span class="chord-root">m11</span> chord</h3>
    <!-- <ul class="chord-scales"> -->
    <li>Major scale, degree(s): <span class="deg">2nd</span>, <span class="deg">3rd</span>, <span class="deg">6th</span></li>
    <li>Major pentatonic scale, degree(s): <span class="deg">5th</span></li>
    <li>Country Blues scale, degree(s): <span class="deg">6th</span></li>
    <li>Major Bebop scale, degree(s): <span class="deg">2nd</span>, <span class="deg">3rd</span>, <span class="deg">6th</span></li>
    <li>Melodic Minor scale, degrees: <span class="deg">2nd</span></li>
    
      
    <!-- </ul> -->
    <hr>
    <li>Add a note about the only scales that I use!</li>
    <li>Lose the bullet points,</li>
    <li>explain "equal chords"</li>
    <li>explain what the Country Blues scale is</li>
    <li>explain that the Dorian Blues scale is the 2nd degree of the Major Bebop</li>
    <li>explain that the Dominant Bebop is the 6th degree of the Minor Bebop</li>
  </div>
  <p>Below is output from a fetch call for interval-distance.json as a test</p>
  <!-- <div id="output"></div> -->
</section>
              
            
!

CSS

              
                *,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

section {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

// form {
//   text-align: center;
//   margin: 0 auto;
// }

fieldset {
  display: inline-block;
  width: max-content;
}

// label + label {
//   margin-left: 2.5em;
// }

input[type='number'] {
  font-size: 1.125rem;
  width: 2.5em;
  height: 1.25em;
  padding: 0.25em 0.5em;
  // margin-left: 0.5rem;
  color: red;
}

.notes, .intervals {
  display: inline-block;
  padding: 1em 0.5em;
}

// .chord-info {
//   margin: 0 auto;
//   text-align: center;
// }


.chord-details {
  // margin: 0 auto;
  text-align: left;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  // border: 1px solid #000;
}

.scale-info {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

p {
  padding: 0;
  margin: 0.5em 0;
}

ul {
  // list-style: none;
  padding: 0;
  margin: 0;
}

ul > ul {
  margin-left: 1.5em;
}

.chord-root {
  background-color: #ddd;
  display: inline-block;
  padding: 0 0.25em;
}
.deg {
  background-color: #ccc;
  display: inline-block;
  padding: 0 0.25em;
}
              
            
!

JS

              
                /* go to START HERE on line 126 */ 
/* comment out console.log on lines 90 & 92 to see ONLY noteStepsSort */

/* 8 minimal objects from chord-intervls.json. E, A, D, G, B = 6 add9, m11, & 9sus */
const chordIntervals = [
  {
    "Chord": "maj",
    "Intervals": ["1", "3", "5"],
    "steps": [0, 4, 7]
  },
  {
    "Chord": "6 add9",
    "Intervals": ["1", "3", "5", "6", "9"],
    "steps": [0, 2, 4, 7, 9],
  },
  {
    "Chord": "m",
    "Intervals": ["1", "♭3", "5"],
    "steps": [0, 3, 7]
  },
  {
    "Chord": "m11",
    "Intervals": ["1", "♭3", "5", "♭7", "11"],
    "steps": [0, 3, 7, 10, 5]
  },
  {
    "Chord": "m9",
    "Intervals": ["1", "♭3", "5", "♭7", "9"],
    "steps": [0, 3, 7, 10, 2]
  },
  {
    "Chord": "m13",
    "Intervals": ["1", "♭3", "5", "♭7", "13"],
    "steps": [0, 3, 7, 10, 9]
  },
  {
    "Chord": "7sus",
    "Intervals": ["1", "4", "5", "♭7"],
    "steps": [0, 5, 7, 10]
  },
  {
    "Chord": "9sus",
    "Intervals": ["1", "4", "5", "♭7", "9"],
    "steps": [0, 10, 2, 5, 7]
  }
]

// User entered fret numbers by string
const firstNote = document.getElementById('note1');
const secondNote = document.getElementById('note2') ;
const thirdNote = document.getElementById('note3');
const fourthNote = document.getElementById('note4');
const fifthNote = document.getElementById('note5');
const sixthNote = document.getElementById('note6');

// All number input fields
const fretInputs = document.querySelectorAll('.note');
// Submit button
const userChord = document.getElementById('user-chord');
// THE FORM
const notesForm = document.getElementById('notes-form');

// The chromatic scale by string, 15 frets (Sharps only)
const stringLoE = ["E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C", "C♯", "D", "D♯","E", "F", "F♯", "G"];
const stringA = ["A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C"];
const stringD = ["D", "D♯", "E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F"];
const stringG = ["G", "G♯", "A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G", "G♯", "A", "A♯"];
const stringB = ["B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C", "C♯", "D"];
const stringHiE = ["E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G"];

// The chromatic scale using sharps then flats (just using sharps right now)
const chromaticSharps = ["A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G", "G♯", "A", "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F♯", "G"];

let userFrets = [];
let chordTones = [];

notesForm.addEventListener("submit", function(e) {
  getNotes();
  // clearNotes();

  e.preventDefault();
});

/* 
getNotes: 
1. Get the fret #'s entered by the user (DONE)
2. Convert the fret #'s into chromatic notes (DONE)
3. In case of duplicate notes, get only unique notes (DONE)
4. Create a 12-note array for each chord tone (DONE)
5. Determine intervals/steps for each note compared to the other notes (DONE)

chordCalcs (doing all this in getNotes):
6. Find JSON 'steps' array(s) that match #5 (need JSON files here)
7. Output Chord name for matching data.steps
8. Output the chord notes and chord intervals in "proper" order
9. Output name(s) of "equal" chords, & Chord Substitutes (later) 
10. Output scale(s) & scale degrees that build the chord
11. Clear everything on next Submit (keyddown?) 
*/

function getNotes() {
  // 1. Get the fret #'s...
  let userFrets = [firstNote.value, secondNote.value, thirdNote.value, fourthNote.value, fifthNote.value, sixthNote.value];

  // Is the conditional here correct?
  if ([...userFrets]) {
    
    // 2. ...convert fret #'s into chromatic notes. This will have to move down the list because I need to get the chord name 1st in the event there are #'s or b's
    chordTones.push(stringLoE[userFrets[0]], stringA[userFrets[1]], stringD[userFrets[2]], stringG[userFrets[3]], stringB[userFrets[4]], stringHiE[userFrets[5]]);
  }
  
  // 3. In case of duplicate notes, get only unique notes
  let uniqueNotes = [];
  for (let i = 0; i < chordTones.length; i++) {

    if (!uniqueNotes.includes(chordTones[i]) && chordTones[i] !== undefined) {
      uniqueNotes.push(chordTones[i]);
    }
  }
    
  let noteSteps = [];
  for (let i = 0; i < uniqueNotes.length; i++) {

    // 4. Create a 12-note array for each chord tone
    let position = chromaticSharps.indexOf(uniqueNotes[i]);
    let noteAsRoot = chromaticSharps.slice(position, position + 12);

    /***  START HERE ***/

    // 5. Determine intervals for each note compared to the other notes (DONE)
    noteSteps = [];
    uniqueNotes.forEach(note => noteSteps.push(noteAsRoot.indexOf(note)));

    noteStepsSort = noteSteps.sort();

    console.log(uniqueNotes[i]);
    // JUST HIT SUBMIT TO GET THE 5 NOTES E, A, D, G, B
    console.log(noteStepsSort);
 
    
    // 6. Find JSON steps array(s) that matches #5
    
    function compareArrays(arr1, arr2) {
      if (arr1.length !== arr2.length) return false
      // console.log("arrWeLookFor: " + arr2)
      for (let index in arr1) {
        if (arr1[index] !== arr2[index]) return false
      }
      console.log("noteStepsSort: " + arr2)
      return true
    }

    const arrOfObjects = chordIntervals;
    // const arrWeLookFor = noteStepsSort; 

    const result = arrOfObjects.find(({steps})=>{
      return compareArrays(steps, noteStepsSort)
    })
    
    if (result !== undefined) {
      console.log(
        `${Object.keys(result)[0]}: ` + uniqueNotes[i] + result.Chord, 
        `${Object.keys(result)[1]}: ` + result.Intervals, 
        `${Object.keys(result)[2]}: ` + result.steps
      ) 
    } else {
      console.log("No matching steps array for " + uniqueNotes[i]);
    }
    // console.log(result.Chord)
    

    /***  IGNORE EVERYTHING BELOW HERE ***/

    // 7. Output Chord name for matching data.steps
    let noteOutput = document.getElementById('note-output').innerHTML += `<span class="notes">${uniqueNotes[i]}</span>`;

    // 8. Output the chord notes and chord intervals in "proper" order
    let intervalOutput = document.getElementById('interval-output').innerHTML += `<span class="intervals">${uniqueNotes[i]}: ${noteSteps} | </span>`;

    // 9. Output name(s) of "equal" chords

    // 10. Output scale(s) & scale degrees that build the chord

    // 11. Clear the page on next Submit

  }
}
              
            
!
999px

Console