2. [25 pts] knock-knock-1.html, knock-knock-1.js, and knock- knock-1.css.

A) In Atom, use Emmet to create a standards-compliant HTML5 web page, with an empty body. Save it as knock- knock-1.html in your 111/p5/ folder. B) Add a script element at the end of the body element to

connect the .html file to the knock-knock-1.js.

C) Add a link element to the head section that connects to the .css file. D) Download knock-knock.js to your p5 folder.

--> the link to knock-knock.js file https://gist.github.com/mh108/c6a308bf63104bc43e37101b2ccb9dce or follow code script below

// jshint esversion: 6 //Set up knock knock page let setup = function() { let newH2, newButton; //create and append a header newH2 = document.createElement("h2"); newH2.textContent = "Knock, Knock!"; document.body.appendChild(newH2); //create and append a button newButton = document.createElement("button"); newButton.textContent = "Who's There?"; newButton.style.fontSize = "large"; //add clickHandler1 to the button for the click event newButton.addEventListener("click", clickHandler1); document.body.appendChild(newButton); }; //define onclick handler #1 var clickHandler1 = function() { //change h2 content to "Sam and Janet!" //change button textContent to "Sam and Janet Who?" //add clickHandler2 to the button for the click event }; //define onclick handler #2 var clickHandler2 = function() { //change h2 content to "Sam and Janet Evening!" //change button textContent to "Youtube It!" //add clickHandler3 to the button for the click event }; //define onclick handler XC var clickHandler3 = function() { //create an iframe createElement //set all of the iframe's properties //enable autoplay when iFrame loads //set style properties of iFrame //append iframe to web page }; //register the onload handler window.addEventListener("load", setup);

_________________________

E) Complete clickHandler1, and test the web app. F). Complete clickHandler2, and test the web app. G) Complete clickHandler3. When the user clicks the Youtube It! button, an iFrame is created and appended to the web page. A youtube video related to the knock, knock joke starts on autoplay. H) In the .css file, include rules that style the iFrame so that it not jammed against other page elements, is centered, and has a border.