From 938a9501e35351b45254711fef504fa1b8eabe26 Mon Sep 17 00:00:00 2001 From: Mohit Rana Date: Wed, 23 Oct 2024 09:01:47 -0400 Subject: [PATCH] added caret-down and caret-up feature for the different sections of the step 1 section --- Resume.css | 1 + Resume.js | 6 --- resume.html | 24 ++++++----- resume2.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 129 insertions(+), 17 deletions(-) create mode 100644 resume2.js diff --git a/Resume.css b/Resume.css index 70614c0..b6df35c 100644 --- a/Resume.css +++ b/Resume.css @@ -158,6 +158,7 @@ h2{ h3{ font-size: 2rem; margin-bottom: 1rem; + font-weight: 400; } .section { diff --git a/Resume.js b/Resume.js index 482ea91..78ce784 100644 --- a/Resume.js +++ b/Resume.js @@ -319,9 +319,3 @@ document.getElementById('reset').addEventListener('click', function() { }); -// nextstep1.addEventListener('click',()=>{ -// step1p.classList.remove('active') -// step1p.classList.add('completed'); -// step2p.classList.add('active'); -// console.log("click") -// }); \ No newline at end of file diff --git a/resume.html b/resume.html index 8d9c46f..cca2654 100644 --- a/resume.html +++ b/resume.html @@ -3,12 +3,13 @@ - Resume Builder - Step 1 + Build Resume + - +
@@ -65,7 +66,7 @@

Fill Your Information

-

Personal Information

+

Personal Information

@@ -89,7 +90,7 @@

Personal Information

-

Education

+

Education

@@ -113,14 +114,14 @@

Education

-

Skills

- +

Skills

+
-

Experience

+

Experience

@@ -147,7 +148,7 @@

Experience

-

Achievements and Certifications

+

Achievements and Certifications

@@ -162,7 +163,7 @@

Achievements and Certifications

-

Projects (Optional)

+

Projects (Optional)

@@ -186,8 +187,8 @@

Projects (Optional)

-

Languages (Optional)

- +

Languages (Optional)

+
@@ -279,5 +280,6 @@

Connect With Us

+ diff --git a/resume2.js b/resume2.js new file mode 100644 index 0000000..c50440a --- /dev/null +++ b/resume2.js @@ -0,0 +1,115 @@ +// this js file is part 2 for the collectResumeData.js + +// dropdown info in step 1 section logic +const caret1 = document.querySelector('#caret1'); +const caret2 = document.querySelector('#caret2'); +const caret3 = document.querySelector('#caret3'); +const caret4 = document.querySelector('#caret4'); +const caret5 = document.querySelector('#caret5'); +const caret6 = document.querySelector('#caret6'); +const caret7 = document.querySelector('#caret7'); +const pinfo = document.querySelector('.pInfo'); +pinfo.style.display = 'none'; +const education = document.querySelector('#education-fields'); +const edubtn = document.querySelector('#add-education'); +education.style.display = 'none'; +edubtn.style.display = 'none'; +const slabel = document.querySelector('#skill-label') +const sinput = document.querySelector('#skills-input') +slabel.style.display = 'none'; +sinput.style.display = 'none'; +const expfield = document.querySelector('#experience-fields'); +const expbtn = document.querySelector('#add-experience'); +expfield.style.display = 'none'; +expbtn.style.display = 'none'; +const achive = document.querySelector('.achive'); +achive.style.display = 'none'; +const projfield = document.querySelector('#project-fields'); +const projbtn = document.querySelector('#add-project'); +projfield.style.display = 'none'; +projbtn.style.display = 'none'; +const lnglabel = document.querySelector('#langlabel'); +const lnginput = document.querySelector('#languages-input'); +lnglabel.style.display = 'none'; +lnginput.style.display = 'none'; + +caret1.addEventListener('click',()=>{ + if(pinfo.style.display === 'none'){ + pinfo.style.display = ''; + caret1.style.transform = 'rotate(180deg)'; + } + else{ + pinfo.style.display = 'none'; + caret1.style.transform = 'rotate(0)'; + } +}) +caret2.addEventListener('click',()=>{ + if(education.style.display === 'none'){ + education.style.display = ''; + edubtn.style.display = ''; + caret2.style.transform = 'rotate(180deg)'; + } + else{ + education.style.display = 'none'; + edubtn.style.display = 'none'; + caret2.style.transform = 'rotate(0)'; + } +}) +caret3.addEventListener('click',()=>{ + if(slabel.style.display === 'none'){ + slabel.style.display = ''; + sinput.style.display = ''; + caret3.style.transform = 'rotate(180deg)'; + } + else{ + slabel.style.display = 'none'; + sinput.style.display = 'none'; + caret3.style.transform = 'rotate(0)'; + } +}) +caret4.addEventListener('click',()=>{ + if(expfield.style.display === 'none'){ + expfield.style.display = ''; + expbtn.style.display = ''; + caret4.style.transform = 'rotate(180deg)'; + } + else{ + expfield.style.display = 'none'; + expbtn.style.display = 'none'; + caret4.style.transform = 'rotate(0)'; + } +}) +caret5.addEventListener('click',()=>{ + if(achive.style.display === 'none'){ + achive.style.display = ''; + caret5.style.transform = 'rotate(180deg)'; + } + else{ + achive.style.display = 'none'; + caret5.style.transform = 'rotate(0)'; + } +}) +caret6.addEventListener('click',()=>{ + if(projfield.style.display === 'none'){ + projfield.style.display = ''; + projbtn.style.display = ''; + caret6.style.transform = 'rotate(180deg)'; + } + else{ + projfield.style.display = 'none'; + projbtn.style.display = 'none'; + caret6.style.transform = 'rotate(0)'; + } +}) +caret7.addEventListener('click',()=>{ + if(lnglabel.style.display === 'none'){ + lnglabel.style.display = ''; + lnginput.style.display = ''; + caret7.style.transform = 'rotate(180deg)'; + } + else{ + lnglabel.style.display = 'none'; + lnginput.style.display = 'none'; + caret7.style.transform = 'rotate(0)'; + } +}) \ No newline at end of file