homerhanumat/custom.js

## custom.js
/********************************************************************
 *
 * Script to insert random Youtube embed into index.html
 *
 *******************************************************************/

 // The array of objects, one object for each artist.

 const artists = [
   {
     name: "Ms Scandalous",
     birthYear: 1985,
     link: "https://www.youtube.com/watch?v=2FPivlfvxu0"
   },
   {
    name: "Juggy D",
    birthYear: 1981,
    link: "https://www.youtube.com/watch?v=1jAc_-FVjdI"
  },
  {
    name: "Sukhbir Singh",
    birthYear: 1969,
    link: "https://www.youtube.com/watch?v=HiprNF9Jad0"
  },
  {
    name: "Abrar-ul-Haq",
    birthYear: 1989,
    link: "https://www.youtube.com/watch?v=-lnnVIP7FEc"
  },
  {
    name: "Rishi Rich",
    birthYear: 1970,
    link: "https://www.youtube.com/watch?v=O95-w2gACuA"
  }
 ]

 // complete with code to randomly embed one of the above
 // videos upon load/reload of index.html

/********************************************************************
 *
 * Solution
 *
 *******************************************************************/

 // this will hold the ids:
 let ids = [];

 // from artists, strip the id from each video link and
 // push to ids
 function getID(artist) {
   const link = new String(artist.link);
   const pattern = /watch\?v=(.*)$/
   const match = pattern.exec(link);
   ids.push(match[1]);
 }

 artists.forEach(getID);

 // set up the event listener:

const iframe = document.querySelector("#bhangra");

function deliverVideo() {
  const randomNumber = Math.floor(ids.length * Math.random());
  const randomID = ids[randomNumber];
  const bhangraDiv = document.querySelector("#bhangra");
  const src = "https://www.youtube.com/embed/" + randomID;
  let embed = '<iframe id="bhangra" width="560" height="315" src=';
  embed = embed + src + ' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; ';
  embed = embed + 'picture-in-picture" allowfullscreen></iframe>';
  bhangraDiv.innerHTML = embed;
}

window.addEventListener("load", deliverVideo);

## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">

<head>
  <title>CSC 324 | Random Content Assignment</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Table assignment for CSC 324 at Georgetown College, Kentucky.">
  <meta name="keywords" content="computer science web javascript">
  <!-- styles -->
  <link rel="stylesheet" href="css/tufte.css">
</head>

<body>
  <article>
    <h1>Random Bhangra Videos</h1>
    <section>
      <p>
        Every time you reload this page you will get a random embedded YouTube video of one
        of your favorite Bhangra artists.  Enjoy!
      </p>
      <div id="bhangra">

      </div>
    </section>
  </article>
  <script src="js/custom.js"></script>
</body>

</html>
	/********************************************************************
	*
	* Script to insert random Youtube embed into index.html
	*
	*******************************************************************/

	// The array of objects, one object for each artist.

	const artists = [
	{
	name: "Ms Scandalous",
	birthYear: 1985,
	link: "https://www.youtube.com/watch?v=2FPivlfvxu0"
	},
	{
	name: "Juggy D",
	birthYear: 1981,
	link: "https://www.youtube.com/watch?v=1jAc_-FVjdI"
	},
	{
	name: "Sukhbir Singh",
	birthYear: 1969,
	link: "https://www.youtube.com/watch?v=HiprNF9Jad0"
	},
	{
	name: "Abrar-ul-Haq",
	birthYear: 1989,
	link: "https://www.youtube.com/watch?v=-lnnVIP7FEc"
	},
	{
	name: "Rishi Rich",
	birthYear: 1970,
	link: "https://www.youtube.com/watch?v=O95-w2gACuA"
	}
	]

	// complete with code to randomly embed one of the above
	// videos upon load/reload of index.html

	/********************************************************************
	*
	* Solution
	*
	*******************************************************************/

	// this will hold the ids:
	let ids = [];

	// from artists, strip the id from each video link and
	// push to ids
	function getID(artist) {
	const link = new String(artist.link);
	const pattern = /watch\?v=(.*)$/
	const match = pattern.exec(link);
	ids.push(match[1]);
	}

	artists.forEach(getID);

	// set up the event listener:

	const iframe = document.querySelector("#bhangra");

	function deliverVideo() {
	const randomNumber = Math.floor(ids.length * Math.random());
	const randomID = ids[randomNumber];
	const bhangraDiv = document.querySelector("#bhangra");
	const src = "https://www.youtube.com/embed/" + randomID;
	let embed = '<iframe id="bhangra" width="560" height="315" src=';
	embed = embed + src + ' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; ';
	embed = embed + 'picture-in-picture" allowfullscreen></iframe>';
	bhangraDiv.innerHTML = embed;
	}

	window.addEventListener("load", deliverVideo);
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">

	<head>
	<title>CSC 324 \| Random Content Assignment</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- Enable responsiveness on mobile devices-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Table assignment for CSC 324 at Georgetown College, Kentucky.">
	<meta name="keywords" content="computer science web javascript">
	<!-- styles -->
	<link rel="stylesheet" href="css/tufte.css">
	</head>

	<body>
	<article>
	<h1>Random Bhangra Videos</h1>
	<section>
	<p>
	Every time you reload this page you will get a random embedded YouTube video of one
	of your favorite Bhangra artists. Enjoy!
	</p>
	<div id="bhangra">

	</div>
	</section>
	</article>
	<script src="js/custom.js"></script>
	</body>

	</html>