PeloShuffle

Peloton class shuffler. I built a simple app with Observable to randomize class recommendations based on user preferences.

data = d3.json('https://raw.githubusercontent.com/tashapiro/peloton-stats/main/data/peloton_classes.json');

newData = data.map(function(workout) {
  return {
    ...workout, // copy the existing workout object
    duration_min: workout.duration / 60, // add a new property
    difficulty: workout.difficulty_rating_avg.toFixed(1) // add a new property
  };
});

types = new Set(data.map(i => i.fitness_discipline_display_name));
instructors = new Set(data.map(i => i.instructor_name));
durations = [5,10,15,20,30,45, 60]

viewof filters = (
  Inputs.form(
    {workoutType:Inputs.select(types, {label: "Type", multiple:5, sort:true, value:types}),
     instructor:Inputs.select(instructors, {label: "Instructors" , sort:true, multiple: 5, value:instructors}),
     duration:Inputs.select(durations, {label:"Duration (min)", value:30, multiple:5, value:durations}),
     difficulty: Inputs.range([0, 10], {label: "Max Difficulty", step: 1, value: 8}),
})
  )
  
  
filtered = newData.filter(d => filters.workoutType.includes(d.fitness_discipline_display_name) & filters.instructor.includes(d.instructor_name) & filters.duration.includes(d.duration_min) && d.difficulty <= filters.difficulty)

viewof update = Inputs.button("Shuffle", {value: Math.floor(Math.random() * filtered.length), reduce: () => Math.floor(Math.random() * filtered.length)})

Inputs.button("Copy Link", {value: null, reduce: () => navigator.clipboard.writeText('https://members.onepeloton.com/classes/all?modal=classDetailsModal&classId=' + filtered[update].id)})

{const classes = filtered;
const updateIndex = update;

const shuffleCard = document.querySelector('.shuffle-card');

 //if nothing returns from the filtered query, print No Results
if (filtered.length === 0) {shuffleCard.innerHTML = '<div class="no-results">No Results</div>';}
//otherwise return card with class information
else  {shuffleCard.innerHTML = `<center><div class="class-title">${classes[updateIndex].title}</div></center>
    <div class="class-img-container"><img class="class-img" src=${classes[updateIndex].image_url}></div>
    <div class="class-meta">
      <div class="instructor">${classes[updateIndex].instructor_name}</div>
      <div class="instructor">${classes[updateIndex].air_date}</div>
      <div class="class-diff">Avg Difficulty: ${classes[updateIndex].difficulty}</div>
    </div>
    <p class="class-desc">${classes[updateIndex].description}</p>`;}

return console.log("Success")

}