Rock Werchter

Home - Rock Werchter Overlay - Rock Werchter
1/2

In this assignment i've learned DOM-manipulation, I created a replica web page for Rock Werchter. This page contains all the information festival-goers need, including the lineup, main navigation, a countdown clock to the next edition, and detailed concert information. The main navigation is designed to make it easy to navigate through the website. It includes links to various parts of the website, such as the lineup and more information about the festival. External links open in a new tab for user convenience.

The lineup section shows all the artists performing at the festival, along with their stage, description, social media links, and images. This information is dynamically loaded via JavaScript to keep the page interactive and up-to-date. A standout feature of the page is the countdown clock, which counts down to the next edition of Rock Werchter. This clock updates every second, providing an exciting countdown for festival-goers.

When a user clicks on a specific concert, detailed information is displayed in a separate container. Here, they find the full description of the concert and links to social media, if available. While the functionality of JavaScript is prioritized, I also used CSS to give the page an attractive and consistent appearance. Bonus points were earned by adding an overlay for detailed concert information.

Tech Stack:

  • HTML
  • CSS
  • JS
  • NodeJS