script.js

"use strict";

// Copy to clipboard
function copy_to_clipboard(text) {
  navigator.clipboard.writeText(text);
  show_snackbar(`"${text}" copied to clipboard!`);
}

// Update Age
const year_in_sec = 60 * 60 * 24 * 365;
const bday_day = 24;
const bday_month = 6;
const bday_hour = 15;
const bday_year = 1991;
const bday = new Date(bday_year, bday_month, bday_day, bday_hour);
const ageElement = document.getElementById("age");

function calculateAge(birthDate) {
  const now = new Date();
  const birth = new Date(birthDate);
  const ageInMilliseconds = now - birth;
  const millisecondsPerYear = 1000 * 60 * 60 * 24 * 365.25; // Including leap years
  return ageInMilliseconds / millisecondsPerYear;
}

function updateAge() {
  const age_float = calculateAge(bday);
  ageElement.innerHTML = `${age_float.toFixed(8)} y.o.`;
}

setInterval(updateAge, 1000);

// Update work periods
function calculatePeriod(startDate) {
  const now = new Date();
  const start = new Date(startDate);
  const diffTime = Math.abs(now - start);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

  const years = Math.floor(diffDays / 365);
  const months = Math.floor((diffDays % 365) / 30);

  let result = "";
  if (years > 0) {
    result += `${years} yr${years > 1 ? "s" : ""}`;
  }
  if (months > 0) {
    if (result) result += " ";
    result += `${months} mo${months > 1 ? "s" : ""}`;
  }

  return result || "0 mos";
}

function updateWorkPeriods() {
  const professorElement = document.getElementById("professor-period");
  const ctoElement = document.getElementById("cto-period");

  if (professorElement) {
    professorElement.innerHTML = calculatePeriod(new Date(2024, 1, 1)); // Feb 2024
  }

  if (ctoElement) {
    ctoElement.innerHTML = calculatePeriod(new Date(2016, 11, 1)); // Dec 2016
  }
}

// Update periods initially and then every hour
updateWorkPeriods();
setInterval(updateWorkPeriods, 3600000); // Update every hour

// element toggle function
const elementToggleFunc = function (elem) {
  elem.classList.toggle("active");
};

// sidebar variables
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");

// sidebar toggle functionality for mobile
sidebarBtn.addEventListener("click", function () {
  elementToggleFunc(sidebar);
});

// testimonials variables
const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
const modalContainer = document.querySelector("[data-modal-container]");
const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
const overlay = document.querySelector("[data-overlay]");

// modal variable
const modalImg = document.querySelector("[data-modal-img]");
const modalTitle = document.querySelector("[data-modal-title]");
const modalText = document.querySelector("[data-modal-text]");
const modalDate = document.querySelector("[data-modal-date]");

// modal toggle function
const testimonialsModalFunc = function () {
  modalContainer.classList.toggle("active");
  overlay.classList.toggle("active");
};

// add click event to all modal items
for (const element of testimonialsItem) {
  element.addEventListener("click", function () {
    modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
    modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
    modalTitle.innerHTML = this.querySelector(
      "[data-testimonials-title]"
    ).innerHTML;
    modalText.innerHTML = this.querySelector(
      "[data-testimonials-text]"
    ).innerHTML;
    modalDate.innerHTML = this.querySelector(
      "[data-testimonials-date]"
    ).innerHTML;
    testimonialsModalFunc();
  });
}

// add click event to modal close button
modalCloseBtn.addEventListener("click", testimonialsModalFunc);
overlay.addEventListener("click", testimonialsModalFunc);

// custom select variables
const select = document.querySelector("[data-select]");
const selectItems = document.querySelectorAll("[data-select-item]");
const selectValue = document.querySelector("[data-selecct-value]");
const filterBtn = document.querySelectorAll("[data-filter-btn]");

if (select) {
  select.addEventListener("click", function () {
    elementToggleFunc(this);
  });
}

// add event in all select items
for (const element of selectItems) {
  element.addEventListener("click", function () {
    let selectedValue = this.innerText.toLowerCase();
    selectValue.innerText = this.innerText;
    elementToggleFunc(select);
    filterFunc(selectedValue);
  });
}

// filter variables
const filterItems = document.querySelectorAll("[data-filter-item]");

const filterFunc = function (selectedValue) {
  for (const element of filterItems) {
    if (selectedValue === "all") {
      element.classList.add("active");
    } else if (selectedValue === element.dataset.category) {
      element.classList.add("active");
    } else {
      element.classList.remove("active");
    }
  }
};

// add event in all filter button items for large screen
let lastClickedBtn = filterBtn[0];
for (const element of filterBtn) {
  element.addEventListener("click", function () {
    let selectedValue = this.innerText.toLowerCase();
    selectValue.innerText = this.innerText;
    filterFunc(selectedValue);

    lastClickedBtn.classList.remove("active");
    this.classList.add("active");
    lastClickedBtn = this;
  });
}

// contact form variables
const form = document.querySelector("[data-form]");
const formInputs = document.querySelectorAll("[data-form-input]");
const formBtn = document.querySelector("[data-form-btn]");

// add event to all form input field
for (const element of formInputs) {
  element.addEventListener("input", function () {
    // check form validation
    if (form.checkValidity()) {
      formBtn.removeAttribute("disabled");
    } else {
      formBtn.setAttribute("disabled", "");
    }
  });
}

// page navigation variables
const navigationLinks = document.querySelectorAll("[data-nav-link]");
const pages = document.querySelectorAll("[data-page]");

// add event to all nav link
for (const element of navigationLinks) {
  element.addEventListener("click", function () {
    for (let i = 0; i < pages.length; i++) {
      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
        pages[i].classList.add("active");
        navigationLinks[i].classList.add("active");
        window.scrollTo(0, 0);
      } else {
        pages[i].classList.remove("active");
        navigationLinks[i].classList.remove("active");
      }
    }
  });
}