frontend functional

lvreynoso · Jan 10, 2019 · ef390a3 · ef390a3
1 parent 0a6a7c6
commit ef390a3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -32,6 +32,10 @@ body {
   cursor: pointer;
 }
 
+.btn-generate:hover {
+    background-color: #00c0dd;
+}
+
 .btn-download {
     color: #00e1ff;
 }

diff --git a/public/midi/Legend of Zelda - Overworld.mid b/public/midi/Legend of Zelda - Overworld.mid
diff --git a/public/scripts/mimikov.js b/public/scripts/mimikov.js
@@ -11,10 +11,31 @@ window.onload = function() {
     document.getElementById('pauseButton').addEventListener('click', pauseButton)
     document.getElementById('stopButton').addEventListener('click', stopButton)
     document.getElementById('downloadButton').addEventListener('click', downloadButton)
+
+    document.getElementsByName('category').forEach(element => {
+        element.addEventListener('click', selectCategory)
+    })
+    document.getElementsByName('order').forEach(element => {
+        element.addEventListener('click', selectOrder)
+    })
+}
+
+function selectCategory(event) {
+    const selected = event.target.textContent;
+    let sourceButton = document.getElementById('sourceButton');
+    sourceButton.textContent = selected;
+}
+
+function selectOrder(event) {
+    const selected = event.target.textContent;
+    let orderButton = document.getElementById('orderButton');
+    orderButton.textContent = selected;
 }
 
 async function generateMIDI(event) {
-    const midiResponse = await axios.post('/generate', { category: 'Pokemon' });
+    const category = document.getElementById('sourceButton').textContent;
+    const order = document.getElementById('orderButton').textContent;
+    const midiResponse = await axios.post('/generate', { category: category, order: order });
     console.log(midiResponse);
     const midiBuffer = hexToBuffer(midiResponse.data.hex)
     console.log(midiBuffer);

diff --git a/views/index.handlebars b/views/index.handlebars
@@ -5,19 +5,20 @@
             <h1 class="text-white">Mimikov. &#9939;</h1>
             <p class="font-weight-bold">
                 <div class="dropdown">
-                  <button class="dropbtn bg-secondary font-weight-bold">Music Source</button>
+                  <button class="dropbtn bg-secondary font-weight-bold" id="sourceButton">Music Source</button>
                   <div class="dropdown-content">
-                    <a href="#">Madonna</a>
-                    <a href="#">Final Fantasy</a>
-                    <a href="#">Beethoven</a>
+                    <a href="#" name="category" id="category1">Pokemon</a>
+                    <a href="#" name="category" id="category2">Final Fantasy</a>
+                    <a href="#" name="category" id="category3">Legend of Zelda</a>
                   </div>
                 </div>
                 <div class="dropdown">
-                    <button class="dropbtn bg-secondary font-weight-bold">Markov Order</button>
+                    <button class="dropbtn bg-secondary font-weight-bold" id="orderButton">Markov Order</button>
                     <div class="dropdown-content">
-                      <a href="#">1</a>
-                      <a href="#">2</a>
-                      <a href="#">3</a>
+                      <a href="#" name="order" id="order1">Order 1</a>
+                      <a href="#" name="order" id="order2">Order 2</a>
+                      <a href="#" name="order" id="order3">Order 3</a>
+                      <a href="#" name="order" id="order4">Order 4</a>
                     </div>
                 </div>
                 <button type="submit" class="btn-generate font-weight-bold" id="generate" name="generate">Generate song!</button>