← Back to Portfolio

JavaScript Explanation

This portfolio uses a small amount of JavaScript to add interactivity. Below is an explanation of each JavaScript function used in the site. The JavaScript is embedded directly in the HTML file (not in a separate .js file).

1. Modal (Popup) Functions

function openModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.style.display = 'flex';
  document.body.style.overflow = 'hidden';
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.style.display = 'none';
  document.body.style.overflow = 'auto';
}

What it does: These two functions control the popup modals (the boxes that appear when you click buttons like "What is Data?").

openModal: Shows the modal by changing its display style to 'flex' and prevents the page from scrolling behind it.

closeModal: Hides the modal by changing display to 'none' and allows scrolling again.

How it works: Each modal has a unique ID. When you click a button, it calls openModal('modal-id') to show that specific modal.

2. FAQ Toggle Function

function toggleFAQ(element) {
  const answer = element.nextElementSibling;
  const icon = element.querySelector('.faq-icon');
  
  if (answer.style.display === 'block') {
    answer.style.display = 'none';
    icon.textContent = '+';
  } else {
    answer.style.display = 'block';
    icon.textContent = '−';
  }
}

What it does: This function makes the FAQ sections expandable/collapsible (accordion style).

How it works:

1. When you click a question, it finds the answer element (the next sibling element)

2. It checks if the answer is currently visible (display: block)

3. If visible, it hides the answer and changes the icon to '+'

4. If hidden, it shows the answer and changes the icon to '−'

3. Close Modal on Outside Click

window.onclick = function(event) {
  if (event.target.classList.contains('modal')) {
    event.target.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
}

What it does: Allows users to close a modal by clicking outside of it (on the dark overlay).

How it works: When any click happens on the page, it checks if the clicked element has the 'modal' class. If yes, it hides that modal.

Why JavaScript is Used

Pure HTML and CSS cannot:

• Show/hide elements based on user clicks (without page reload)

• Toggle between two states (expand/collapse)

• Detect clicks on specific areas to trigger actions


JavaScript adds this interactivity while keeping the code simple and educational!

Alternative: Pure CSS Approach

It IS possible to create some of these effects with pure CSS using:

• :target selector - for modals (but changes the URL)

• checkbox hack - for accordions (uses hidden checkboxes)

• details/summary elements - native HTML accordion


However, these approaches have limitations and the JavaScript version provides a better user experience.