html/index.js
/*  timeSelection
    a function to find out what time span button was pressed
    (and sends the information to another function that will make
        the spotify api call)
    once one button is clicked, the others will not have a click 
    feature and the clicked button will change color.
    @params
        button_id: the id of the clicked button
    @returns
        user_time_selection: the needed spotify term for the time
                            span the user selected
*/
timeSelection
a function to find out what time span button was pressed
(and sends the information to another function that will make
the spotify api call)
once one button is clicked, the others will not have a click
feature and the clicked button will change color.
timeSelection a function to find out what time span button was pressed ( and sends the information to another function that will make the spotify api call ) once one button is clicked the others will not have a click feature and the clicked button will change color .
function timeSelection(button_id) {
    let selected_button = document.getElementById(button_id);
    selected_button.style.background = "black";
    selected_button.style.color = "#cfe8fa";
    if (button_id == "short-term-time-button" ||
        button_id == "medium-term-time-button") {
        document.getElementById("long-term-time-button").style.background = "#cfe8fa";
        document.getElementById("long-term-time-button").style.color = "black";
    }
    if (button_id == "short-term-time-button" ||
        button_id == "long-term-time-button") {
        document.getElementById("medium-term-time-button").style.background = "#cfe8fa";
        document.getElementById("medium-term-time-button").style.color = "black";
    }
    if (button_id == "medium-term-time-button" ||
        button_id == "long-term-time-button") {
        document.getElementById("short-term-time-button").style.background = "#cfe8fa";
        document.getElementById("short-term-time-button").style.color = "black";
    }
    let selection_arr = button_id.split("-");
    console.log(selection_arr);
    user_time_selection = selection_arr[0];
    console.log(user_time_selection);
}
function timeSelection ( button_id ) { let selected_button = document . getElementById ( button_id ) ; selected_button . style . background = "black" ; selected_button . style . color = "#cfe8fa" ; if ( button_id == "short-term-time-button" || button_id == "medium-term-time-button" ) { document . getElementById ( "long-term-time-button" ) . style . background = "#cfe8fa" ; document . getElementById ( "long-term-time-button" ) . style . color = "black" ; } if ( button_id == "short-term-time-button" || button_id == "long-term-time-button" ) { document . getElementById ( "medium-term-time-button" ) . style . background = "#cfe8fa" ; document . getElementById ( "medium-term-time-button" ) . style . color = "black" ; } if ( button_id == "medium-term-time-button" || button_id == "long-term-time-button" ) { document . getElementById ( "short-term-time-button" ) . style . background = "#cfe8fa" ; document . getElementById ( "short-term-time-button" ) . style . color = "black" ; } let selection_arr = button_id . split ( "-" ) ; console . log ( selection_arr ) ; user_time_selection = selection_arr [ 0 ] ; console . log ( user_time_selection ) ; }
timeSelection
a function to find out what time span button was pressed
(and sends the information to another function that will make
the spotify api call)
once one button is clicked, the others will not have a click
feature and the clicked button will change color.
timeSelection a function to find out what time span button was pressed ( and sends the information to another function that will make the spotify api call ) once one button is clicked the others will not have a click feature and the clicked button will change color .
/* get the button and change the color to show it is selected */ /* change the unselected buttons colors */ /*  button_id looks like short-term-time-button    */ /*  user_time_selection is just one word: short, medium, or long */ /*will need to return this information to send it somewhere*/