Visual changes

nomadkaraoke · Aug 15, 2019 · af1155b · af1155b
1 parent 2821ad1
commit af1155b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/first-step.html b/first-step.html
@@ -7,7 +7,6 @@
   <h2>First Step: Base Note</h2>
   <body>
     <p>Sing a comfortable note near the middle of your voice range.</p>
-    <p>Sing for two seconds after you press record.</p>
     <button id="recordbutton">Record</button>
     <br>
     <br>

diff --git a/renderer.js b/renderer.js
@@ -116,14 +116,20 @@ async function process (data) {
       body.append(button);
     } else {
       let text = document.createElement("p");
-      let node = document.createTextNode("You sang " + note + ".");
-      text.setAttribute("id", "yousang");
-      text.append(node);
-      body.append(text);
+
       let noteToSing = document.getElementById("noteToSing");
-      if (note === noteToSing.innerHTML.substring(17, noteToSing.innerHTML.length - 1)) {
+      let goal = noteToSing.innerHTML.substring(17, noteToSing.innerHTML.length - 1);
+      if (note === goal) {
+        let node = document.createTextNode("Nice! You correctly sang " + note + ".");
+        text.setAttribute("id", "yousang");
+        text.append(node);
+        body.append(text);
         pass();
       } else {
+        let node = document.createTextNode("Oops! You sang " + note + " instead of " + goal + "."); 
+        text.setAttribute("id", "yousang");
+        text.append(node);
+        body.append(text);
         fail();
       }
     }

diff --git a/scales.js b/scales.js
@@ -89,8 +89,12 @@ function fail() {
     recordbutton.disabled = false;
   }
 
+  let div = document.createElement("div");
+  div.setAttribute("class", "divider");
+
   body.append(text);
   body.append(tryagain);
+  body.append(div);
   body.append(next);
 
   recordbutton.disabled = true;

diff --git a/style.css b/style.css
@@ -1,7 +1,8 @@
 body {
   font-family: "Gill Sans", sans-serif;
-  background-color: #B2B7E5;
+  background-color: #7112FF;
   text-align: center;
+  color: #C7C7C7;
 }
 h1 {
   margin-top: 100px;
@@ -21,17 +22,22 @@ button {
   font-family: "Gill Sans", sans-serif;
   font-size: 25px;
   padding: 15px 30px;
-  background-color: #36D3FF;
+  background-color: #17C2FE;
   box-shadow: 0 7px #999;
+  border-radius: 35%;
+  color: #363636;
 }
 button:hover {
-  background-color: #2CA5C7;
+  background-color: #14A6D9;
 }
 button:active {
-  background-color: #2CA5C7;
+  background-color: #14A6D9;
   box-shadow: 0 3px #666;
   transform: translateY(4px);
 }
+button:disabled {
+  background-color: #1088B3;
+}
 li {
   text-align: left; 
   font-size: 20px;
@@ -41,8 +47,8 @@ ol {
   margin: 0 auto;
 }
 ul  {
-    display: table;
-    margin: 0 auto;
+  display: table;
+  margin: 0 auto;
 }
 #steps {
   border: 3px;
@@ -51,16 +57,18 @@ ul  {
   margin-left: 100px;
   margin-right: 100px;
   background-color: #78BF81;
+  color: #5C5C5C;
 }
-#voiceTypes {
-  padding: 0px 250px;
-  text-align: center;
+td {
+  height: 30px;
 }
-#femaleVoice {
-  width: 300px;
-  float: left;
+th {
+  background-color: #17C2FE;
+  height: 50px;
+  color: #363636; 
 }
-#maleVoice {
-  width: 300px;
-  float: right;
+.divider {
+  width: 5px;
+  height: auto;
+  display: inline-block;
 }