inside out – STEP 011 | Intro to JavaScript & Using Videos – Assignment
Overview
In this lesson we learn how to use an iframe to display other webpages in a webpage and how to show a YouTube video in a webpage. We explore laying out div elements to create cards that capture information about our favorite movies on our movies page. Additionally we reuse the code we created for our movies page to populate our music page as well. Finally we take our cards we created and add some JavaScript to them to update the movie displayed in the top of the page with the selected video. This lesson has been broken up in to 2 videos and are associated as part a and part b.
Each action item has been linked to the time stamp in the lesson video to help you focus on learning rather than searching for information. Please be sure to complete each step as demonstrated in Part A & Part B videos.
Action Items to Complete
- Complete all steps completed in the video “inside out – STEP 011 | Intro to JavaScript & Using Videos – Part A”.
- 00:00 – Introduction
- 00:12 – lesson overview
- 02:09 – create step-011 folder (copy paste 009)
- 03:17 – build iframe in the movies page
- 04:38 – what is a iframe
- 07:06 – add message for non-working iframe
- 09:30 – update styles by adding css rules in log
- 12:17 – copy iframe to music page
- 13:29 – gather your movie/music information
- 21:35 – creating YouTube Playlists
- 22:28 – continue to part b
- 24:08 – create our first card
- 27:43 – clearing floats in css
- 29:28 – add image to card before duplicating it
- 30:03 – create images folder & put images in it
- 31:32 – add default image to card
- 35:22 – add the 6 boxes to the music page
- 36:16 – add cards to movies page
- Complete all steps completed in the video “inside out – STEP 011 | Intro to JavaScript & Using Videos – Part B”.
- 00:00 – Introduction
- 00:39 – add page content for music page
- 02:27 – make css correction to cardInfoText
- 11:42 – add page content for movies page
- 19:20 – update movie in player on movies page
- 19:58 – add some JavaScript
- 23:03 – talk about functions
- 27:35 – update the movies page video with click
- 31:22 – add JavaScript scroll to movies page
- 32:49 – add our script to the music page
- Push all the files you have created to your server and review that your work is error-free and aligns with the completed work in the video. UPLOAD YOUR WORK TO YOUR WEBSITELinks to an external site.
- Submit the url to your website once you have validated your work and are confident you have completed everything. Your page should look like the one you see when you go here: https://inside-out-project.com/step/step-011/music.html
-
please note: your assignment is to be submitted in the step folder as shown in the example above.