This website is created for a fictional bank named Bankist. This website has a simple, responsive UI that fits to any browser size, including desktop, mobile and tablet.
| No | Feature | Description |
|---|---|---|
| 1 | Smooth scrolling | Allows user to scroll smoothly into the specified viewport, with an animation effect, rather than jumping immediately to the target element |
| 2 | Modal window | To display additional content or functionality when the user clicks on one of the "show modal" buttons (btnsOpenModal). When the button is clicked, the openModal function is called, which removes the hidden class from the modal and overlay elements, causing them to become visible on the page. |
| 3 | Tabbed Component | To allow users to switch between different sections of content without having to navigate to a separate page. In this specific implementation, clicking on a tab activates the corresponding content area and applies the "active" class to both the tab and content, while removing the "active" class from all other tabs and contents. The implementation also includes a guard clause and a check for the "closest" element in the event target to handle cases where a child element within the tab (such as a span) is clicked. |
| 4 | Menu fade animation | Enhances the user experience of a navigation menu by highlighting the currently selected menu item and dimming the other menu items. This provides a visual cue to the user that they have selected a menu item and improves the overall usability of the website or application |
| 5 | Reveal sections | To animate the appearance of sections on a web page as the user scrolls down the page. The revealSection function is called when an observed section is intersecting with the viewport using the IntersectionObserver API. When the observed section is fully visible in the viewport, the section--hidden class is removed from the section element using entry.target.classList.remove('section--hidden'), revealing the section content with an animation. |
| 6 | Lazy loading | Lazy loading is a technique that delays the loading of non-critical content until the user needs it, such as when they scroll down to view more content. This is achieved by loading a low-resolution image or a placeholder image initially, and then replacing it with the full-resolution image or video once it enters the user's viewport. This technique can improve website performance by reducing the amount of data that needs to be loaded initially. |
| 7 | Slider component | The purpose of the slider component is to display a sequence of images or other content in a sliding manner. It allows the user to navigate through the content by clicking on arrow buttons or dots, or by using the left and right arrow keys on their keyboard. The slider component in the provided code has the additional features of creating and activating dots, as well as lazy loading of images. |
