Skip to content

Commit

Permalink
Refactor toggle button event listeners in Astro components
Browse files Browse the repository at this point in the history
  • Loading branch information
@dnachavez
dnachavez committed Apr 27, 2024
1 parent 0f3a3e8 commit 7b97f83
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 41 deletions.
22 changes: 12 additions & 10 deletions src/sections/CertificatesSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,18 @@ import certificates from "../data/certificates.json";
const button = document.getElementById('toggle-certificates');
let showAllCertificates = false;

button.addEventListener('click', () => {
const certificates = document.querySelectorAll('.certificate-card');
showAllCertificates = !showAllCertificates;
if (button) {
button.addEventListener('click', () => {
const certificates = document.querySelectorAll('.certificate-card');
showAllCertificates = !showAllCertificates;

certificates.forEach((card, index) => {
if (index >= 3) {
card.style.display = showAllCertificates ? '' : 'none';
}
});
certificates.forEach((card, index) => {
if (index >= 3) {
card.style.display = showAllCertificates ? '' : 'none';
}
});

button.innerHTML = showAllCertificates ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
button.innerHTML = showAllCertificates ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
}
</script>
22 changes: 11 additions & 11 deletions src/sections/EducationSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,17 @@ import educationDegrees from "../data/education.json";
let showAllEducationDegrees = false;

if (button) {
button.addEventListener('click', () => {
const educationDegrees = document.querySelectorAll('.education-card');
showAllEducationDegrees = !showAllEducationDegrees;

educationDegrees.forEach((card, index) => {
if (index >= 4) {
card.style.display = showAllEducationDegrees ? '' : 'none';
}
});
button.addEventListener('click', () => {
const educationDegrees = document.querySelectorAll('.education-card');
showAllEducationDegrees = !showAllEducationDegrees;
educationDegrees.forEach((card, index) => {
if (index >= 4) {
card.style.display = showAllEducationDegrees ? '' : 'none';
}
});

button.innerHTML = showAllEducationDegrees ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
button.innerHTML = showAllEducationDegrees ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
}
</script>
22 changes: 12 additions & 10 deletions src/sections/ProjectsSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,18 @@ import projects from "../data/projects.json";
const button = document.getElementById('toggle-projects');
let showAllProjects = false;

button.addEventListener('click', () => {
const projects = document.querySelectorAll('.project-card');
showAllProjects = !showAllProjects;
if (button) {
button.addEventListener('click', () => {
const projects = document.querySelectorAll('.project-card');
showAllProjects = !showAllProjects;

projects.forEach((card, index) => {
if (index >= 4) {
card.style.display = showAllProjects ? '' : 'none';
}
});
projects.forEach((card, index) => {
if (index >= 4) {
card.style.display = showAllProjects ? '' : 'none';
}
});

button.innerHTML = showAllProjects ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
button.innerHTML = showAllProjects ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
}
</script>
22 changes: 12 additions & 10 deletions src/sections/jobsSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,18 @@ import jobs from "../data/jobs.json";
const button = document.getElementById('toggle-jobs');
let showAllJobs = false;

button.addEventListener('click', () => {
const jobs = document.querySelectorAll('.job-card');
showAllJobs = !showAllJobs;
if (button) {
button.addEventListener('click', () => {
const jobs = document.querySelectorAll('.job-card');
showAllJobs = !showAllJobs;

jobs.forEach((card, index) => {
if (index >= 2) {
card.style.display = showAllJobs ? '' : 'none';
}
});
jobs.forEach((card, index) => {
if (index >= 2) {
card.style.display = showAllJobs ? '' : 'none';
}
});

button.innerHTML = showAllJobs ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
button.innerHTML = showAllJobs ? '<svg class="rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See less' : '<svg class="transition-transform" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> See more';
});
}
</script>

0 comments on commit 7b97f83

Please sign in to comment.