Skip to content

Commit

Permalink
template 2 added and download functionality completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@mansi2020
mansi2020 committed Nov 15, 2023
1 parent 8256cf6 commit ad595e0
Show file tree
Hide file tree
Showing 3 changed files with 428 additions and 66 deletions.
126 changes: 105 additions & 21 deletions Mansi_Sorathiya/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,17 @@
referrerpolicy="no-referrer"
/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> -->
<link rel="stylesheet" href="style.css" />

<!-- Add html2pdf script link -->
<script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
</head>
<body>
<header>
<img src="" alt="" />
<button id="generatePDF">
<button id="generatePDF" onclick="generatePDF()">
<i class="fa-solid fa-download" onclick="saveDiv()"></i>Dowanload PDF
</button>
</header>
Expand All @@ -30,13 +33,18 @@
<h3>Template Type</h3>
<select name="" id="">
<option value="Two-Column">Two-Column</option>
<option value="">Minimalist</option>
<option value="Minimalist">Minimalist</option>
</select>

<h3>Header Color</h3>
<input type="color" value="#fffff" style="width: 50px; padding: 0 " id="color1"/>
<input
type="color"
value="#fffff"
style="width: 50px; padding: 0"
id="color1"
/>
<h3>Header-Text Color</h3>
<input type="color" style="width: 50px; padding: 0 " id="color2"/>
<input type="color" style="width: 50px; padding: 0" id="color2" />

<h3>Personal Details</h3>
<input type="text" placeholder="Name" /><br />
Expand All @@ -56,7 +64,7 @@ <h3>Professional Details</h3>
><br />
<input type="text" placeholder="Skills" /><br />

<button id="add_employment">Add Employment</button><br />
<button id="add_employment">Add Employment</button>
<div id="add_employement_info_static"></div>

<button id="add_project">Add Project</button>
Expand All @@ -67,48 +75,124 @@ <h3>Educational Background</h3>
<div id="add_education_info_static"></div>
</div>

<!--------------------- template 1--------------->
<section id="template_1">
<div id="template1_container">
<div id="temp1_1">
<div id="temp1_header">
<div class="temp1_header">
<h1></h1>
<p class="temp1_header_para"></p>
</div>
<div id="temp1_content">
<h4>SKILLS</h4>
<div id="temp1_skills"></div>
<hr />
<h4>CONTACT</h4>
<hr />
<p id="temp1_phone">
<i class="fa-solid fa-phone"></i><span></span>
<p>
<i class="fa-solid fa-phone"></i
><span class="temp1_phone"></span>
</p>
<p id="temp1_gmail">
<i class="fa-solid fa-envelope"></i><span></span>
<p>
<i class="fa-solid fa-envelope"></i
><span class="temp1_gmail"></span>
</p>
<p id="temp1_location">
<i class="fa-solid fa-location-dot"></i><span></span>
<p>
<i class="fa-solid fa-location-dot"></i
><span class="temp1_location"></span>
</p>
</div>
</div>
<div id="temp1_2">
<h4>SUMMARY</h4>
<hr>
<hr />
<div id="temp1_2_summary"></div>
<h4>PROFESSIONAL EXPERIENCE</h4>
<hr>
<hr />
<div class="temp1_2_professional_exp"></div>
<h4>PROJECTS</h4>
<hr>
<hr />
<div id="temp1_2_project"></div>
<h4>EDUCATION</h4>
<hr>
<hr />
<div id="temp1_2_education"></div>
</div>
</div>
</section>

<!--------------------- template 2--------------->
<section id="template_2">
<div id="template2_container">
<div id="temp2_1">
<div class="temp1_header" id="temp2_header">
<h1>Add Title</h1>
<p class="temp1_header_para"></p>
</div>
<div id="temp2_icons">
<p>
<i class="fa-solid fa-phone"></i
><span class="temp1_phone"></span>
</p>
<p>
<i class="fa-solid fa-envelope"></i
><span class="temp1_gmail"></span>
</p>
<p>
<i class="fa-solid fa-location-dot"></i
><span class="temp1_location"></span>
</p>
</div>
</div>
<div id="temp2_2">
<h4>SUMMARY</h4>
<hr />
<div id="temp1_2_summary"></div>
<h4>PROFESSIONAL EXPERIENCE</h4>
<hr />
<div class="temp2_2_professional_exp"></div>
<h4>SKILLS</h4>
<div id="temp1_skills"></div>
<hr />
<h4>PROJECTS</h4>
<hr />
<div id="temp1_2_project"></div>
<h4>EDUCATION</h4>
<hr />
<div id="temp1_2_education"></div>
</div>
</div>
</section>

<div id="editor"></div>
</main>

<!-- html to pdf cdn link
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> -->
<!-- html to pdf cdn link -->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script
type="text/javascript"
src="https://html2canvas.hertzen.com/dist/html2canvas.js"
></script>

<!-- script file for project -->
<script src="./script.js"></script>

<script>
function generatePDF() {
// Use html2pdf to create and download the PDF
var element = document.getElementById("template2_container");

html2pdf(element, {
margin: 10,
filename: 'resume.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
});
}
</script>
</body>
</html>
Loading

0 comments on commit ad595e0

Please sign in to comment.