Now that we have the completed application skeleton, we need to populate the div containers with randomly selected thumbnails from the videos we’ll be viewing. The first thing we’ll need to do is add an array populated by the unique YouTube identifier locations to our JavaScript file. Again, I have omitted the getRandomColor() function because it has not changed.
iteration5.js
const addresses = ["9KuZj8zb0pQ",
"8amHoqOTsyI",
"g4ywxRCztuE",
"JMtzR9JpGFI",
"PdKB6opHjSM",
"bn9SLbfOEwo",
"IoIdD1p21o8",
"LusQqtxaCb8",
"Ds-Vp29bBcs",
"Q3fvTEsT0EI",
"fN-9U_9xaR4",
"HL_8u_qwIf0",
"ho5iDlsUSQE",
"gTHTsJfmY8k",
"Uegvzyl-wEU",
"b3G2QRE9qtY",
"rkFbx59lqEI",
"tFPuceqF37E",
"8wqAnj6Skjk",
"dsucNSCufJs",
"jh5lP3nmgC4",
"mNM0jy58gT8",
"rNkr_otHZUs",
"IDwWUHJ9PGk",
];
function makebox() {
$(".window:not(:animated)").each(function() {
addy = (Math.floor(Math.random() * addresses.length));
$(this).css({"top": Math.random() * window.innerHeight - 160,"left": "-"+Math.random() * 150 -150+"%","background-image": "url('https://img.youtube.com/vi/"+addresses[addy]+"/0.jpg')", "border": "10px solid", "color": getRandomColor});
$(this).animate({left: "150%"}, Math.random() * 5000 + 5000, makebox);
});
}
Again, the makebox() function begins with a test to see which divs on screen are animated and then sets the initial position in CSS before animating the div to move across the screen from left to right. However, we have added the new variable addy which is to be populated by a random number between 0 and the amount of values in the addresses array (by using the Math.floor() function, we round the random number down to the nearest integer).
$(this).css({"top": Math.random() * window.innerHeight - We’re making three significant changes to this CSS object in this iteration: First, we’re changing the starting X position of the div to a random value between 150% and 300% of the screen width left of the left edge. Second, we’re adding a 10 pixel border to the div in a random color. Third, we’re adding a new background image to the div’s CSS parameters by calling the thumbnail image stored on YouTube’s server for the video located at the address string stored in the addresses array at position addy.
160,"left": "-"+Math.random() * 150 -150+"%","background-image":
"url('https://img.youtube.com/vi/"+addresses[addy]+"/0.jpg')", "border":
"10px solid", "color": getRandomColor});
$(this).animate({left: "150%"}, Math.random() * 5000 + 5000, makebox); The last change in this version of the function is to call the makebox() function once the animation is finished.
iteration5.html
<html>
<head>
<script type="text/javascript" src="iteration5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
body {
overflow: hidden;
}
div.window {
position: absolute;
background-color: black;
left: -427px;
width: 427px;
height: 320px;
justify-content: center;
align-items: center;
}
div.window img {
width: 95%;
height: 95%;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
makebox();
});
</script>
<div class="window"></div>
</body>
</html>
We’ve only made minor changes to the CSS section of the HTML file. Since we want the images centered in the div container, we add the justify-content: center and align-items: center parameters to the window class div stylesheet and we resize the img elements within the window class divs to 95% of their original size. Everything else runs as the previous iteration (I did omit the extra divs, but they can be added back in as needed to populate the screen more fully.