Here is the current project. I need the same layout however i am not alloud to u
ID: 3715846 • Letter: H
Question
Here is the current project. I need the same layout however i am not alloud to use table formatting with the CreateResume output. You will need to create a two column layout in your generated resume Web page to achieve the desired layout. Use an HTML5/CSS based layout (i.e do not use HTML tables for formatting purposes).
??Here is the current code, I only need the output of createResume() changed to use the div left and div right to make columns.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WEB 115 Final Project</title>
<script src="projectJS.js"></script>
<style>
h1{
font-family: "Tahoma";
color: red;
}
h2{
font-family: "Garamond";
color: red;
}
h5{
font-family: "Tahoma";
color: black;
}
hr{
width: 60%; }
body {
font-size:18pt;
font-family:verdana;
}
td {
padding: 10px;
}
div#theLeft
{
clear: both;
width: 15%;
float: left;
}
div#theRight
{
width: 83%;
float: right;
padding-bottom: 20px;
padding-right: 30px;
}</style>
</head>
<body>
<p id="p1"></p>
<script>
setName();
</script>
<hr>
<center>
<h3>Build Your Resume</h3>
</center>
<table>
<tr>
<td>Full Name</td>
<td><input type="text" name="fullName" id="fullName" placeholder="Enter Your Full Name"></td>
<tr>
<td>Full Address</td>
<td><input type="text" name="address" id="address" placeholder="Enter Your Full Address"></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="phone" id="phone" placeholder="Enter Your Phone Number"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" placeholder="Enter Your Email"></td>
</tr>
<tr>
<td>Personal Information</td>
<td> <textarea rows="4" cols="50" id="personalInfo" placeholder="Enter Your personal Information" ></textarea></td>
</tr>
<tr>
<td>Career Objective</td>
<td> <textarea rows="4" cols="50" id="careerObj" placeholder="Enter Your Career Objective" ></textarea></td>
</tr>
<tr>
<td>Education</td>
<td> <textarea rows="4" cols="50" id="education" placeholder="Enter Your Education" ></textarea></td>
</tr>
<tr>
<td colspan="2">Most Recent Experience Details</td>
</tr>
<tr>
<td>Joining Date :<input type="date" id="joiningDate"></td>
<td colspan="2"> <textarea rows="4" cols="50" id="details" placeholder="Enter Your Experience details" ></textarea></td>
</tr>
<tr><td>Resignation Date :<input type="date" id="resignDate"></td></tr>
<tr>
<td colspan="2">Experience Details 1</td>
</tr>
<tr>
<td>Joining Date :<input type="date" id="joiningDate1"></td>
<td colspan="2"> <textarea rows="4" cols="50" id="details1" placeholder="Enter Your Experience details" ></textarea></td>
</tr>
<tr><td>Resignation Date :<input type="date" id="resignDate1"></td></tr>
<tr>
<td colspan="2">Experience Details 2</td>
</tr>
<tr>
<td>Joining Date :<input type="date" id="joiningDate2"></td>
<td colspan="2"> <textarea rows="4" cols="50" id="details2" placeholder="Enter Your Experience details" ></textarea></td>
</tr>
<tr><td>Resignation Date :<input type="date" id="resignDate2"></td></tr>
<tr>
<td colspan="2">Experience Details 3</td>
</tr>
<tr>
<td>Joining Date :<input type="date" id="joiningDate3"></td>
<td colspan="2"> <textarea rows="4" cols="50" id="details3" placeholder="Enter Your Experience details" ></textarea></td>
</tr>
<tr><td>Resignation Date :<input type="date" id="resignDate3"></td></tr>
<tr>
<td>Business Reference :</td>
<td colspan="2"> <textarea rows="4" cols="50" id="bussiness" placeholder="Enter Your Bussiness Reference" ></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="resume" value="Create Resume" id="resumeButton"></td>
</tr>
</table>
</body>
</html>
JAVASCRIPT
function setName() {
document.getElementById("p1").innerHTML = "<center><h1>john doei<h1><h2><i>WEB 115 </i></h2></center>";
}
function generateResume() {
var x = document.getElementById("email").value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("E-mail address is NOT valid!");
return false;
} else {
var fullName = document.getElementById("fullName").value;
var address = document.getElementById("address").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var personalInfo = document.getElementById("personalInfo").value;
var careerObj = document.getElementById("careerObj").value;
var education = document.getElementById("education").value;
var joiningDate = document.getElementById("joiningDate").value;
var resignDate = document.getElementById("resignDate").value;
var details = document.getElementById("details").value;
var joiningDate1 = document.getElementById("joiningDate1").value;
var resignDate1 = document.getElementById("resignDate1").value;
var details1 = document.getElementById("details1").value;
var joiningDate2 = document.getElementById("joiningDate2").value;
var resignDate2 = document.getElementById("resignDate2").value;
var details2 = document.getElementById("details2").value;
var joiningDate3 = document.getElementById("joiningDate3").value;
var resignDate3 = document.getElementById("resignDate3").value;
var details3 = document.getElementById("details3").value;
var bussiness = document.getElementById("bussiness").value;
var myWindow = window.open("", "MsgWindow", "width=1200,height=800");
myWindow == myWindow.document.writeln("<body bgcolor='#EBD5B3'>");
myWindow.document.write("<div><table cellpadding='3' cellspacing='3'><tr><td>" + fullName + "</td></tr>"
+ "<tr><td>" + address + " / "+ phone + " / "+ email + "</td></tr>"
+ "</table><hr>"
+
"<table cellpadding='3' cellspacing='3'><tr><td>Career Objective</td><td>" + careerObj + "</td></tr>"
+ " <tr><td>Personal Data</td><td>" + personalInfo + "</td></tr>"
+ "<tr><td>Education</td><td>" + education + "</td></tr>"
+ "<tr><td>Career Objective</td><td>" + careerObj + "</td></tr>"
+ "<tr><td colspan='2'>Most Recent Experience Details</td></tr>"
+ "<tr><td>" + joiningDate + " - " + resignDate + "</td><td>" + details + "</td></tr>"
+ "<tr><td>" + joiningDate1 + " - " + resignDate1 + "</td><td>" + details1 + "</td></tr>"
+ "<tr><td>" + joiningDate2 + " - " + resignDate2 + "</td><td>" + details2 + "</td></tr>"
+ "<tr><td>" + joiningDate3 + " - " + resignDate3 + "</td><td>" + details3 + "</td></tr>"
+ "<tr><td>Business</td><td>" + bussiness + "</td></tr>"
+ "</table>");
}
}
Expected output: https://image.ibb.co/bRZLyc/final_project_output_example_B.jpg
Explanation / Answer
I give you the idea how to do this. If you have any doubt please comment me.
function setName() {
document.getElementById("p1").innerHTML = "<center><h1>john doei<h1><h2><i>WEB 115 </i></h2></center>";
}
function generateResume() {
var x = document.getElementById("email").value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("E-mail address is NOT valid!");
return false;
} else {
var fullName = document.getElementById("fullName").value;
var address = document.getElementById("address").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var personalInfo = document.getElementById("personalInfo").value;
var careerObj = document.getElementById("careerObj").value;
var education = document.getElementById("education").value;
var joiningDate = document.getElementById("joiningDate").value;
var resignDate = document.getElementById("resignDate").value;
var details = document.getElementById("details").value;
var joiningDate1 = document.getElementById("joiningDate1").value;
var resignDate1 = document.getElementById("resignDate1").value;
var details1 = document.getElementById("details1").value;
var joiningDate2 = document.getElementById("joiningDate2").value;
var resignDate2 = document.getElementById("resignDate2").value;
var details2 = document.getElementById("details2").value;
var joiningDate3 = document.getElementById("joiningDate3").value;
var resignDate3 = document.getElementById("resignDate3").value;
var details3 = document.getElementById("details3").value;
var bussiness = document.getElementById("bussiness").value;
var myWindow = window.open("", "MsgWindow", "width=1200,height=800");
myWindow == myWindow.document.writeln("<body bgcolor='#EBD5B3'>");
myWindow.document.write("<div>" + fullName +
+ address + " / "+ phone + " / "+ email +"</div>"+
"<div class='column'>Career
Objective<br>Personal Data<BR>Education<BR>Career Objective<BR>Most Recent Experience
Details<BR>joiningDate<BR>joiningDate1<BR>joiningDate2<BR>joiningDate3<BR>Business</div>"+"<div class='column'
style='box-sizing: border-box;float: left;width: 60%;padding: 10px;height: 300px;'>"+careerObj
+"<br>"+personalInfo+"<br>"+education);
}
}
In the above I use the div tag to make two columns, you just fit the variable name and you get the desired output.Check the bold part.