async function getData() {
    const url = "http://localhost:3000/userrecent?userName=sussyenby&limit=1"; // request most recent track
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`); // return response
      }
      
      const json = await response.json(); 
      try{ if (json.recenttracks.track[0]["@attr"].nowplaying) { // check if most recent track is currently playing
        console.log(json.recenttracks.track[0].name)
        console.log(json.recenttracks.track[0].url)
        console.log(json.recenttracks.track[0].image[0]["#text"])
        document.getElementById("track").innerHTML = json.recenttracks.track[0].name
        document.getElementById("track").setAttribute("href", json.recenttracks.track[0].url)
        document.getElementById("trackIcon").setAttribute("src", json.recenttracks.track[0].image[0]["#text"])
        return;
      } else {} 
    } catch(error) {}
    } catch (error) {
      console.error(error.message);
    }
  }

async function setBg() {
  const d = new Date();
  let hour = d.getHours();
  document.getElementById("track").innerHTML = hour
  if (hour < 18 ) {
    time = "day"
  } else if (hour < 20) {
    time = "evening"
  } else {
    time = "night"
  }
  console.log(`assets/${time}-bg`)
  document.getElementById("left-border").setAttribute("src", `assets/${time}-bg.png`)
  document.getElementById("right-border").setAttribute("src", `assets/${time}-bg.png`)
  
}
setBg()
getData()