note names are displayed

gawainhewitt · Sep 20, 2022 · 7454f89 · 7454f89
1 parent 7775109
commit 7454f89
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 34 deletions.
diff --git a/css/main.css b/css/main.css
@@ -58,6 +58,11 @@ h1 {
   color: black;
 }
 
+h2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
 #welcometext {
   font-family: Arial, Helvetica, sans-serif;
   padding: 2px;
@@ -116,62 +121,82 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     text-align: center;
     height: 30vh;
     background-color: rgb(255, 255, 0);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
 
 }
 #image1 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image2 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image3 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image4 {
   text-align: center;
   height: 30vh;
   background-color:  rgb(255, 255, 0);
-
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 #image5 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image6 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image7 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image8 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 div.img img {

diff --git a/dist/css/main.css b/dist/css/main.css
@@ -58,6 +58,11 @@ h1 {
   color: black;
 }
 
+h2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
 #welcometext {
   font-family: Arial, Helvetica, sans-serif;
   padding: 2px;
@@ -116,62 +121,82 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     text-align: center;
     height: 30vh;
     background-color: rgb(255, 255, 0);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
 
 }
 #image1 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image2 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image3 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image4 {
   text-align: center;
   height: 30vh;
   background-color:  rgb(255, 255, 0);
-
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 #image5 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image6 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image7 {
     text-align: center;
     height: 30vh;
     background-color: rgb(0,0,255);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 #image8 {
     text-align: center;
     height: 30vh;
     background-color:  rgb(255, 255, 0);
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 div.img img {

diff --git a/dist/index.html b/dist/index.html
@@ -95,15 +95,15 @@ <h1>loading...<br>loading...<br>loading...<br>loading...<br>loading...<br>loadin
       <br>
     </div>
     <div id="notesDiv">
-      <div id="image0">C</div>
-      <div id="image1">D</div>
-      <div id="image2">E</div>
-      <div id="image3">F</div>
-      <div id="image4">G</div>
-      <div id="image5">A</div>
-      <div id="image6">B</div>
-      <div id="image7">C</div>
-      <div id="image8">D</div>
+      <div id="image0"><h2>C</h2></div>
+      <div id="image1"><h2>D</h2></div>
+      <div id="image2"><h2>E</h2></div>
+      <div id="image3"><h2>F</h2></div>
+      <div id="image4"><h2>G</h2></div>
+      <div id="image5"><h2>A</h2></div>
+      <div id="image6"><h2>B</h2></div>
+      <div id="image7"><h2>C</h2></div>
+      <div id="image8"><h2>D</h2></div>
   </div>
 
     <!-- <span class="clear"></span> this keeps the above elements within the parent div -->

diff --git a/dist/sketch.js b/dist/sketch.js
@@ -424,6 +424,7 @@ function handleMenu(menu, index) { // function to handle the menu selections and
       var theNote = scale[i] + octave + theKey; // the note plus the octave plus the offset from the key menu
       notes[i] = allTheNotes[theNote]; // pick the notes from the all the notes array
     }
+    changeScaleText();
   }else if(menu === "scalemenu"){
     console.log("the scale is "+index);
     scale = scales[index];
@@ -432,6 +433,7 @@ function handleMenu(menu, index) { // function to handle the menu selections and
       var theNote = scale[i] + octave + theKey; // the note plus the octave plus the offset from the key menu
       notes[i] = allTheNotes[theNote]; // pick the notes from the all the notes array
     }
+    changeScaleText();
   } else {
     console.log("the octave is "+index);
     octave = index * 12;                      //octave switching here WORKING HERE
@@ -442,6 +444,13 @@ function handleMenu(menu, index) { // function to handle the menu selections and
   }
 }
 
+function changeScaleText() {
+  for (let i = 0; i < 9; i++) {
+    let element = `#image${i}`;
+    let note = notes[i];
+    document.querySelector(element).innerHTML = `<h2>${note.slice(0, -1)}</h2>`;
+  }
+}
 
 
 //following is to do with sound and image management

diff --git a/index.html b/index.html
@@ -95,15 +95,15 @@ <h1>loading...<br>loading...<br>loading...<br>loading...<br>loading...<br>loadin
       <br>
     </div>
     <div id="notesDiv">
-      <div id="image0">C</div>
-      <div id="image1">D</div>
-      <div id="image2">E</div>
-      <div id="image3">F</div>
-      <div id="image4">G</div>
-      <div id="image5">A</div>
-      <div id="image6">B</div>
-      <div id="image7">C</div>
-      <div id="image8">D</div>
+      <div id="image0"><h2>C</h2></div>
+      <div id="image1"><h2>D</h2></div>
+      <div id="image2"><h2>E</h2></div>
+      <div id="image3"><h2>F</h2></div>
+      <div id="image4"><h2>G</h2></div>
+      <div id="image5"><h2>A</h2></div>
+      <div id="image6"><h2>B</h2></div>
+      <div id="image7"><h2>C</h2></div>
+      <div id="image8"><h2>D</h2></div>
   </div>
 
     <!-- <span class="clear"></span> this keeps the above elements within the parent div -->

diff --git a/sketch.js b/sketch.js
@@ -424,6 +424,7 @@ function handleMenu(menu, index) { // function to handle the menu selections and
       var theNote = scale[i] + octave + theKey; // the note plus the octave plus the offset from the key menu
       notes[i] = allTheNotes[theNote]; // pick the notes from the all the notes array
     }
+    changeScaleText();
   }else if(menu === "scalemenu"){
     console.log("the scale is "+index);
     scale = scales[index];
@@ -432,6 +433,7 @@ function handleMenu(menu, index) { // function to handle the menu selections and
       var theNote = scale[i] + octave + theKey; // the note plus the octave plus the offset from the key menu
       notes[i] = allTheNotes[theNote]; // pick the notes from the all the notes array
     }
+    changeScaleText();
   } else {
     console.log("the octave is "+index);
     octave = index * 12;                      //octave switching here WORKING HERE
@@ -442,6 +444,13 @@ function handleMenu(menu, index) { // function to handle the menu selections and
   }
 }
 
+function changeScaleText() {
+  for (let i = 0; i < 9; i++) {
+    let element = `#image${i}`;
+    let note = notes[i];
+    document.querySelector(element).innerHTML = `<h2>${note.slice(0, -1)}</h2>`;
+  }
+}
 
 
 //following is to do with sound and image management