create a personal resume building tool. Form elements will be used to accept use
ID: 3857221 • Letter: C
Question
create a personal resume building tool. Form elements will be used to accept user input which will be assigned to variables. These variable values will make up the content of a new Web page that will be generated when a form button named Create Resume is clicked. This is called building a Web page "on-the-fly".
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.
<html>
<head>
<title> Pop-up on the fly </title>
<script>
function myWindow()
{
visitorName = document.getElementById("myInput").value;
myText = ("<html> <head> <title>Welcome</title> </head> <body> ");
myText += ("Hello " + visitorName + ", this page was created on-the-fly!");
myText += ("</body> </html>");
flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
}
</script>
</head>
<body>
<form id = "myForm">
<input type = "text" id = "myInput" value = "Please enter your name." />
<input type = "button" id = "myButton" value = "Create HTML on-the-fly" />
</form>
</body>
</html>
Explanation / Answer
Hi, Please find the below code where you can build your resume.
Here, I have used jquery to display date and as per your requirement I have created a separate js file and I have also added validation for email field. Here, you hav'nt specified any resume format so, i have genereated in a simple format. Please check it once and do comment in case of queries.
HTML page:
<html>
<head>
<title> Pop-up on the fly </title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="projectJs.js"></script>
</head>
<body>
<center>BUILD OUR RESUME</center>
<hr width="60%">
<form id = "myForm">
<table>
<tr><td>User Name: </td><td><input type = "text" id = "userName" placeholder = "Please enter your name." /></td></tr>
<tr><td>Address: </td><td><input type = "text" id = "address" placeholder = "Please enter your address." /></td></tr>
<tr><td>Phone No: </td><td><input type = "text" id = "phoneNo" placeholder = "Please enter your phone no." /></td></tr>
<tr><td>E-Mail: </td><td><input type = "text" id = "email" placeholder = "Please enter your email."/></td></tr>
<tr><td>Personal Data: </td><td><textarea rows="4" cols="50" id="personalData" placeholder="Please enter your personal data"></textarea></td></tr>
<tr><td>Career Obj: </td><td><textarea rows="4" cols="50" id="careerObj" placeholder="Please enter your career objective"></textarea></td></tr>
<tr><td>Educational Background: </td><td><textarea rows="4" cols="50" id="edubackgrnd" placeholder="Please enter your educational background"></textarea></tr>
<tr><td>From date </td><td><input type = "date" id = "fromDate" data-date-inline-picker="true"/></td></tr>
<tr><td>To date: </td><td><input type = "date" id = "toDate" data-date-inline-picker="true"/></td></tr>
<tr><td>Experience1: </td><td><textarea rows="4" cols="50" id="experience" placeholder="Please enter your experience"></textarea></td></tr>
<tr><td>From date </td><td><input type = "date" id = "fromDate1" data-date-inline-picker="true"/></td></tr>
<tr><td>To date: </td><td><input type = "date" id = "toDate1" data-date-inline-picker="true"/></td></tr>
<tr><td>Experience2: </td><td><textarea rows="4" cols="50" id="experience1" placeholder="Please enter your experience"></textarea></td></tr>
<tr><td>From date </td><td><input type = "date" id = "fromDate2" data-date-inline-picker="true"/></td></tr>
<tr><td>To date: </td><td><input type = "date" id = "toDate2" data-date-inline-picker="true" /></td></tr>
<tr><td>Experience3: </td><td><textarea rows="4" cols="50" id="experience2" placeholder="Please enter your experience"></textarea></td></tr>
<tr><td>From date </td><td><input type = "date" id = "fromDate3" data-date-inline-picker="true"/></td></tr>
<tr><td>To date: </td><td><input type = "date" id = "toDate3" data-date-inline-picker="true" /></td></tr>
<tr><td>Business Reference: </td><td><textarea rows="4" cols="50" id="busref" placeholder="Please enter your business reference"></textarea></td></tr>
</table>
<input type="button" value="Create Resume">
<input type = "button" id = "myButton" value = "Create HTML on-the-fly" />
</form>
</body>
</html>
Js Page:
/*
* 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.
*/
function myWindow()
{
visitorName = document.getElementById("userName").value;
myText = ("<html> <head> <title>Welcome</title> </head> <body> ");
myText += ("Hello " + visitorName + ", this page was created on-the-fly!");
myText += ("</body> </html>");
flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
}
function validateEmail()
{
var email=document.getElementById("email").value;
alert(email);
var atpos = email.indexOf('@');
if (atpos<1) {
alert("Not a valid e-mail address");
document.getElementById("email").value="";
return false;
}
alert("valid e-mail address");
}
function createResume()
{
var userName = document.getElementById("userName").value;
var address = document.getElementById("address").value;
var phoneNo = document.getElementById("phoneNo").value;
var email = document.getElementById("email").value;
var personalData = document.getElementById("personalData").value;
var careerObj = document.getElementById("careerObj").value;
var edubackgrnd = document.getElementById("edubackgrnd").value;
var fromDate = document.getElementById("fromDate").value;
var toDate = document.getElementById("toDate").value;
var experience = document.getElementById("experience").value;
var fromDate1 = document.getElementById("fromDate1").value;
var toDate1 = document.getElementById("toDate1").value;
var experience1 = document.getElementById("experience1").value;
var fromDate2 = document.getElementById("fromDate2").value;
var toDate2 = document.getElementById("toDate2").value;
var experience2 = document.getElementById("experience2").value;
var fromDate3 = document.getElementById("fromDate3").value;
var toDate3 = document.getElementById("toDate3").value;
myText = ("<html> <head> <title>Resume</title> </head> <body> ");
myText+=("<center> Resume</center>")
myText += ("Personal Details: ");
myText += ("userName : "+userName+" <br> ");
myText += ("address : "+address+" <br>");
myText += ("phoneNo : "+phoneNo+" <br>");
myText += ("email : "+email+" <br>");
myText += ("personalData : "+personalData+" <br>");
myText += ("Educational Background Details: <br>");
myText += ("careerObj : "+careerObj+" <br>");
myText += ("edubackgrnd : "+edubackgrnd+" <br>");
myText += ("fromDate : "+fromDate+" <br>");
myText += ("toDate : "+toDate+" <br>");
myText += ("Work Experience: <br>");
myText += ("experience : "+experience+" <br>");
myText += ("fromDate : "+fromDate1+" <br>");
myText += ("toDate : "+toDate1+" <br>");
myText += ("experience : "+experience1+" <br>");
myText += ("fromDate : "+fromDate2+" <br>");
myText += ("toDate : "+toDate2+" <br>");
myText += ("experience : "+experience2+" <br>");
myText += ("fromDate : "+fromDate3+" <br>");
myText += ("toDate : "+toDate3+" <br>");
myText += ("</body> </html>");
flyWindow = window.open('about:blank','myPop','width=1000,height=500,left=200,top=200');
flyWindow.document.write(myText);
}
$(function(){
// Find any date inputs and override their functionality
$('input[type="date"]').datepicker();
});
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.