Bandpage

This is a small HTML / CSS / JS bandpage which displays information about a band and a store to buy merchandise.

General Information

• The aim for this beginner project was to connect HTML / CSS and JS to build an interactive homepage
• I wanted to get to know the logic behind building up a store with simple HTML / CSS / JS (e.g., dynamically adding items to it, calculating the price)
• This project was a nice refresher for my CSS styling skills (e.g., positioning elements with Flexbox)

Technologies Used

• HTML / CSS / JS

Features

• Displaying information about the band
• Displaying a store with the ability to select items to a cart
• Dynamically rendering the cart based on the items added to it (calculating the price)

Screenshots

Demo

Live demo here.

Setup

1. Clone the repo
2. Open index.html in your browser

Learnings

• How to target specific HTML elements using JS
• How to append / remove elements dynamically to / from the DOM
• Adding Event Listeners in JS to provide interactivity to a webpage

Project Status

The project is provisionally finished. I may revisit it in the future to add some more interactive features to it and enhance my JS skills

To do

• Add a feature to purchase tickets

Acknowledgements

• This project was based on this tutorial.