I am currently designing a unique image generator with additional fields or captions that will be displayed on the page. To achieve this, I believe the best approach is to create an array of objects. However, my knowledge of objects and classes is a bit outdated, so I am unsure if I am structuring it correctly. Below is the HTML code for reference:
<div class="col-md-6 col-lg-4 col-sm-12">
<img id="winnerImage" src="http://placehold.it/1500x1200" alt="Winners at Rhythm City Casino Resort®" width="1500" height="1200" class="img-thumbnail img-fluid">
</div>
<div class="col-md-6 col-lg-8 col-sm-12">
<h2 class="display-3" id="winnerHeader">Another Big Winner at Rhythm City!</h2>
<h3 id="winnerCaption">Debbie R. • $5,000 Winner.</h3>
<p class="text-center"><a href="winners.html" class="btn btn-primary">View Winners Gallery</a></p>
</div>
Here is the code from my script file:
window.onload = choosePic;
function BigWinner(source, name, amount) {
this.source = source;
this.name = name;
this.amount = amount;
}
var winnersArray = new Array (
BigWinner("JohnD_1280.40_DeWittIA_September2017.JPG", "John D.", "$1,280"),
BigWinner("KaronB_13004.81_DavenportIA_September2017.JPG", "Karon B.", "$13,004"),
BigWinner("KyleG_1742_NewBostonIL_September2017.JPG", "Kyle G.", "$1,742"),
BigWinner("MarciaP_2000.40_LeClaireIA_November2017.JPG", "Marcia P.", "$2,000"),
BigWinner("ShaneE_4164,76_CamancheIA_September2017.JPG", "Shane E.", "$4,164")
);
function choosePic() {
randomNum = Math.floor((Math.random() * winnersArray.length));
document.getElementById("winnerImage").src = "img/Casino/Winners/" + winnersArray[randomNum].source;
document.getElementById("winnerCaption").innerHTML = winnersArray[randomNum].name + " • " + winnersArray[randomNum].amount + " Winner";
}