JSFiddle - React, Tailwind, and code Playground

by christopher gaston

HTML

<div>
			<p class="Main-Text">The image below shows the pattern of whole and half steps for any key.  To change keys, simply click the blue arrow to go the next key up or the green arrow to go to the next key down.</p>
			<p class="Main-Text"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="660px"
	 height="105px" viewBox="0 0 660 105" enable-background="new 0 0 660 105" xml:space="preserve">
<font horiz-adv-x="1000">
<!-- Copyright (C) Avid Technology, Inc. 1987-2010 -->
<!-- Copyright: Copyright 2014 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="OpusText" units-per-em="1000" underline-position="-123" underline-thickness="20"/>
<missing-glyph horiz-adv-x="500"/>
<glyph unicode="#" horiz-adv-x="360" d="M239,371l-105,-35l0,-189l105,35M266,634l0,-156l56,19l0,-100l-56,-18l0,-189l56,18l0,-99l-56,-19l0,-170l-27,0l0,162l-105,-34l0,-163l-27,0l0,155l-57,-19l0,100l57,18l0,189l-57,-18l0,99l57,19l0,171l27,0l0,-163l105,34l0,164z"/>
<glyph unicode="b" horiz-adv-x="321" d="M50,635l35,0l-8,-316C100,356 134,375 179,375C194,375 209,372 224,367C239,361 252,353 263,343C274,333 283,321 290,308C297,294 300,279 300,263C300,240 293,218 279,196C264,173 245,151 222,129C199,106 172,84 142,61C112,38 81,14 50,-10M151,330C136,330 123,327 114,320C104,313 96,304 91,293C85,282 81,269 79,256C76,242 75,228 75,215l0,-47C75,111 77,73 81,54C95,64 110,78 126,96C141,114 155,133 168,154C181,174 191,194 200,215C208,235 212,253 212,268C212,285 206,299 195,312C183,324 168,330 151,330z"/>
</font>

	<font horiz-adv-x="2048">
<!-- Copyright (c) 2001, Modular Infotech, Pune, INDIA. - Licenced to Microsoft -->
<!-- Copyright: Copyright 2014 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="Utsaah" units-per-em="2048" underline-position="-168" underline-thickness="102"/>
<missing-glyph horiz-adv-x="1600" d="M200,1400l1200,0l0,-1400l-1200,0M1300,100l0,1200l-1000,0l0,-1200z"/>
<glyph...

JavaScript

//<![CDATA[
	    function changekey(direction){
	      //all 12 major keys
	      var  keyArray = ["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];
	      //12 notes of each major key including non major scale notes
	      var  keyNotes = {C:"C,C#/Db,D,D#/Eb,E,F,F#/Gb,G,G#/Ab,A,A#/Bb,B,C",
	                       Db:"Db,D,Eb,E,F,Gb,G,Ab,A,Bb,B,C,Db",
	                       D:"D,D#/Db,E,F,F#,G,G#/Ab,A,A#/Bb,B,C,C#,D",
	                       Eb:"Eb,F,F#/Gb,G,Ab,A,Bb,B,C,C#/Db,E,Eb",
	                       E:"E,F,F#,G,G#,A,A#/Bb,B,C,C#,D,D#,E",
	                       F:"F,F#/Gb,G,G#/Ab,A,Bb,B,C,C#/Db,D,D#/Eb,E,F",
	                       Gb:"Gb,G,Ab,A,Bb,Cb,C,Db,D,Eb,E,F,Gb",
	                       G:"G,G#/Ab,A,A#/Bb,B,C,C#/Db,D,D#/Eb,E,F,F#,G",
	                       Ab:"Ab,A,Bb,B,C,Db,D,Eb,E,F,F#/Gb,G,Ab",
	                       A:"A,A#/Bb,B,C,C#,D,D#/Eb,E,F,F#,G,G#,A",
	                       Bb:"Bb,B,C,C#/Db,D,Eb,E,F,F#/Gb,G,G#/Ab,A,Bb",
	                       B:"B,C,C#,D,D#,E,F,F#,G,G#,A,A#,B"
	                       };
	      var currentKey = document.getElementById("MajorScale").innerHTML;
	      var newNotes = [];
	      var newKey;
	      var firstChar;
	      var secondChar = [];
	      var secondCharText = [];

	      if(direction == "down"){
	        if(keyArray.indexOf(currentKey)==0){
	          document.getElementById("MajorScale").innerHTML=keyArray[keyArray.length-1];
	          newKey=keyArray[keyArray.length-1];
	        } else{
	          document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)-1];
	          newKey=keyArray[keyArray.indexOf(currentKey)-1];
	        }
	      } else if( direction == "up") {
	        if(keyArray.indexOf(currentKey)==keyArray.length-1){
	          document.getElementById("MajorScale").innerHTML=keyArray[0];
	          newKey = keyArray[0];
	        } else {
	          document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)+1];
	          newKey...