Dark/Light theme

1. (CSS) Set (default) light variables to store colors
2. (CSS) Duplicate new set of variables for dark theme colors
3. (CSS) Add theme switch button with Dark & Light theme icon together
4. (CSS) Make only icon of default theme visible
5. (JS) Add JS function for switching icon
6. (JS) Add JS function for switching theme

Responsive design

1. (CSS) Set to react to browser/screen width a. @media screen and (max-width:1050px) { RESPONSIVE_CSS_SETTINGS }
2. (CSS) Navigation bar a. Add hamburger icon b. Make old navigation bar show as column flex c. Set JS for showing and hiding
3. Other useful attributes: a. Opacity b. Visibility c. Flex <-> Grid

Animation simple CSS

1. Set transition time (transition: .3s ease;)
2. Set properties in old and new class for changes a. e.g. transform: translateY(-65px); -> (0px)

Exit pop-up menu when clicking outside the popup

• Example of using menu button to open navigation menu

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const menuBtn = document.querySelector(".nav-menu-btn");
const navigation = document.querySelector(".navigation");

menuBtn.addEventListener("click", () => {
    navigation.classList.add("active");
    
    // Add listener to element outside the menu
    var activeNav = document.querySelector(".navigation.active");
    if (activeNav){ // Check if the outside element exists
        activeNav.addEventListener("click", (e) => {
            // Make sure clicking the menu element won't cause quitting
            if(e.target !== e.currentTarget) return;
            navigation.classList.remove("active");
        });
    }
});