more css

com-480-data-visualization · May 31, 2024 · 5f8efaf · 5f8efaf
1 parent 35c308b
commit 5f8efaf
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/Milestone3/csvManipulator.js b/Milestone3/csvManipulator.js
@@ -1,31 +1,31 @@
 let danceabilityModeIndex = -1;
 const danceabilityModes = [
     { mode: 'Low', range: [0, 0.25] },
-    { mode: 'Med.', range: [0.25, 0.5] },
+    { mode: 'Med', range: [0.25, 0.5] },
     { mode: 'High', range: [0.5, 0.75] },
     { mode: 'Max', range: [0.75, 1] }
 ];
 
 let valenceModeIndex = -1;
 const valenceModes = [
-    { mode: ':(', range: [0, 0.33] },
-    { mode: ':|', range: [0.25, 0.5] },
-    { mode: ':)', range: [0.5, 0.75] },
+    { mode: '🙁', range: [0, 0.33] },
+    { mode: '😐', range: [0.25, 0.5] },
+    { mode: '😄', range: [0.5, 0.75] },
 ];
 
 let lyricModeIndex = -1;
 const lyricModes = [
     { mode: 'Off', range: [0, 0.1] },
     { mode: 'Low', range: [0.1, 0.3] },
-    { mode: 'Med.', range: [0.3, 0.5] },
+    { mode: 'Med', range: [0.3, 0.5] },
     { mode: 'High', range: [0.5, 0.75] },
     { mode: 'Max', range: [0.75, 1] }
 ];
 
 let instrumentalModeIndex = -1;
 const instrumentalModes = [
     { mode: 'Low', range: [0, 0.1] },
-    { mode: 'Med.', range: [0.1, 0.5] },
+    { mode: 'Med', range: [0.1, 0.5] },
     { mode: 'High', range: [0.5, 1] },
 ];
 

diff --git a/Milestone3/index.html b/Milestone3/index.html
@@ -121,18 +121,18 @@ <h3>Song List</h3>
                 <div class="button-grid">
                     <div class="button-with-label">
                         <label for="danceability-mode" class="grid-label">Danceability</label>
-                        <button class="grid-button" id="danceability-mode" onclick="toggleDanceabilityMode()">Any</button>
+                        <button class="grid-button dj-button-text" id="danceability-mode" onclick="toggleDanceabilityMode()">Any</button>
                     </div>
                     <div class="button-with-label">
                         <label for="valence-mode" class="grid-label">Valence</label>
-                        <button class="grid-button" id="valence-mode" onclick="toggleValenceMode()">Any</button>
+                        <button class="grid-button dj-button-text" id="valence-mode" onclick="toggleValenceMode()">Any</button>
                     </div>
                     <div class="button-with-label">
-                        <button class="grid-button" id="lyrics-mode" onclick="toggleLyricsMode()">Any</button>
+                        <button class="grid-button dj-button-text" id="lyrics-mode" onclick="toggleLyricsMode()">Any</button>
                         <label for="lyrics-mode" class="grid-label">Lyrics</label>
                     </div>
                     <div class="button-with-label">
-                        <button class="grid-button" id="instrumental-mode" onclick="toggleInstrumentalMode()">Any</button>
+                        <button class="grid-button dj-button-text" id="instrumental-mode" onclick="toggleInstrumentalMode()">Any</button>
                         <label for="instrumental-mode" class="grid-label">Instrumental</label>
                     </div>
 

diff --git a/Milestone3/styles.css b/Milestone3/styles.css
@@ -349,3 +349,7 @@ body {
     fill: var(--item-color);
 }
 
+.dj-button-text {
+    font-size: 20px; /* Adjust the font size as needed */
+}
+