I'm adding a button to a website that randomizes NBA teams and provides a picture with the answer. I have the randomizer set up to provide the random team when the button is pushed but I'm unsure how to get a picture to go along with the team selected.
My randomizer in JS:
let teams =
{
atlanta: "Atlanta Hawks",
boston: "Boston Celtics",
brooklyn: "Brooklyn Nets",
charlotte: "Charlotte Hornets",
chicago: "Chicago Bulls",
cleveland: "Cleveland Cavaliers",
dallas: "Dallas Mavericks",
denver: "Denver Nuggets",
detroit: "Detroit Pistons",
goldenState: "Golden State Warriors",
houston: "Houston Rockets",
indiana: "Indiana Pacers",
clippers: "Los Angeles Clippers",
lakers: "Los Angeles Lakers",
memphis: "Memphis Grizzlies",
miami: "Miami Heat",
milwaukee: "Milwaukee Bucks",
minnesota: "Minnesota Timberwolves",
pelicans: "New Orleans Pelicans",
knicks: "New York Knicks",
thunder: "Oklahoma City Thunder",
orlando: "Orlando Magic",
philadelphia: "Philadelphia 76ers",
phoenix: "Phoenix Suns",
portland: "Portland Trail Blazers",
sacramento: "Sacramento Kings",
spurs: "San Antonio Spurs",
toronto: "Toronto Raptors",
utah: "Utah Jazz",
washington: "Washington Wizards"
}
const values = Object.values(teams)
app.get("/api/teams", (req, res)=>{
const randomTeam = values[Math.floor(Math.random()*values.length)]
console.log(randomTeam)
res.status(200).send(randomTeam)
})
To add team name to HTML:
<script>
document.getElementById("button").onclick = function () {
axios.get("http://localhost:5151/api/teams").then(function(response) {
const data = response.data;
document.getElementById("randomTeamCard").innerHTML = [data].map(function(team) {
return `The team you should bandwagon is: ${data}!`;
})
.join("");
}).catch(function (err) {
document.getElementById("randomTeamCard").innerHTML =
'<li class="text-danger">' + err.message + "</li>";
});
};
</script>