From 9331513839970e3ac33748108fdce5e3e052d360 Mon Sep 17 00:00:00 2001 From: Netzu00 Date: Fri, 31 May 2024 15:54:02 +0200 Subject: [PATCH] So far --- Milestone3/csvManipulator.js | 83 ++++++++++++++++++++++++++++++++++-- Milestone3/index.html | 35 ++++++++------- Milestone3/styles.css | 8 ++++ 3 files changed, 104 insertions(+), 22 deletions(-) diff --git a/Milestone3/csvManipulator.js b/Milestone3/csvManipulator.js index a3f818b..fc8814f 100644 --- a/Milestone3/csvManipulator.js +++ b/Milestone3/csvManipulator.js @@ -53,6 +53,22 @@ document.addEventListener('DOMContentLoaded', function() { window.allSongsData = sortedData; // Store all songs data for filtering }) .catch(error => console.error('Error loading the CSV file:', error)); + + const barContainers = document.querySelectorAll('.vertical-bar-container'); + barContainers.forEach(container => { + const positiveBar = container.querySelector('.vertical-bar.positive'); + const negativeBar = container.querySelector('.vertical-bar.negative'); + + container.addEventListener('mouseenter', function() { + positiveBar.classList.add('hovered'); + negativeBar.classList.add('hovered'); + }); + + container.addEventListener('mouseleave', function() { + positiveBar.classList.remove('hovered'); + negativeBar.classList.remove('hovered'); + }); + }); }); function parseCSV(text) { @@ -200,8 +216,6 @@ function updateAttributeBars(songData) { const label = document.getElementById(`${attr}-label`); label.textContent = `${value.toFixed(2)}`; - - }); } @@ -526,23 +540,84 @@ function resetAllFilters(){ resetButtonFilters(); } +/** When clicking on a bar, set the respective filter on the DJ board and apply it */ function applyFilterFromBar(attribute){ + label = document.getElementById(attribute + '-label'); + value = parseFloat(label.textContent); + + if(attribute === 'tempo'){ + let tempoSlider = document.getElementById('tempo-slider'); + tempoSlider.value = value; + filterSongsByTempo(); + } + + if(attribute === 'loudness'){ + let loudnessSlider = document.getElementById('loudness-slider'); + loudnessSlider.value = value; + filterSongsByLoudness(); + } + if(attribute === 'energy'){ + // Set the energy value to the value of the bar clicked + let energySpan = document.getElementById('energy-value'); + energySpan.textContent = value; + // Spin the energy disc to the correct position + let disc = document.getElementById('disc2'); + disc.style.transform = 'rotate(' + (value * 360) + 'deg)'; filterSongsByEnergy(); } + if(attribute === 'key'){ + // Set the key value to the value of the bar clicked + let keySpan = document.getElementById('key-value'); + keySpan.textContent = keys[Math.floor(value / 30)]; filterSongsByKey(); } if(attribute === 'danceability'){ + // Set the danceability mode to the value of the bar clicked + for(let i = 0; i < danceabilityModes.length; i++){ + console + if(value >= danceabilityModes[i].range[0] && value <= danceabilityModes[i].range[1]){ + danceabilityModeIndex = i; + document.getElementById('danceability-mode').textContent = danceabilityModes[i].mode; + break; + } + } filterSongsByDanceability(danceabilityModes[danceabilityModeIndex].range); } + if(attribute === 'valence'){ + // Set the valence mode to the value of the bar clicked + for(let i = 0; i < valenceModes.length; i++){ + if(value >= valenceModes[i].range[0] && value <= valenceModes[i].range[1]){ + valenceModeIndex = i; + document.getElementById('valence-mode').textContent = valenceModes[i].mode; + break; + } + } filterSongsByValence(valenceModes[valenceModeIndex].range); } - if(attribute === 'lyrics'){ + if(attribute === 'speechiness'){ + // Set the lyrics mode to the value of the bar clicked + for(let i = 0; i < lyricModes.length; i++){ + if(value >= lyricModes[i].range[0] && value <= lyricModes[i].range[1]){ + lyricModeIndex = i; + document.getElementById('lyrics-mode').textContent = lyricModes[i].mode; + break; + } + } filterSongsByLyrics(lyricModes[lyricModeIndex].range); } - if(attribute === 'instrumental'){ + + if(attribute === 'instrumentalness'){ + // Set the instrumental mode to the value of the bar clicked + for(let i = 0; i < instrumentalModes.length; i++){ + if(value >= instrumentalModes[i].range[0] && value <= instrumentalModes[i].range[1]){ + instrumentalModeIndex = i; + document.getElementById('instrumental-mode').textContent = instrumentalModes[i].mode; + break; + } + } filterSongsByInstrumental(instrumentalModes[instrumentalModeIndex].range); } } diff --git a/Milestone3/index.html b/Milestone3/index.html index 8921ab3..259717e 100644 --- a/Milestone3/index.html +++ b/Milestone3/index.html @@ -28,24 +28,24 @@

Song List

-
-
+
+
-
-
+
+
-
-
+
+
@@ -60,8 +60,8 @@

Song List

-
-
+
+
@@ -76,24 +76,24 @@

Song List

-
-
+
+
-
-
+
+
-
-
+
+
@@ -142,10 +142,9 @@

Song List

- -
- -
+ + +
diff --git a/Milestone3/styles.css b/Milestone3/styles.css index f1189c5..4a12ff8 100644 --- a/Milestone3/styles.css +++ b/Milestone3/styles.css @@ -177,8 +177,11 @@ body { position: relative; margin-bottom: 10px; margin-right: 10px; + cursor: pointer; /* Change cursor to pointer */ } + + .vertical-bar { width: 40px; /* Width of the bar */ position: absolute; @@ -189,6 +192,11 @@ body { transition: height 0.5s ease-in-out; } +.vertical-bar.hovered { + background-color: #c5c4c4; /* Light background color on hover */ + border-radius: 5px; /* Rounded corners on hover */ + transition: background-color 0.3s ease-in-out; /* Smooth transition */ +} .vertical-bar.negative { height: 0%; /* Initial height, will be set dynamically */