In this lab, I used JavaScript and JSON to build a website with videos in it. First, I opened my zip file containing the HTML for Lab 12. All of the code for the HTML was complete already from <html> tags to <video> tags. For the CSS, I typed in html {min-height: 100%; min-width: 100%; max-height: 100%; max-width: 100%;} body {width: 100%; height: auto; background-color: #383838;} to make the webpage responsive to size changes and have a background color. Next I typed in .container {background-color: #F9A93e;} to make the background color of the <div> displaying the video orange. Then I typed in #videos-list {display: block; position: relative; float: left; height: 440px; width: auto; list-style-type: none; overflow-x: hidden; overflow-y: scroll;} to make the column containing the videos have a defined size, no bullet points, and have a vertical scroll. After that, I typed in .col-md-12 {width: 100%; height: auto; background-color: #F04C6b;} that makes the top <div> red. Lastly, I typed in .col-md-3 {width: 210px; height: auto; background-color: #3C3C3c;} This makes the div containing the video list have a black background color. For the JavaScript, I placed in:
{
"youtubeId": "yrWOhhOsg2k",
"title": "ur cute",
"author": "narpy"
},
{
"youtubeId": "QabOws88zD4",
"title": "give me the ball papa",
"author": "jimmy2296"
},
{
"youtubeId": "Fa2irrYK09w",
"title": "Knights in gym",
"author": "Ordo Kromen"
}
to insert more videos into the webpage. Knowing how to use JSON is useful to a web designer because it allows the web designer to input updated information into their website without changing the information over and over again.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_12/Lab_12.html
No comments:
Post a Comment