Skip to content

Commit

Permalink
So far
Browse files Browse the repository at this point in the history
  • Loading branch information
@Netzu00
Netzu00 committed May 31, 2024
1 parent d8740ae commit 9331513
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 22 deletions.
83 changes: 79 additions & 4 deletions Milestone3/csvManipulator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -200,8 +216,6 @@ function updateAttributeBars(songData) {

const label = document.getElementById(`${attr}-label`);
label.textContent = `${value.toFixed(2)}`;


});
}

Expand Down Expand Up @@ -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);
}
}
35 changes: 17 additions & 18 deletions Milestone3/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,24 @@ <h3>Song List</h3>
<div class="attribute">
<div class="vertical-bar-container">
<label for="danceability" class="vertical-label">Danceability</label>
<div class="vertical-bar positive" id="danceability-bar-positive"></div>
<div class="vertical-bar negative" id="danceability-bar-negative"></div>
<div class="vertical-bar positive" id="danceability-bar-positive" onclick="applyFilterFromBar('danceability')"></div>
<div class="vertical-bar negative" id="danceability-bar-negative" onclick="applyFilterFromBar('danceability')"></div>
<div class="bar-label" id="danceability-label"></div>
</div>
</div>
<div class="attribute">
<div class="vertical-bar-container">
<label for="energy" class="vertical-label">Energy</label>
<div class="vertical-bar positive" id="energy-bar-positive"></div>
<div class="vertical-bar negative" id="energy-bar-negative"></div>
<div class="vertical-bar positive" id="energy-bar-positive" onclick="applyFilterFromBar('energy')"></div>
<div class="vertical-bar negative" id="energy-bar-negative" onclick="applyFilterFromBar('energy')"></div>
<div class="bar-label" id="energy-label"></div>
</div>
</div>
<div class="attribute">
<div class="vertical-bar-container">
<label for="speechiness" class="vertical-label">Speechiness</label>
<div class="vertical-bar positive" id="speechiness-bar-positive"></div>
<div class="vertical-bar negative" id="speechiness-bar-negative"></div>
<div class="vertical-bar positive" id="speechiness-bar-positive" onclick="applyFilterFromBar('speechiness')"></div>
<div class="vertical-bar negative" id="speechiness-bar-negative" onclick="applyFilterFromBar('speechiness')"></div>
<div class="bar-label" id="speechiness-label"></div>
</div>
</div>
Expand All @@ -60,8 +60,8 @@ <h3>Song List</h3>
<div class="attribute">
<div class="vertical-bar-container">
<label for="instrumentalness" class="vertical-label">Instrumentalness</label>
<div class="vertical-bar positive" id="instrumentalness-bar-positive"></div>
<div class="vertical-bar negative" id="instrumentalness-bar-negative"></div>
<div class="vertical-bar positive" id="instrumentalness-bar-positive" onclick="applyFilterFromBar('instrumentalness')"></div>
<div class="vertical-bar negative" id="instrumentalness-bar-negative" onclick="applyFilterFromBar('instrumentalness')"></div>
<div class="bar-label" id="instrumentalness-label"></div>
</div>
</div>
Expand All @@ -76,24 +76,24 @@ <h3>Song List</h3>
<div class="attribute">
<div class="vertical-bar-container">
<label for="valence" class="vertical-label">Valence</label>
<div class="vertical-bar positive" id="valence-bar-positive"></div>
<div class="vertical-bar negative" id="valence-bar-negative"></div>
<div class="vertical-bar positive" id="valence-bar-positive" onclick="applyFilterFromBar('valence')"></div>
<div class="vertical-bar negative" id="valence-bar-negative" onclick="applyFilterFromBar('valence')"></div>
<div class="bar-label" id="valence-label"></div>
</div>
</div>
<div class="attribute">
<div class="vertical-bar-container">
<label for="loudness" class="vertical-label">Loudness</label>
<div class="vertical-bar positive" id="loudness-bar-positive"></div>
<div class="vertical-bar negative" id="loudness-bar-negative"></div>
<div class="vertical-bar positive" id="loudness-bar-positive" onclick="applyFilterFromBar('loudness')"></div>
<div class="vertical-bar negative" id="loudness-bar-negative" onclick="applyFilterFromBar('loudness')"></div>
<div class="bar-label" id="loudness-label"></div>
</div>
</div>
<div class="attribute">
<div class="vertical-bar-container">
<label for="tempo" class="vertical-label">Tempo</label>
<div class="vertical-bar positive" id="tempo-bar-positive"></div>
<div class="vertical-bar negative" id="tempo-bar-negative"></div>
<div class="vertical-bar positive" id="tempo-bar-positive" onclick="applyFilterFromBar('tempo')"></div>
<div class="vertical-bar negative" id="tempo-bar-negative" onclick="applyFilterFromBar('tempo')"></div>
<div class="bar-label" id="tempo-label"></div>
</div>
</div>
Expand Down Expand Up @@ -142,10 +142,9 @@ <h3>Song List</h3>
<label for="instrumental-mode" class="grid-label">Instrumental</label>
</div>
</div>

<div class="reset-all-container">
<button class="reset-button" onclick="resetButtonFilters()">Reset</button>
</div>

<button class="reset-button" onclick="resetButtonFilters()">Reset</button>

</div>

<div class="disc-container">
Expand Down
8 changes: 8 additions & 0 deletions Milestone3/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand Down

0 comments on commit 9331513

Please sign in to comment.