Your assignment for this week is to build a Channel Changer Application. You will create an application containing multiple "channel" buttons that when clicked, displays a random video from that channel.
The number and type of channels is entirely up to you.
For example, your channels could be "UFOs", "Eating Competitions" and "Vintage Screensavers".
- Each channel in your data object must contain a
title
property and avideoIds
property that contains an array of video IDs. Please include at least three videos for each channel. - Use JavaScript to render a button for each channel. The text inside the button should be the title of the channel.
- Clicking a channel button should load a random video from the selected channel into an iframe embed inside the
#tv
element. This element starts empty, you must create the iframe and add it to the page. - Please restyle the elements on this page. I don't care what it looks like, just as long as it's not black / white / Helvetica in the end. Use the HTML structure that I've provided to start. Feel free to add additional elements if you need them for design or layout purposes.
- First you will want to define your channels as objects inside the
channels
array property of thedata
object - I've added some commented code to show you how this can be structured - Next, you will need to loop over each channel in the array. You can access this array by using dot notation -
data.channels
. To figure out how to loop over each each item in the array, Google "Javascript array forEach". - For each channel, you will need to:
- Create a button element (hint: use
document.createElement
) - Set the text of the button
- Append the button to the page.
- Add an event listener to the button to handle the click event
- Create a button element (hint: use
- The function that gets called on button click needs to:
- Know which channel button was clicked
- Use that channel to pull a random video from the associated array of videoId (remember: Arrays are zero indexed and
Math.random()
gives you a number between0
and1
) - Update the page with an iframe that loads the random video from YouTube using their "embed" iframe code.
- Fork this repository by clicking the "fork" button in the top right. This will create a new repository in your GitHub account.
- Add the repository to your computer by clicking the green "Code" button and selecting "Open with GitHub Desktop"
- Specify where to save the project on your computer
- Start working!
- Commit all of your code
- Enable GitHub Pages for your repository to get a link where your project is viewable
- Submit this link directly to me via e-mail (bowermas@newschool.edu) before class on Friday
- 🏁 All Done 🏁