From ad595e0709417f3e34b0191c6caf23892cedf8f1 Mon Sep 17 00:00:00 2001 From: mansi2020 Date: Wed, 15 Nov 2023 10:17:59 +0530 Subject: [PATCH] template 2 added and download functionality completed --- Mansi_Sorathiya/index.html | 126 +++++++++++++--- Mansi_Sorathiya/script.js | 302 +++++++++++++++++++++++++++++++------ Mansi_Sorathiya/style.css | 66 ++++++++ 3 files changed, 428 insertions(+), 66 deletions(-) diff --git a/Mansi_Sorathiya/index.html b/Mansi_Sorathiya/index.html index 84e6c81..83f1788 100644 --- a/Mansi_Sorathiya/index.html +++ b/Mansi_Sorathiya/index.html @@ -14,14 +14,17 @@ referrerpolicy="no-referrer" /> - - + + + +
-
@@ -30,13 +33,18 @@

Template Type

Header Color

- +

Header-Text Color

- +

Personal Details


@@ -56,7 +64,7 @@

Professional Details

>

-
+
@@ -67,48 +75,124 @@

Educational Background

+
-
+

+

SKILLS

+

CONTACT

-

- +

+

-

- +

+

-

- +

+

SUMMARY

-
+
+

PROFESSIONAL EXPERIENCE

-
+
+

PROJECTS

-
+
+

EDUCATION

-
+
+
+ + +
+
+
+
+

Add Title

+

+
+
+

+ +

+

+ +

+

+ +

+
+
+
+

SUMMARY

+
+
+

PROFESSIONAL EXPERIENCE

+
+
+

SKILLS

+
+
+

PROJECTS

+
+
+

EDUCATION

+
+
+
+
+
+
- + + + + + + diff --git a/Mansi_Sorathiya/script.js b/Mansi_Sorathiya/script.js index 05a10ff..51f2965 100644 --- a/Mansi_Sorathiya/script.js +++ b/Mansi_Sorathiya/script.js @@ -1,32 +1,140 @@ // console.log("mansi"); +//!<----------------select template---------------------------> +let selectTemplate = document.querySelector("select"); +selectTemplate.addEventListener("input", (e) => { + if (selectTemplate.value == "Two-Column") { + document.querySelector("#template_1").style.display = "block"; + document.querySelector("#template_2").style.display = "none"; + } else { + document.querySelector("#template_2").style.display = "block"; + document.querySelector("#template_1").style.display = "none"; + } +}); //!<------------take info from user page--------------> //for add employement data let addEmploymentBtn = document.querySelector("#add_employment"); -let addEmployementInfoStatic = document.querySelector("#add_employement_info_static") +let addEmployementInfoStatic = document.querySelector( + "#add_employement_info_static" +); + +//todo addDataToEmploymentDiv in template-1 div--> template 1 +let addEmploymentInfo = document.createElement("div"); +function addDataToEmploymentDiv( + btn, + inputsEmployement, + textareaEmployement, + warningEmployement +) { + btn.addEventListener("click", () => { + let flag = 1; + inputsEmployement.forEach((el) => { + if (el.value == "") { + flag = 0; + } + }); + if (textareaEmployement.value == "" || flag == 0) { + warningEmployement.innerText = "Please Fill every detail"; + } else { + warningEmployement.innerText = ""; + let newDiv1 = document.createElement("div"); + let newDiv2 = document.createElement("div"); + addEmploymentInfo.innerHTML = ""; + let objOfEmployement = { + newDiv1: ".temp1_2_professional_exp", + newDiv2: ".temp2_2_professional_exp", + }; + for (let key in objOfEmployement) { + key.innerHTML = ` +
+
+
  • ${inputsEmployement[2].value} At ${inputsEmployement[3].value}
+

${inputsEmployement[0].value}-${inputsEmployement[1].value}

+
+

${inputsEmployement[2].value}

+

${textareaEmployement.value}

+
+ `; + document.querySelector(key[i]).append(newDiv1); + } + } + }); +} + +//add data to left part addEmploymentBtn.addEventListener("click", (e) => { e.preventDefault(); - let addEmploymentInfo = document.createElement("div"); addEmploymentInfo.id = "add_employment_info"; addEmploymentInfo.innerHTML = `

Start


End

-
-
-
- +
+
+
+ + +

`; - addEmployementInfoStatic.append(addEmploymentInfo); + addEmployementInfoStatic.append(addEmploymentInfo); + + let addEmplyomentDataBtn = document.querySelector("#add_emplyoment_data"); + let inputsOfEmployementDiv = document.querySelectorAll( + "#add_employment_info input" + ); + let warningEmployement = document.querySelector("#employement_warning"); + let textAreaOfEmployementDiv = document.querySelector( + "#add_employment_info textarea" + ); + addDataToEmploymentDiv( + addEmplyomentDataBtn, + inputsOfEmployementDiv, + textAreaOfEmployementDiv, + warningEmployement + ); }); +//todo add project data in template-1 div -- > template 1 +let addProjectInfo = document.createElement("div"); +function addDataToProjectDiv( + btn, + inputsProject, + textareaProject, + warningProject +) { + btn.addEventListener("click", () => { + let flag = 1; + inputsProject.forEach((el) => { + if (el.value == "") { + flag = 0; + } + }); + if (textareaProject.value == "" || flag == 0) { + warningProject.innerText = "Please Fill every detail"; + } else { + warningProject.innerText = ""; + let newDiv = document.createElement("div"); + addProjectInfo.innerHTML = ""; + newDiv.innerHTML = ` +
+
+
  • ${inputsProject[2].value}
+

${inputsProject[0].value}-${inputsProject[1].value}

+
+

${textareaProject.value}

+
+ `; + document.querySelector("#temp1_2_project").appendChild(newDiv); + } + }); +} + //for add project data let addProjectBtn = document.querySelector("#add_project"); -let addProjectInfoStatic = document.querySelector("#add_project_info_static") +let addProjectInfoStatic = document.querySelector("#add_project_info_static"); addProjectBtn.addEventListener("click", (e) => { e.preventDefault(); - let addProjectInfo = document.createElement("div"); - addProjectInfo.id = "add_employment_info"; + addProjectInfo.id = "add_project_info"; addProjectInfo.innerHTML = `

Start


@@ -34,60 +142,164 @@ addProjectBtn.addEventListener("click", (e) => {

+ +

`; - addProjectInfoStatic.append(addProjectInfo); + addProjectInfoStatic.append(addProjectInfo); + let addProjectDataBtn = document.querySelector("#add_project_data"); + let inputsOfProjectDiv = document.querySelectorAll("#add_project_info input"); + let warningProject = document.querySelector("#warning"); + let textAreaOfProjectDiv = document.querySelector( + "#add_project_info textarea" + ); + addDataToProjectDiv( + addProjectDataBtn, + inputsOfProjectDiv, + textAreaOfProjectDiv, + warningProject + ); }); +//todo add education data in template-1 div -- > template 1 +let addEducationInfo = document.createElement("div"); +function addDataToEducationDiv( + btn, + inputsEducation, + textAreaEducation, + warningEducation +) { + btn.addEventListener("click", () => { + let flag = 1; + inputsEducation.forEach((el) => { + if (el.value == "") { + flag = 0; + } + }); + if (textAreaEducation.value == "" || flag == 0) { + warningEducation.innerText = "Please Fill every detail"; + } else { + warningEducation.innerText = ""; + let newDiv = document.createElement("div"); + addEducationInfo.innerHTML = ""; + newDiv.innerHTML = ` +
+
+
  • ${inputsEducation[2].value}
+

${inputsEducation[0].value}-${inputsEducation[1].value}

+
+

${textAreaEducation.value}

+
+ `; + document.querySelector("#temp1_2_education").appendChild(newDiv); + } + }); +} + //for add education data let addEducationBtn = document.querySelector("#add_education"); -let addEducationInfoStatic = document.querySelector("#add_education_info_static") +let addEducationInfoStatic = document.querySelector( + "#add_education_info_static" +); addEducationBtn.addEventListener("click", (e) => { e.preventDefault(); - let addProjectInfo = document.createElement("div"); - addProjectInfo.id = "add_employment_info"; - addProjectInfo.innerHTML = ` + addEducationInfo.id = "add_education_info"; + addEducationInfo.innerHTML = `

Start


End

-
-
+
+
+
+ +

`; - addEducationInfoStatic.append(addProjectInfo); + addEducationInfoStatic.append(addEducationInfo); + let addEducationDataBtn = document.querySelector("#add_education_data"); + let inputsOfEducationDiv = document.querySelectorAll( + "#add_education_info input" + ); + let warningEducation = document.querySelector("#education_warning"); + let textAreaOfEducationDiv = document.querySelector( + "#add_education_info textarea" + ); + addDataToEducationDiv( + addEducationDataBtn, + inputsOfEducationDiv, + textAreaOfEducationDiv, + warningEducation + ); }); //!<------------------------ template-1-------------------------------------------> -document.querySelector('#color1').value = '#8B0000' -document.querySelector('#color2').value = '#ffffff' + +document.querySelector("#color1").value = "#8B0000"; +document.querySelector("#color2").value = "#ffffff"; let inputs = document.querySelectorAll("input"); -console.log(inputs); -document.addEventListener("input",(e)=>{ - console.log(inputs[0].value); - document.querySelector("#temp1_header").style.backgroundColor = inputs[0].value; - document.querySelector("#temp1_header h1").style.color = inputs[1].value; - document.querySelector("#temp1_header h1").innerText = inputs[2].value; -}) +let summary = document.querySelector("textarea"); +// console.log(inputs); +// console.log(descriptions); +document.addEventListener("input", (e) => { + //add contact info to template-1 & template-2 + for (let i = 0; i < 2; i++) { + document.querySelectorAll(".temp1_header")[i].style.backgroundColor = + inputs[0].value; + document.querySelectorAll(".temp1_header h1")[i].style.color = + inputs[1].value; + document.querySelectorAll(".temp1_header_para")[i].style.color = + inputs[1].value; + document.querySelectorAll(".temp1_header h1")[i].innerText = + inputs[2].value; + document.querySelectorAll(".temp1_header_para")[i].innerText = + inputs[6].value; + document.querySelectorAll(".temp1_phone")[i].innerText = inputs[4].value; + document.querySelectorAll(".temp1_gmail")[i].innerText = inputs[3].value; + document.querySelectorAll(".temp1_location")[i].innerText = inputs[5].value; + //add summary + document.querySelectorAll("#temp1_2_summary")[i].innerText = summary.value; + } + document.querySelectorAll("#temp2_icons p").forEach((el) => { + el.style.color = inputs[1].value; + }); + //add skills + let temp1_skill_div = document.querySelectorAll("#temp1_skills"); + temp1_skill_div.forEach((el) => { + el.innerText = ""; + let temp1_skill_arr = inputs[7].value.split(","); -//!download html to pdf -// let downloadButton = document.querySelector("header button"); -// let pdfContent = document.querySelector("#addInfo"); - -// //first way -var doc = new jsPDF(); -var specialElementHandlers = { - '#editor': function (element, renderer) { - return true; - } -}; - -$('#generatePDF').click(function () { - doc.fromHTML($('#template_1').html(), 15, 15, { - 'elementHandlers': specialElementHandlers - }); - document.write(); - doc.save('sample_file.pdf'); + addSkill(el, temp1_skill_arr); + }); }); +//add skill to tenplate1 +function addSkill(temp1_skill_div, temp1_skill_arr) { + temp1_skill_arr.forEach((el) => { + // console.log(el); + let div_skill = document.createElement("div"); + div_skill.classList.add("div_skill"); + // div_skill.style.backgroundColor = "black"; + div_skill.innerText = el; + // temp1_skill_div.innerText = el; + // el.style.color = "white"; + temp1_skill_div.append(div_skill); + }); +} +//!download html to pdf +// let downloadButton = document.querySelector("header button"); +// let pdfContent = document.querySelector("#addInfo"); +// var doc = new jsPDF(); +// var specialElementHandlers = { +// "#editor": function (element, renderer) { +// return true; +// }, +// }; +// $("#generatePDF").click(function () { +// doc.fromHTML($("#template_1").html(), 15, 15, { +// elementHandlers: specialElementHandlers, +// }); +// document.write(); +// doc.save("sample_file.pdf"); +// }); diff --git a/Mansi_Sorathiya/style.css b/Mansi_Sorathiya/style.css index 0db0e37..f7d8457 100644 --- a/Mansi_Sorathiya/style.css +++ b/Mansi_Sorathiya/style.css @@ -14,8 +14,12 @@ header h1{ color:white; } /*<--------------------main container--------------------------------------------------------> */ + #main_container{ display:flex; + flex-wrap: wrap; + width:100%; + border:2px solid pink; } /* <-----------------take input from user page-----------------------------------------> */ @@ -41,6 +45,11 @@ header h1{ margin-bottom: 1.5rem; } +#add_employement_icons{ + display:flex; + gap:20px; +} + /* <--------------#template_1-------------------------> */ #template_1{ width:60%; @@ -70,4 +79,61 @@ header h1{ #temp1_2{ margin-top: 100px; padding:10px; +} + +#temp1_skills{ + display: flex; + /* background-color: black; */ + width:100%; + gap:10px; + font-size: 16px; + flex-wrap: wrap; + color:white; + width:fit-content; +} +.div_skill{ + margin-right :10px; + background-color: black; +} + +#warning,#employement_warning,#education_warning{ + color:red; + text-align: center; + font-size: 14px; +} + + +/* <----------------------template_2-------------------------> */ +#template_2{ + width:60%; + display: none; +} +/* #template_1{ + display:none; +} */ +#temp2_1{ + display:flex; +} +#temp2_icons{ + position: absolute; + right:20px; + color:black; +} +#temp2_icons p i{ + margin-right: 10px; +} +#template2_container .temp1_header{ + height:100px; + width:100%; + background-color: rgb(211, 204, 204); +} +#temp2_2{ + margin-top: 30px; + padding:20px; +} +hr{ + margin-bottom: 10px; +} +h4{ + margin-top: 20px; } \ No newline at end of file