1. Create an HTML document named finalProject. The title bar (tab) should read W
ID: 3712401 • Letter: 1
Question
1. Create an HTML document named finalProject. The title bar (tab) should read WEB 115 Final Project. 2. Create an external JavaScript document (with the .js file extension) named projectJS.js. In projectJS.js, enter the code that will write your name with the following formatting: H1 header, red, Tahoma font, centered text. On a new line your JavaScript must write your course and section number with the following formatting: H2 header, Garamond font, red, italicized, centered text. All remaining JavaScript must be coded in this document. 3. In your HTML document named finalProject, write the Javascript code (after the opening BODY tag) that will link to your external JavaScript document named projectJS.js so that your name, course and section number appear in the finalProject.htm Web document. 4. Create a horizontal rule that is sixty percent of the width of the viewer's screen in finalProject.htm 5. Create a centered title that reads Build Your Resume. 6. Use break and paragraph tags in order to make all of the following elements easy to read and understand. 7. Create a text box with the appropriate prompt (not the prompt method) so that the user knows to enter their full name. 8. Create a text box with the appropriate prompt (not the prompt method) so that the user knows to enter their full address. 9. Create a text box with the appropriate prompt (not the prompt method) so that the user knows to enter their phone number 10. Create a text box with the appropriate prompt (not the prompt method) so that the user knows to enter their e-mail address 11. Write JavaScript code to validate the e-mail address input. Make sure that the user has entered the @ symbol. No resume should be generated until this validation is completed. 12. Use the form textarea tag to create a text entry area with the appropriate prompt (not the prompt method) so that the user knows to enter their personal data. 13. Use the form textarea tag to create a text entry area with the appropriate prompt (not the prompt method) so that the user knows to enter their career objective. 14. Use the form textarea tag to create a text entry area with the appropriate prompt (not the prompt method) so that the user knows to enter their Educational background. 15. Create a text box with the appropriate prompt (not the prompt method) so that the user knows to enter the entry and exit dates of their most recent employment experience. IMPORTANT! For this item you must use the input "date" element. Example: which will generate a calendar when clicked. Use the value property to extract the user's selection. Example: var firstDate = document.getElementById("myDate1").value 16. Use the form textarea tag to create a text entry area with the appropriate prompt (not the prompt method) so that the user knows to enter the details of their most recent employment experience. 17. Repeat steps 14 and 15 to allow for 3 more prior employment experience data entry areas. 18. Use the form textarea tag to create a text entry area with the appropriate prompt (not the prompt method) so that the user knows to enter the details of their business references. 19. Create a form button named Create Resume. When clicked this button should call a function that generates a new Web page displaying a resume based on the user input. Use the document.write() method to populate the newly generated Web page with all of the HTML elements, formatting and variable values needed to produce the desired output in Web (.htm) format. HINT: a monospaced font will allow text wrapping in your output. You may also provide for this using CSS.
Explanation / Answer
finalProject.htm
<!DOCTYPE html>
<html>
<head>
<title>WEB 115 Final Project</title>
</head>
<body>
<script src="projectJS.js"></script>
</body>
</html>
<style>
b{
color:black;
font-family:garamond;
font-size:20px;
margin:10px;
padding:10px;
text-align: left;
}
i{
color:teal;
font-family:tahoma;
font-size:20px;
margin:10px;
padding:10px;
}
input,textarea{width:200px;padding:10px;}
input[type=button]{
background-color:blue;
color:white;
border:0px;
border-radius:10px;
}
</style>
projectJS.js
//2 and 3
document.write("<h1>Venkatesh Mogili</h1>");
document.write("<h2>Course: Computer Science and Engineering, Section: 2</h2>");
//4
document.write("<hr>");
//5
document.write("<center><h1>Build Your Resume</h1>");
//6
document.write("<br/>");
//7
document.write("<p><input type='text' placeholder='Enter your fullname: ' id='fullname'></p>");
//8
document.write("<p><input type='text' placeholder='Enter your fulladdress: ' id='fulladdress'></p>");
//9
document.write("<p><input type='number' placeholder='Enter your phone number: ' id='phonenumber'></p>");
//10 and 11
document.write("<p><input type='email' placeholder='Enter your e-mail address: ' required id='email'></p>");
//12
document.write("<p><textarea placeholder='Enter your Personal Data: ' id='pd'></textarea></p>");
//13
document.write("<p><textarea placeholder='Enter your Career Objective: ' id='co'></textarea></p>");
//14
document.write("<p><textarea placeholder='Enter your Educational Background: ' id='eb'></textarea></p>");
//15
document.write("<p>Entry: <input type='date' placeholder='Enter your Entry Date: ' value='' id='myDate1'> ( and ) Exit: <input type='date' placeholder='Enter your Exit Date: ' value='' id='myDate2'></p>");
//16
document.write("<p><textarea placeholder='Enter your most recent employment experience: ' id='ee'></textarea></p>");
//17
document.write("<p><textarea placeholder='Enter your Educational Background: ' id='eb2'></textarea></p>");
document.write("<p>Entry: <input type='date' placeholder='Enter your Entry Date: ' value='' id='myDate3'> ( and ) Exit: <input type='date' placeholder='Enter your Exit Date: ' value='' id='myDate4'></p>");
document.write("<p><textarea placeholder='Enter your Educational Background: ' id='eb3'></textarea></p>");
document.write("<p>Entry: <input type='date' placeholder='Enter your Entry Date: ' value='' id='myDate5'> ( and ) Exit: <input type='date' placeholder='Enter your Exit Date: ' value='' id='myDate6'></p>");
document.write("<p><textarea placeholder='Enter your Educational Background: ' id='eb4'></textarea></p>");
document.write("<p>Entry: <input type='date' placeholder='Enter your Entry Date: ' value='' id='myDate7'> ( and ) Exit: <input type='date' placeholder='Enter your Exit Date: ' value='' id='myDate8'></p>");
//18
document.write("<p><textarea placeholder='Enter your business references: ' id='br'></textarea></p>");
//19
document.write("<input type='button' value='Create Resume'/></center>");
//output
function validateemail()
{
var fullname=document.getElementById("fullname").value;
var fulladdress=document.getElementById("fulladdress").value;
var phonenumber=document.getElementById("phonenumber").value;
var email=document.getElementById("email").value;
var pd=document.getElementById("pd").value;
var co=document.getElementById("co").value;
var eb=document.getElementById("eb").value;
var firstDate1=document.getElementById("myDate1").value;
var secondDate1=document.getElementById("myDate2").value;
var ee=document.getElementById("ee").value;
var eb2=document.getElementById("eb2").value;
var firstDate2=document.getElementById("myDate3").value;
var secondDate2=document.getElementById("myDate4").value;
var eb3=document.getElementById("eb3").value;
var firstDate3=document.getElementById("myDate5").value;
var secondDate3=document.getElementById("myDate6").value;
var eb4=document.getElementById("eb4").value;
var firstDate4=document.getElementById("myDate7").value;
var secondDate4=document.getElementById("myDate8").value;
var br=document.getElementById("br").value;
var email=document.getElementById("email").value;
var atposition=email.indexOf("@");
var dotposition=email.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){
alert("Please enter a valid e-mail address");
return false;
}
else{
document.write("<center><div><h1>Your Resume</h1></center>");
document.write("<p><b>Fullname: <i>"+fullname+"</i></b></p>");
document.write("<p><b>Full Address: <i>"+fulladdress+"</i></b></p>");
document.write("<p><b>Phone Number: <i>"+phonenumber+"</i></b></p>");
document.write("<p><b>E-mail: <i>"+email+"</i></b></p>");
document.write("<p><b>Personal Data: <i>"+pd+"</i></b></p>");
document.write("<p><b>Career Objective: <i>"+co+"</i></b></p>");
document.write("<p><b>Educational Background: <i>"+eb+"</i></b></p>");
document.write("<p><b>Entry: <i>"+firstDate1+"</i></b></p>");
document.write("<p><b>Exit: <i>"+secondDate1+"</i></b></p>");
document.write("<p><b>Employment Experience: <i>"+ee+"</i></b></p>");
document.write("<p><b>Educational Background: <i>"+eb2+"</i></b></p>");
document.write("<p><b>Entry: <i>"+firstDate2+"</i></b></p>");
document.write("<p><b>Exit: <i>"+secondDate2+"</i></b></p>");
document.write("<p><b>Educational Background: <i>"+eb3+"</i></b></p>");
document.write("<p><b>Entry: <i>"+firstDate3+"</i></b></p>");
document.write("<p><b>Exit: <i>"+secondDate3+"</i></b></p>");
document.write("<p><b>Educational Background: <i>"+eb4+"</i></b></p>");
document.write("<p><b>Entry: <i>"+firstDate4+"</i></b></p>");
document.write("<p><b>Exit: <i>"+secondDate4+"</i></b></p>");
document.write("<p><b>Business References: <i>"+br+"</i></b></p></div></center>");
}
}
I think you got the deserved output. Thank you:-)
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.