Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/c-v-builder.markdown

Created June 13, 2021 00:40
Show Gist options
  • Save harunpehlivan/cb89c32723125acc962c5af71d5af5df to your computer and use it in GitHub Desktop.
Save harunpehlivan/cb89c32723125acc962c5af71d5af5df to your computer and use it in GitHub Desktop.
Download ZIP
C.V BUILDER
Raw
index.html
<header>
<a href="https://webcvhumanresources.glitch.me/">
<img id="logo" src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606081377/favicon_jqkyzc.png?token=AG36O3XBOXS7E2GOTA6MR3S65KTG6"
style="width: 5%; height: auto;">
</a>
<h1>C.V BUILDER</h1>
</header>
<body>
<section class="leftSection" id="eduSectionSchool">
<h2 class="h2">Education: Secondary School</h2>
<p class="description">If you attended more than one, choose the school where you sat your public exams.</p>
<form method="POST" body="form" target="dummyframe">
<label class="label" for="secondaryName"><text>Name of school:</text></label
><br />
<input
type="text"
class="input"
id="secondaryName"
name="secondaryName"
/><br />
<label class="label" for="secondaryStart"
><text>When did you start studying here?</text></label
><br />
<input
type="number"
class="input"
id="secondaryStart"
name="secondaryStart"
placeholder="mm/yyyy"
/><br />
<label class="label" for="secondaryEnd"
><text>When did you graduate?</text> </label
><br />
<input
type="number"
class="input"
id="secondaryEnd"
name="secondaryEnd"
placeholder="mm/yyyy"
/><br />
<label class="label" for="secondarySubjects"
><text>What subjects did you take for your public exam?</text></label
><br />
<input
type="text"
id="secondarySubjects"
class="input"
name="secondarySubjects"
/><br />
<label class="label" for="secondaryExam"
><text>Public exam results:</text></label
><br />
<input
type="text"
class="input"
id="secondaryExam"
name="secondaryExam"
/><br />
<input type="submit" class="nextButton" id="schoolSubmit" value = "Next""/>
</form>
</section>
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<body class="stickySide">
<div class="container">
<div class="container-item"><button class="return">
<i id="returnButton" class="material-icons">reply</i></button>
</div>
<div class="container-item">
<aside class = "sideItem" id="sidebar">
<h2 id="agenda">Agenda</h2>
<p class="otherPages" id="progressEdu">1. General Information </p>
<p class = "onPage" id="onEducation">2. Education</p>
<p class="otherPages">3. Employment<br />
4. Positions of Responsibility<br />
5. Achievements and Awards<br />
6. IT Knowledge<br />
7. Languages<br />
8. Courses<br />
9. Current Hobbies<br />
10. Confirm and Download
</p>
</aside>
</div>
</div>
</body>
<section class="leftSection" id="uni1Section" style="display:none;">
<h2 class="h2">Education: University</h2>
<p class="description">Start with your most recent university</p>
<form method="POST" body="form" target="dummyframe2">
<label class="label" for="uni1Name"><text>Name of institution:</text></label
><br />
<input type="text" class="input" id="uni1Name" name="uni1Name" /><br />
<label class="label" for="uni1Start"
><text>When did you start studying here?</text></label
><br />
<input
type="number"
class="input"
id="uni1Start"
name="uni1Start"
placeholder="mm/yyyy"
/><br />
<label class="label" for="uni1End"
><text>When did / will you graduate?</text> </label
><br />
<input
type="number"
class="input"
id="uni1End"
name="uni1End"
placeholder="mm/yyyy"
/><br />
<label class="label" for="uni1Title"><text>Title:</text></label
><br />
<input
type="text"
id="uni1Title"
class="input"
name="uni1Title"
placeholder=" e.g. MEng, BA, BSc"
/><br />
<label class="label" for="uni1Degree"><text>Name of degree:</text></label
><br />
<input
type="text"
id="uni1Degree"
class="input"
name="uni1Degree"
/><br />
<label class="label" for="uni1Grade"><text>Grade / ranking:</text></label
><br />
<input type="text" class="input" id="uni1Grade" name="uni1Grade" />
<label class="label" for="uni1Modules"
><text>Describe your chosen core subjects/modules:</text></label
><br />
<input
type="textarea"
class="input"
id="uni1Modules"
name="uni1Modules"
/>
<label for="uni1Activities"
><text>Activities and societies:</text></label
><br />
<input
type="text"
class="input"
id="uni1Activities"
name="uni1Activities"
/>
<label for="uniCompetencyButton1"><text>Select one competency from each category</text></label>
<input type="submit" class="competencyButton" name="uniCompetencyButton1" id="uniCompetencyButton1" value="Generate"/>
</form>
<div class="activityDescriptionDiv" id="education1ActivityDescription" style="display:none">
<span><text class= "activitySuggestions" id="activityGerundDisplay"</text><text class="activitySuggestions" id="activityCompetencyDisplay"></text></span>
</div>
<iframe name="dummyframe2" id="dummyframe2" style="display: none;"></iframe>
<body class="centreAskUni">
<div class = "addQuestion" id="askAdd">
<h4>Do you want to add another university?</h4>
<div class="addButtonGroup">
<button type="button" id="yesAdd" class= "addAnswer">Yes</button>
<button type="button" id="noAdd" class="addAnswer">No</button>
</div>
</div>
</body>
</section>
Raw
script.js
//Return button
document.getElementById("returnButton").addEventListener("click",goBackIndex)
function goBackIndex() {
window.location.assign("http://localhost:8080/InsidePathsLtd-CV-Builder/index.html")
}
//Secondary section
document.getElementById("schoolSubmit").addEventListener("click",showAndPass1)
function showAndPass1(){
showUni1();
passValuesFromSchool();
}
function showUni1(){
document.getElementById("uni1Section").style.display="block";
}
function passValuesFromSchool(){
var schoolName = document.getElementById("secondaryName").value;
var schoolStart = document.getElementById("secondaryStart").value;
var schoolEnd = document.getElementById("secondaryEnd").value;
var schoolSubjects = document.getElementById("secondarySubjects").value;
var schoolExam = document.getElementById("secondaryExam").value;
localStorage.setItem("schoolNameValue", schoolName);
localStorage.setItem("schoolStartValue", schoolStart);
localStorage.setItem("schoolEndValue", schoolEnd);
localStorage.setItem("schoolSubjectsValue", schoolSubjects);
localStorage.setItem("schoolExamValue", schoolExam);
return false;
}
document.getElementById("yesAdd").addEventListener("click",addUni)
function addUni(){
document.getElementById("extraUni").style.display = "block";
}
document.getElementById("noAdd").addEventListener("click",moveOn)
function moveOn() {
window.location.assign ("http://localhost:8080/InsidePathsLtd-CV-Builder/other-directories/employment-law.html");
}
function showActiveCompetenciesAndPass2(){
showActiveCompetencies2();
passValuesFromUni2();
hideCompetencyButton2();
}
function showActiveCompetencies2(){
document.getElementById("competency-collaborative2").style.display="inline";
document.getElementById("competency-personal2").style.display="inline";
}
function passValuesFromUni2(){
var secondUniName = document.getElementById("uni2Name").value;
var secondUniStart = document.getElementById("uni2Start").value;
var secondUniEnd = document.getElementById("uni2End").value;
var secondUniTitle = document.getElementById("uni2Title").value;
var secondUniDegree = document.getElementById("uni2Degree").value;
var secondUniGrade = document.getElementById("uni2Grade").value;
var secondUniModules = document.getElementById("uni2Modules").value;
var secondUniActivities = document.getElementById("uni2Activities").value;
localStorage.setItem("secondUniNameValue", secondUniName );
localStorage.setItem("secondUniStartValue", secondUniStart);
localStorage.setItem("secondUniEndValue", secondUniEnd);
localStorage.setItem("secondUniTitleValue", secondUniTitle);
localStorage.setItem("secondUniDegreeValue", secondUniDegree);
localStorage.setItem("secondUniGradeValue", secondUniGrade);
localStorage.setItem("secondUniModulesValue", secondUniModules);
localStorage.setItem("secondUniActivitiesValue", secondUniActivities);
return false;
}
function hideCompetencyButton2(){
document.getElementById("competencyButton2").style.display = "none";
}
document.getElementById("yesAdd2").addEventListener("click",addUni2)
function addUni2(){
document.getElementById("extraUni2").style.display = "block";
}
document.getElementById("noAdd2").addEventListener("click",moveOn)
document.getElementById("uniCompetencyButton3").addEventListener("click",showActiveCompetenciesAndPass3)
function showActiveCompetenciesAndPass3(){
showActiveCompetencies3();
passValuesFromUni3();
hideCompetencyButton3();
}
function showActiveCompetencies3(){
document.getElementById("competency-collaborative3").style.display = "inline";
document.getElementById("competency-personal3").style.display = "inline";
}
function passValuesFromUni3(){
var thirdUniName = document.getElementById("uni3Name").value;
var thirdUniStart = document.getElementById("uni3Start").value;
var thirdUniEnd = document.getElementById("uni3End").value;
var thirdUniTitle = document.getElementById("uni3Title").value;
var thirdUniDegree = document.getElementById("uni3Degree").value;
var thirdUniGrade = document.getElementById("uni3Grade").value;
var thirdUniModules = document.getElementById("uni3Modules").value;
var thirdUniActivities = document.getElementById("uni3Activities").value;
localStorage.setItem("thirdUniNameValue", thirdUniName );
localStorage.setItem("thirdUniStartValue", thirdUniStart);
localStorage.setItem("thirdUniEndValue", thirdUniEnd);
localStorage.setItem("thirdUniTitleValue", thirdUniTitle);
localStorage.setItem("thirdUniDegreeValue", thirdUniDegree);
localStorage.setItem("thirdUniGradeValue", thirdUniGrade);
localStorage.setItem("thirdUniModulesValue", thirdUniModules);
localStorage.setItem("thirdUniActivitiesValue", thirdUniActivities);
return false;
}
function hideCompetencyButton3(){
document.getElementById("uniCompetencyButton3").style.display = "none";
}
document.getElementById("nextEmployment").addEventListener("click",moveOn)
//Activities and societies description generator for uni #1
var activityGerunds=["stimulating","enforcing","encouraging","enhancing","promoting","motivating","inspiring","inciting","strenghtening","nurturing","improving","developing"]
function generateGerund(){
var randomGerund = Math.floor(Math.random()*activityGerunds.length);
document.getElementById("activityGerundDisplay").innerHTML=activityGerunds[randomGerund];
}
var activityCompetencies=["team management","compelling verbal communication","effective written communication","interpersonal skills","active listening","productivity","consistency","reliability","goal-oriented thinking", "flexibility","versatility","proactivity","intercultural competence","human awareness","discipline","adaptability","tactical behaviour","persuasiveness","independent learning","decisiveness","perserverance"]
function generateCompetency(){
var randomCompetency = Math.floor(Math.random()*activityCompetencies.length);
document.getElementById("activityCompetencyDisplay").innerHTML=activityCompetencies[randomCompetency];
}
document.getElementById("uniCompetencyButton1").addEventListener("click",showActiveCompetenciesAndPass1)
function showActiveCompetenciesAndPass1(){
passValuesFromUni1();
generateGerund();
generateCompetency();
}
function showActiveCompetencies1(){
document.getElementById("education1ActivityDescription").style.display="block";
}
function passValuesFromUni1(){
var firstUniName = document.getElementById("uni1Name").value;
var firstUniStart = document.getElementById("uni1Start").value;
var firstUniEnd = document.getElementById("uni1End").value;
var firstUniTitle = document.getElementById("uni1Title").value;
var firstUniDegree = document.getElementById("uni1Degree").value;
var firstUniGrade = document.getElementById("uni1Grade").value;
var firstUniModules = document.getElementById("uni1Modules").value;
var firstUniActivities = document.getElementById("uni1Activities").value;
localStorage.setItem("firstUniNameValue", firstUniName);
localStorage.setItem("firstUniStartValue", firstUniStart);
localStorage.setItem("firstUniEndValue", firstUniEnd);
localStorage.setItem("firstUniTitleValue", firstUniTitle);
localStorage.setItem("firstUniDegreeValue", firstUniDegree);
localStorage.setItem("firstUniGradeValue", firstUniGrade);
localStorage.setItem("firstUniModulesValue", firstUniModules);
localStorage.setItem("firstUniActivitiesValue", firstUniActivities);
return false;
}
Raw
style.css
.nextButton{
float:right;
font-family: "Avenir Light";
font-size: 14pt;
border: 2px solid #ff4040;
width: 10vw;
background-color:#959ee5;
color: white;
border-radius: 25px;
text-align: center;
margin-bottom:3vh;
padding-top:2px;
padding-bottom:2px;
}
#schoolSubmit{
position: relative;
left: 50px;
}
#nextEmployment{
position: relative;
right: 50px;
}
.addAnswer{
margin-right:0%;
margin-left:0%;
margin-top: 3.5px;
margin-bottom: 20px;
text-align: center;
font-family: "Avenir Light";
font-size: 14pt;
color: rgba(37, 49, 141);
border: 2px solid rgba(37, 49, 141);
padding-left: 17px;
padding-right: 17px;
padding-top: 2px;
padding-bottom: 2px;
background-color: white;
align-items: center;
align-self: center;
}
.addAnswerJob{
float:right;
margin-right:0%;
margin-left:0%;
margin-top: 3.5px;
margin-bottom: 20px;
text-align: center;
font-family: "Avenir Light";
font-size: 14pt;
color: rgba(37, 49, 141);
border: 2px solid rgba(37, 49, 141);
padding-left: 17px;
padding-right: 17px;
padding-top: 2px;
padding-bottom: 2px;
background-color: white;
align-items: center;
align-self: center;
}
.addButtonGroup{
position: relative;
left: 40%
}
.addQuestion{
width:100%;
}
.competencyButton{
padding: 0.5%;
margin-left: 10px;
margin-bottom: 30px;
text-align: center;
font-family: "Avenir Light";
font-size: 11pt;
font-weight:bold;
border: 1.5px solid #384ad3;
color: #384ad3;
background-color: white;
border-radius: 5px;
}
.return{
float: right;
background-color:rgb(37, 49, 141,0);
margin-left:40%;
margin-bottom: 5%;
border: 0;
padding: 0;
}
#returnButton{
float: right;
color: white;
font-size: 45px;
text-align:center;
margin: 0;
padding: 0;
}
.collaborativeCompetencies{
color: rgb(238, 39, 39);
text-align: center;
font-family: "Avenir Light";
font-size: 9pt;
border-radius: 25px;
padding: 5px;
margin: 5px;
border: 1px solid rgb(238, 39, 39);
background-color: white;
}
.personalCompetencies{
color: rgb(18, 187, 18);
text-align: center;
font-family: "Avenir Light";
font-size: 9pt;
border-radius: 25px;
padding: 5px;
margin: 5px;
border: 1px solid rgb(18, 187, 18);
background-color: white;
}
.analyticalCompetencies{
text-align: center;
font-family: "Avenir Light";
font-size: 9pt;
border-radius: 25px;
padding: 5px;
margin: 5px;
border: 1px solid orange;
background-color: white;
color: orange;
}
.initiativeCompetencies{
text-align: center;
font-family: "Avenir Light";
font-size: 9pt;
border-radius: 25px;
padding: 5px;
border: 1px solid rgb(140, 59, 245);
background-color: white;
color: rgb(140, 59, 245);
margin-top: 3px;
margin-bottom: 15px;
}
.communicationCompetencies{
text-align: center;
font-family: "Avenir Light";
font-size: 9pt;
border-radius: 25px;
padding: 5px;
margin-top: 3px;
margin-bottom: 15px;
border: 1px solid rgb(47, 209, 221);
background-color: white;
color: rgb(47, 209, 221);
}
.leftSection{
float: left;
width: 55%;
background-color: white;
border-radius: 25px;
padding-left: 15px;
padding-top: 15px;
margin-top: 5vh;
margin-bottom: 10vh;
margin-left:3%;
margin-right: 3%;
}
form {
color: black;
font-family: "Avenir Light";
font-size: 12pt;
padding-left:15%;
padding-right:15%;
}
.input {
color: rgba(37, 49, 141);
font-family: "Avenir Light";
font-size: 12pt;
border: none;
border-bottom: 1.5px solid rgba(37, 49, 141);
background-color: rgba(37, 49, 141, 0);
margin: 2px 0;
box-sizing: border-box;
margin-bottom: 20px;
width: 100%;
}
.centreAskUni{
text-align: centre;
width: 100%
}
.description{
font-family: "Avenir Light";
font-size: 10.5pt;
color: grey;
padding-left: 15%;
padding-right: 15%;
margin-top:-1.5%;
}
#competency-collaborative , #competency-personal , #competency-collaborative2 , #competency-personal2 ,#competency-collaborative3 , #competency-personal3{
width:15%;
}
#competency-initiative , #communication-competencies{
margin-bottom: 5%;
padding-bottom: 5%;
}
.activitySuggestions{
text-decoration: underline;
}
.activityDescriptionDiv{
padding-left:15%;
padding-right:15%;
}
html {
background: url('https://insidepaths.co/assets/images/insidepaths-cv-background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #25318d;
margin-left: 5%;
margin-right: 5%;
margin-top:0;
margin-bottom:7.5%
}
header{
overflow: visible;
vertical-align: middle;
text-align: center;
width: 100%;
height: 15vh;
padding: 0;
margin: 0;
}
body{
overflow: visible;
display: unset;
height:100%;
}
#logo{
float:left;
padding: 0;
margin-left: 40px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 0px;
border: 2px solid white;
}
#display{
border: none;
float: left;
width: 55%;
border-radius: 25px;
padding-left: 15px;
padding-top: 15px;
margin-top: 3%;
margin-bottom: 300px;
margin-left:3%;
}
aside {
float: right;
font-family: "Avenir Light";
background-color: rgb(56,74,211,0.6);
border-radius: 25px;
padding-left: 2%;
padding-right:2%;
padding-top: 1%;
border-style: dashed;
border-width: 2.5px;
border-color: #959ee5;
padding-bottom: 2.5%;
width:100%;
}
.onPage{
margin:0;
padding-top: 0;
padding-bottom: 0;
color:#ff4040;
font-size: 12pt;
font-family: "Avenir Light";
font-weight: bold;
line-height: 200%;
padding-left: 7.5%;
Padding-right: 7.5%;
}
.otherPages{
font-size: 12pt;
color: white;
font-family: "Avenir Light";
font-weight: bold;
line-height: 200%;
padding-left: 7.5%;
Padding-right: 7.5%;
margin:0;
padding-top:0;
padding-bottom:0;
}
.container-item{
display:flex;
align-self: right;
width: 90%;
background-color: rgb(56,74,211,0);
}
.stickySide{
overflow: visible;
padding:0;
}
.container{
float:right;
display:flex;
flex-direction: column;
position: sticky;
position: -webkit-sticky;
top: 17%;
overflow:visible;
margin-right:0%;
margin-left: 0;
width: 35%;
padding:0;
}
h1 {
color: white;
font-family: "Avenir Light";
font-size: 35pt;
text-align: center;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 1%;
padding-right: 1%;
text-shadow: 1.5px 1.5px #515cac;
width: 30%;
margin-top:20px;
margin-bottom: 0;
margin-left: 35%;
border: 2px solid white;
}
.h2 {
font-family: "Avenir Light";
color: black;
font-size: 18pt;
font-weight: bold;
text-align: center;
}
#agenda {
line-height: 0.4;
text-shadow: 1px 1px #5c5c5c;
color: white;
text-align: center;
font-size: 20pt;
}
h4{
font-family: "Avenir Light";
font-size: 13pt;
color: black;
font-weight: bold;
margin-bottom: 2%;
margin-left:0;
text-align:center;
}
#collaborative-title , #collaborative-title2 , #collaborative-title3 {
font-family: "Avenir Light";
font-size: 10.5pt;
font-weight: bold;
color: rgb(238, 39, 39);
margin-bottom: 0;
padding-bottom:0;
padding-left:8px;
}
#personal-title , #personal-title2, #personal-title3{
font-family: "Avenir Light";
font-size: 10.5pt;
font-weight: bold;
color: rgb(18, 187, 18);
margin-bottom: 0;
padding-bottom:0;
padding-left:8px;
}
#analytical-title , #analytical-title2 , #analytical-title3 , #analytical-title4{
font-family: "Avenir Light";
font-size: 10.5pt;
font-weight: bold;
margin-bottom: 0;
padding-bottom:0;
padding-left:8px;
color: orange;
}
#initiative-title , #initiative-title2{
color: rgb(140, 59, 245);
font-family: "Avenir Light";
font-size: 10.5pt;
font-weight: bold;
margin-bottom: 0;
padding-bottom:0;
padding-left:8px;
}
#communication-title , #communication-title2{
color: rgb(47, 209, 221);
font-family: "Avenir Light";
font-size: 10.5pt;
font-weight: bold;
margin-bottom: 0;
padding-bottom:0;
padding-left:8px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment