Question

1. In your text editor, open the index.htm file from the HandsOnProject8-1 folder in the Chapter08 folder, add your name and4. Add a statement instructing processors to interpret the document contents in strict mode. Add another statement declaring

6. Within the createID() function, create an if statement that checks if the values of the elements referenced by the fname,then assigns that value to the Account ID field in the form. Finally, it ensures that the newAccountArray variable is empty,8. Save your changes to script.js, then open index.htm in your browser. Enter your name and address (or a fictitious name and

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 8
Hands-on Project 8-1

Author:
Date:   

Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 8-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>

<body>
<header>
<h1>
Hands-on Project 8-1
</h1>
</header>

<article>
<h2>New Account Information</h2>
<form>
<fieldset id="deliveryinfo">
<label for="fnameinput">First Name</label>
<input type="text" id="fnameinput" name="fname" />
<label for="lnameinput">Last Name</label>
<input type="text" id="lnameinput" name="lname" />
<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="emailinput">State</label>
<input type="text" id="stateinput" name="state" />
<label for="phoneinput">Zip</label>
<input type="text" id="zipinput" name="zip" />
<label for="accountid">Account ID</label>
<input type="text" id="accountidbox" name="accountid" />
</fieldset>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Create Account" />
</fieldset>
</form>
</article>
</body>
</html>

0 0
Add a comment Improve this question Transcribed image text
Answer #1

PROGRAM CODE:
index.html
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 8
Hands-on Project 8-1
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 8-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 8-1
</h1>
</header>
<article>
<h2>New Account Information</h2>
<form>
<fieldset id="deliveryinfo">
<label for="fnameinput">First Name</label>
<input type="text" id="fnameinput" name="fname" />
<label for="lnameinput">Last Name</label>
<input type="text" id="lnameinput" name="lname" />
<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="emailinput">State</label>
<input type="text" id="stateinput" name="state" />
<label for="phoneinput">Zip</label>
<input type="text" id="zipinput" name="zip" />
<label for="accountid">Account ID</label>
<input type="text" id="accountidbox" name="accountid" />
</fieldset>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Create Account" onclick="createID()"/>
</fieldset>
</form>
</article>
<script src="script.js"></script>
</body>
</html>
script.js
//To interpret in strict mode
"use strict";
var newAccountArray = [];
function createID()
{
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
var account = document.getElementById("accountidbox");
var fields = document.getElementsByTagName("input");
var acctid, firstInit, lastInit;
if(fname != null && lname != null && zip != null && fname != "" && lname != "" && zip != "" )
{
firstInit = fname.value.charAt(0).toUpperCase();
lastInit = lname.value.charAt(0).toUpperCase();
acctid = firstInit + lastInit + zip.value;
account.value = acctid;
newAccountArray = [];
for (var i = 0; i < fields.length - 1; i++)
{
newAccountArray.push(fields[i].value);
}
}
}
function createEventListeners() {
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
if (fname.addEventListener) {
fname.addEventListener("change", createID, false);
lname.addEventListener("change", createID, false);
zip.addEventListener("change", createID, false);
} else if (fname.attachEvent) {
fname.attachEvent("onchange", createID);
lname.attachEvent("onchange", createID);
zip.attachEvent("onchange", createID);
}
}
if
(window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}
OUTPUT:@Newalt Gateway Application Security Audits 1 // to interpret listrict hode 2 use strict; € C o f ile:///DE/Users/kastuk/De

Add a comment
Know the answer?
Add Answer to:
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:   ...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <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> Hands-on Project 5-2 </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"...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • Using JavaScript, I want to make a function that will open a new alert box that will say hello fi...

    Using JavaScript, I want to make a function that will open a new alert box that will say hello first name, last name after the person logs into the sign in form. This will happen aftrer the validation function is invoked. See code below. See the welcomefunction(). <!DOCTYPE html> <html> <head> <script> //validate the login form function validateForm() { var x = document.forms["LoginForm"]["fname"].value; //set x and y to first name and last name var y = document.forms["LoginForm"]["lname"].value; if (x ==...

  • Modify this code to store the form elements as variables and display them on the page...

    Modify this code to store the form elements as variables and display them on the page in an HTML table. <!DOCTYPE html> <html> <head> <script> function getValues() {     var result = ""; result += "First Name: " + document.forms["myForm"]["fname"].value + "<br>"; result += "Last Name: " + document.forms["myForm"]["lname"].value + "<br>"; result += "Address: " + document.forms["myForm"]["address"].value + "<br>"; result += "City: " + document.forms["myForm"]["city"].value + "<br>"; result += "State: " + document.forms["myForm"]["state"].value + "<br>"; document.getElementById("output").innerHTML = result; } </script>...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • i need the code that goes within the <script> opening and closing following the insturctions of...

    i need the code that goes within the <script> opening and closing following the insturctions of the insturctions of the pasted assignment screen shots please. <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 3 Hands-on Project 3-1 Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 3-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 3-1 </h1> </header> <article> <h2>Lunch selections</h2> <form> <input type="checkbox" id="item1" value="8" /> <label for="item1">Fried chicken ($8.00)</label> <input type="checkbox"...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT