Related questions
<!DOCTYPE html>
<html>
<head>
<!--
Pop up Tutorial
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hands-on Project 5-2</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Pop-Up Tutorial
</h1>
</header>
<article>
<h2>Change of address form</h2>
<form>
<fieldset id="contactinfo">
<label for="addrinput">
Street Address
</label>
<input type="text" id="addrinput" name="Address" />
<label for="cityinput">
City
</label>
<input type="text" id="cityinput" name="City" />
<label for="stateinput">
State/Province
</label>
<input type="text" id="stateinput" name="State" />
<label for="zipinput">
Zip/Postal Code
</label>
<input type="number" id="zipinput" name="Zip" />
</fieldset>
<fieldset id="submitsection">
<input type="button" id="submit" value="Submit" />
</fieldset>
</form>
</article>
<script>
"use strict";
function processInput() {
var propertyWidth = 300;
var propertyHeight = 100;
var winLeft = ((screen.width - propertyWidth) / 2);
var winTop = ((screen.height - propertyHeight) / 2);
var winOptions = "width=300,height=100";
winOptions += ",left=" + winLeft;
winOptions += ",top=" + winTop;
window.open("confirm.htm", "confirm", winOptions);
}
// add event listener to Submit button
function createEventListener() {
var submitButton = document.getElementById("submit");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
}
if (window.addEventListener) {
window.addEventListener("load", createEventListener, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListener);
}
</script>
</body>
</html>
______________________________________________________________________
confirm.html --> create another html file
<!DOCTYPE html>
<html>
<head>
<!--
Pop Up Page
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation</title>
</head>
<body>
<p>Your address has been updated.</p>
</body>
</html>
-----------------------------------------------------------------------
Q1- Add a Close Link to the Pop Up page : Onclick of the link, the pop-up should disappear.
Step by stepSolved in 2 steps
- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 4 - Positions</title> <style> /* element selector */ replace-me { font-size: 10px; margin: 0; background-color:#414046; } /* class selector */ .replace-me { position: fixed; left: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 0; top: 0;…arrow_forward<?xml version="1.0" encoding ="UTF-8"?><AUCTIONBLOCK><ITEM><TITLE>Vase and Stones</TITLE><ARTIST>Linda Mann</ARTIST><DIMENSIONS>20x30 inches</DIMENSIONS><MATERIALS>Oil</MATERIALS><YEAR>1996</YEAR><DESCRIPTION/><PREVIEW-SMALL SRC="images/burl-s.jpg" WIDTH="300" HEIGHT="194" ALT="Vase and Stones"><!--The small image--></PREVIEW-SMALL><PREVIEW-LARGE SRC="images/burl.jpg" WIDTH="640" HEIGHT="413" ALT="Vase and Stones"/><BIDS><BID><PRICE>3300</PRICE><TIME>9:19:32 AM</TIME><BIDDER>John</BIDDER><TIMESTAMP>1315</TIMESTAMP></BID><BID><PRICE>3200</PRICE><TIME>8:18:31 AM</TIME><BIDDER>Andrew</BIDDER><TIMESTAMP>1308</TIMESTAMP></BID><BID><PRICE>3100</PRICE><TIME>2:48:08…arrow_forwardwhat I have so far <!DOCTYPE html><html><head><link rel="stylesheet" href="mystyle.css"><title>About me</title></head><body> <h1>Josiah McSweeney</h1> <div ><div><h2>A bit about me</h2></div> <p>I'm a very open individual I like to chat maybe a little too much I love working with technology which is probably one of the biggest reasons why I'm here now and something that you may need to know about me is I have dysgraphia which is a medical condition and it makes it so I'm unable to write anything down on paper/write anything that could be read on paper</p> <p>Some other things to know about me are but I am very meticulous about any and all of my work but I'm not sure if this is because I'm responsible or because of my anxiety disorder which causes me to not forget about anything I really am not sure about this but I'm going to take it as is</p> <div><h2>Stuff I…arrow_forward
- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 4 - Positions</title> <style> /* element selector */ replace-me { font-size: 10px; margin: 0; background-color:#414046; } /* class selector */ .replace-me { position: fixed; left: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 0; top: 0;…arrow_forward<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 2 - Relative</title> <style> /* Write your style rules here */ </style></head><body> <!-- Write your HTML here --></body></html>arrow_forward<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 1b - Floats</title> <style> /* Finish this rule */ img:nth-of-type(1) { } /* Finish this rule */ img:nth-of-type(2) { } /* don't modify this rule */ p { font-size: 1.25em; text-align: center; } </style></head><body> <img src="https://via.placeholder.com/150"> <img src="https://via.placeholder.com/150"> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut…arrow_forward
- <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Black Goose Bistro Summer Menu</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Marko+One&display=swap" rel="stylesheet"> <style> body { font-family: 'Open Sans', sans-serif; } h1{ font-family: 'Marko One', serif; } </style> </head> <body> <div id="info"> <h1>Black Goose Bistro • Summer Menu</h1> <p>Baker's Corner, Seekonk, Massachusetts<br> <span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and…arrow_forward<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 3 - Absolute</title> <style> /* do not modify this rule */ h1 { text-align: center; } /* do not modify this rule */ div { width: 400px; height: 400px; } </style></head><body> <h1>Absolute</h1> <div class="container"> <div class="front"></div> <div class="middle"></div> <div class="back"></div> </div></body></html>arrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON 
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education