phongpham/Portfolio_BTVN
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update portfolio with Google Material Design, dark/light mode, and new features

Browse Source
This commit is contained in:
PhongMacbook
2025-10-30 00:08:38 +07:00
parent bda78dbdad
commit bd97e10d25
38 changed files with 1005 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
assets/js/script.js
View File

@@ -7,6 +7,31 @@ const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
// Theme Toggle functionality
const themeToggle = document.getElementById('themeToggle');
const htmlElement = document.documentElement;
// Check for saved theme preference or default to 'light'
const currentTheme = localStorage.getItem('theme') || 'light';
htmlElement.setAttribute('data-theme', currentTheme);
// Toggle theme function
themeToggle.addEventListener('click', function() {
const currentTheme = htmlElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
htmlElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Add rotation animation
this.style.transform = 'rotate(360deg)';
setTimeout(() => {
this.style.transform = 'rotate(0deg)';
}, 300);
});
// sidebar variables
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");
@@ -61,18 +86,23 @@ const selectItems = document.querySelectorAll("[data-select-item]");
const selectValue = document.querySelector("[data-selecct-value]");
const filterBtn = document.querySelectorAll("[data-filter-btn]");
select.addEventListener("click", function () { elementToggleFunc(this); });
// Only add event listeners if portfolio elements exist
if (select) {
select.addEventListener("click", function () { elementToggleFunc(this); });
}
// add event in all select items
for (let i = 0; i < selectItems.length; i++) {
selectItems[i].addEventListener("click", function () {
if (selectItems.length > 0) {
for (let i = 0; i < selectItems.length; i++) {
selectItems[i].addEventListener("click", function () {
let selectedValue = this.innerText.toLowerCase();
selectValue.innerText = this.innerText;
elementToggleFunc(select);
filterFunc(selectedValue);
let selectedValue = this.innerText.toLowerCase();
if (selectValue) selectValue.innerText = this.innerText;
if (select) elementToggleFunc(select);
filterFunc(selectedValue);
});
});
}
}
// filter variables
@@ -95,22 +125,24 @@ const filterFunc = function (selectedValue) {
}
// add event in all filter button items for large screen
let lastClickedBtn = filterBtn[0];
if (filterBtn.length > 0) {
let lastClickedBtn = filterBtn[0];
for (let i = 0; i < filterBtn.length; i++) {
for (let i = 0; i < filterBtn.length; i++) {
filterBtn[i].addEventListener("click", function () {
filterBtn[i].addEventListener("click", function () {
let selectedValue = this.innerText.toLowerCase();
selectValue.innerText = this.innerText;
filterFunc(selectedValue);
let selectedValue = this.innerText.toLowerCase();
if (selectValue) selectValue.innerText = this.innerText;
filterFunc(selectedValue);
lastClickedBtn.classList.remove("active");
this.classList.add("active");
lastClickedBtn = this;
lastClickedBtn.classList.remove("active");
this.classList.add("active");
lastClickedBtn = this;
});
});
}
}