I just want the code for the following. Page 3 – Topic - Create a video library
ID: 3818510 • Letter: I
Question
I just want the code for the following.
Page 3 – Topic - Create a video library with embedded videos and a feedback form to capture user comments
Display your favorite videos from YouTube within a table element. Incorporate at least 4 videos[1] for visual content within the second column, one on each row.
Provide a title/name for each of these videos on the leftmost (i.e., first) column of your table.
Include a feedback form below the table for the viewers to express their opinion about any one video that they liked the most. As part of the feedback collect the user's intended display name, name/id of the video and their comment.
Include a button in this form and display all the collected information along with the current date when they click on a Submit button.
You decide the layout for displaying these comments along with some user information and date on your page. You will need a JS function to do this.
Note: Do not copy from the web. The text, like the code, must be your own.
Write a JavaScript function in order to display the latest comment from the user on your web page. (Hint: you will require another HTML element in addition to a form, which acts as a placeholder for the newly added comments. This placeholder could be any h1-h6 or p elements without any content inside.) Display the current date and the user's display name along with the video’s name/id and their comment.
Refer info from the links: https://www.w3schools.com/jsref/jsref_obj_date.asp ; https://www.w3schools.com/js/js_date_methods.asp )
Test your JavaScript carefully.
Include at least one additional JavaScript within this page, which is to be downloaded from the web. You can choose a free JavaScript from the thousands that are available – nothing too tacky.
Note: Do not copy anything from the web. The text, like the code, must be your own with exception of your downloaded JavaScript.
Again make the page interesting and the layout look professional.
[1] Embedding a youtube video is as easy as using an image. See https://www.w3schools.com/html/html_youtube.asp
Explanation / Answer
Answer: See the code below:
--------------------------------
<html> <head> <title>Youtube Video Library</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <center><h2>Youtube Video Library</h2><br></center> <table id="table1"> <tr> <th>Video id/name</th> <th>Video</th> </tr> <tr> <td>1</td> <td> <iframe width="200" height="150" src="https://www.youtube.com/embed/n9DwoQ7HWvI" frameborder="0"> </iframe> </td> </tr> <tr> <td>2</td> <td> <iframe width="200" height="150" src="https://www.youtube.com/embed/uArWAMAmLDI" frameborder="0"> </iframe> </td> </tr> <tr> <td>3</td> <td> <iframe width="200" height="150" src="https://www.youtube.com/embed/Uv9_T0OOKI4" frameborder="0"> </iframe> </td> </tr> <tr> <td>4</td> <td> <iframe width="200" height="150" src="https://www.youtube.com/embed/ZMEHyrfoa7w" frameborder="0"> </iframe> </td> </tr> </table> </div> <div> <center><h2>Enter your comments here:</h2><br> <form id="form1" name="form1" action=""> <b>Display name:</b> <input id="dispname" type="text" name="displayname"> <br> <b>Video id/name:</b><input id="videoid" type="text" name="videoid"> <br> <b>Comments:</b><input id="comments" type="text" name="comments"> <br> <input id="submit" name="submit" type="submit" value="Submit"> </form> </center> <center> <h2>Latest comments from users:</h2> <p id="details"></p> </center> <script> function captureComment() { var form1=document.getElementById("form1"); var details=""; var i; for (i = 0; i < form1.length ;i++) { details += form1.elements[i].value + "<br>"; } document.getElementById("details").innerHTML = details; } </script> </div> </body> </html>
-----------------------------------------