Band Site

Description of this project

BIO Page

This band project is the second project I worked on at Brain Station, utilizing JavaScript and APIs. I implemented the design using HTML and SCSS based on the provided mockups and style guides.

I applied the concepts learned in class to create a comment feature for the BIO page using JavaScript, which includes validation checks for the name and comment inputs. I utilized objects, functions, and DOM methods to load and add comments to the list.

Additionally, comments display time in formats like "just now," "1 day ago," and "3 weeks ago," and when hovering over them, the original date is revealed. I also added a zoom-in animation to the gallery images that triggers on mouse hover. Links throughout the page guide users to the appropriate locations. The entire page is designed to be responsive, ensuring optimal user experience across various screen sizes.


Show Page

On the Show page, I added the show list using only DOM methods. I effectively utilized higher-order functions (HOF) to differentiate the output of lists for mobile and desktop views. The navigation indicates which page the user is on, and hovering over it deactivates the active state.

Additionally, various features have been implemented to enhance user experience, with the overall design also being responsive to ensure proper functionality on different devices.