develop a simple Javascript element. Please explain answer. Page 1 <!DOCTYPE htm
ID: 3720191 • Letter: D
Question
develop a simple Javascript element.
Please explain answer.
Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First website</title>
<a id="TOP"></a>
<style>
body {font-family: "times new roman",Times,serif;}
* {font-style:normal !Important}
h1 {text-align:center;}
h3 {text-align;center;}
body{
color:#f4a460
}
img {
height: 600px,
width: 800px
}
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: #f4a460;
background-color: white;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
article {
margin-left: 300px;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Childs Play</h1>
<h3>Fun Bouncers For Kids</h3>
<br><br>
<p><a href="https://youtu.be/iDGj1W4JTbw">Bouncer Video</a><BR>
<a href="packagepage.html">packagepage</a><br>
<a href="reservationpage.html">reservations</a>
<p><img src="bouncers.jpg" height="250" width="400" alt="bouncers" class="center">
<img src="bouncers2.jpg" height="250" width="400" alt="bouncers2">
<img src="bouncers3.jpg" height="250" width="400" alt="bouncers3">
<img src="toddlerjumppackage.jpg" height="250" width="400" alt="toddlerjumppackage">
<img src="dualslidebouncer1.jpeg" height="250" width="400" alt="dualslidebouncer1">
<img src="waterslidepackage2.jpg" height="250" width="400" alt="waterslidepackage2">
</p>
<ul>
<li>Easy to set up</li>
<li>Easy to Use</li>
<li>Safe bouncers for ages 2-11</li>
</ul>
<p>Call now: (901)555-5555</p>
<p>©Copyright 2018 Child Play. All rights reserved.</p><br>
<a href="#TOP">BACK TO TOP</a>
</body>
</html>
Page 2
<!DOCTYPEhtml>
<html>
<body>
<body>
<h2>Reservations(Please reserve your date)</h2>
<br>
<h3>Please complete this form and someone will contact you within 48hours <h3>
<form>
<table>
<tr>
<td>First name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Reservation date</td>
<td><input type="date"> </td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" maxlength="10"> </td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text"> </td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text"> </td>
</tr>
<tr>
<td>Desired Package:</td>
<td><input type="text"> </td>
</tr>
<br>
</table>
<input type="reset" value="Reset"><Reset button>
<input type="submit" value="Submit"> <Submit button><br>
<br>
Deposit is due 2 weeks before date of reservation.<br><br>
<input type="button" value="Back"><br>
</body>
</html>
Page 3
!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<h1><i>Prices and Packaging</i></h1
<h3><i><i></h3>
<body>
<img src="dualslidebouncer1.jpeg"height="200" width="400" alt="dualslidebouncer">
Dual Slide<BR>
6ft slide with bouncer
$150 per hour $175 on Saturdays<br><br><br><br><br><br><br><br><br><br><br>
<img src="Waterslidepackage2.jpg"style="float:right"height="200" width="400" alt="waterslide">
Water Slide Package
includes a 6ft slide and a 3ft slide with bouncer
$225 per hour $250 on Saturdays
<p></p><br><br><br><br><br><br><br><br>
<input type="button" value="Back">
<p>© Copyright 2018 Childs Play. All rights reserved.<p/>
</html>
</body>
Explanation / Answer
JavaScript:
What JavaScript can do in a web application,
----------------------------------------------------------------------------------------------------------------------------
Below are two different ways we can use JavaScript in the web page
----------------------------------------------------------------------------------------------------------------------------
In an above question you asked to create an element in a each html page, so I will create three different elements in 3 html by using JavaScript, below is the code to create element in JavaScript.
document.createElement("ElementName");
Above code will create new element in a html document. For example if we need to create div element we have below syntax,
document.createElement("div");
After creating an element, we need to add some content inside that element which we have created. For adding content inside an element, we have following syntax,
ElementSelector.innerHTML = "Some random text";
For suppose we have stored created element in a variable called “myDiv”, following is code to add content in created tag,
myDiv.innerHTML = "Some random text";
After adding content to div element, we need to attach that element to body of the html or any tag you wish to add after. Below is the code for appending new element to body tag,
document.body.appendChild(myDiv);
Hope you got basic idea about how create a new element, add content to created element and attaching created element to the body tag.
----------------------------------------------------------------------------------------------------------------------------
Page 1:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First website</title>
<a id="TOP"></a>
<style>
body {
font-family: "times new roman", Times, serif;
}
* {
font-style: normal !Important
}
h1 {
text-align: center;
}
h3 {
text-align;
center;
}
body {
color: #f4a460
}
img {
height: 600px,
width: 800px
}
div.container {
width: 100%;
border: 1px solid gray;
}
header,
footer {
padding: 1em;
color: #f4a460;
background-color: white;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
article {
margin-left: 300px;
padding: 1em;
overflow: hidden;
}
</style>
<script type="text/javascript">
function onloadFunction() {
var myDiv = document.createElement("div");
myDiv.innerHTML = "This is page one div created by javascript";
myDiv.style.color = "red";
myDiv.style.fontSize = "xx-large";
document.body.appendChild(myDiv);
}
</script>
</head>
<body>
<h1>Childs Play</h1>
<h3>Fun Bouncers For Kids</h3>
<br>
<br>
<a href="https://youtu.be/iDGj1W4JTbw">Bouncer Video</a>
<BR>
<a href="packagepage.html">packagepage</a>
<br>
<a href="reservationpage.html">reservations</a>
<p>
<img src="bouncers.jpg" height="250" width="400" alt="bouncers" class="center">
<img src="bouncers2.jpg" height="250" width="400" alt="bouncers2">
<img src="bouncers3.jpg" height="250" width="400" alt="bouncers3">
<img src="toddlerjumppackage.jpg" height="250" width="400" alt="toddlerjumppackage">
<img src="dualslidebouncer1.jpeg" height="250" width="400" alt="dualslidebouncer1">
<img src="waterslidepackage2.jpg" height="250" width="400" alt="waterslidepackage2">
</p>
<ul>
<li>Easy to set up</li>
<li>Easy to Use</li>
<li>Safe bouncers for ages 2-11</li>
</ul>
<p>Call now: (901)555-5555</p>
<p>©Copyright 2018 Child Play. All rights reserved.</p>
<br>
<a href="#TOP">BACK TO TOP</a>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
Page 2:-
<!DOCTYPEhtml>
<html>
<head>
<script type="text/javascript">
function onloadFunction() {
var myDiv = document.createElement("button");
myDiv.innerHTML = "created by javascript";
myDiv.style.color = "red";
myDiv.style.fontSize = "xx-large";
document.body.appendChild(myDiv);
}
</script>
</head>
<body>
<body>
<h2>Reservations(Please reserve your date)</h2>
<br>
<h3>Please complete this form and someone will contact you within 48hours
</h3>
<form>
<table>
<tr>
<td>First name:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Last name:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Reservation date</td>
<td>
<input type="date"> </td>
</tr>
<tr>
<td>Phone Number:</td>
<td>
<input type="text" maxlength="10"> </td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="text"> </td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text"> </td>
</tr>
<tr>
<td>Desired Package:</td>
<td>
<input type="text"> </td>
</tr>
<br>
</table>
<input type="reset" value="Reset">
<Reset button>
<input type="submit" value="Submit">
<Submit button>
<br>
<br> Deposit is due 2 weeks before date of reservation.
<br>
<br>
<input type="button" value="Back">
<br>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
Page 3:-
!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<script type="text/javascript">
function onloadFunction() {
var myDiv = document.createElement("input");
myDiv.placeholder = "input created by javascript";
myDiv.style.fontSize = "large";
document.body.appendChild(myDiv);
}
</script>
</head>
<body>
<h1>
<i>Prices and Packaging</i>
</h1>
<h3>
<i>
</i>
</h3>
<img src="dualslidebouncer1.jpeg" height="200" width="400" alt="dualslidebouncer"> Dual Slide
<BR> 6ft slide with bouncer $150 per hour $175 on Saturdays
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="Waterslidepackage2.jpg" height="200" width="400" alt="waterslide"> Water Slide Package includes a 6ft slide and a 3ft slide with bouncer $225 per hour $250 on Saturdays
<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type="button" value="Back">
<p>© Copyright 2018 Childs Play. All rights reserved.
</p>
</body>
</html>
---------------------------------------------END OF THE ANSWER------------------------------------------------
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.