cerenss/favorite-band

HTML-CSS-DOM Activity

Overview

We have gone through some of the fundamental building blocks of webpages, which are HTML, CSS, Javascript Basics and DOM manipulation. In this activity, you will utilize all the skills that you have learnt to build a tribute website for your favourite musician/actor or in general, artist!

Instructions

• Please check the Sample.pdf in the Example folder. We are going to create the same thing but personalized. Still if you did not listen any Soen before, its highly recommended :P.
• Go ahead and decide on the artist you want to build your tribute page.
• Create the basic layout with semantic HTML elements and style your page in a way that your heart desires with CSS.
• Use anything to create a layout for your website.
• Have a navbar and a footer for your site.
• Use 3 main colors for your website. If you want to use more, try to use other shades of those 3 colors.
• For the first section of your website, there must be a background cover image, name of the artist and a short(4-5 words long) paragraph.
• Second section must have 2 divs side by side, one having the image of the artist, the other having a paragraph of your choice detailing the artist.
• Third section must have some cards (bonus points if you have a lot of cards in a carousel), about the albums/movies/products of the artist each having an image, a name section, and a short paragraph with details inside.
• Fourth section must have a text-box in which the user can leave a message or can praise the artist and a submit button. When the button is clicked, the message should be put inside a container right below the text-box which must be created dynamically via JS and shown there. The user must be able to leave as many messages as they want.
• Fifth section is about supporting the artist. So there should be some buttons with ammounts shown in them to donate to the artist. One of the buttons must have an input field letting the user donate an amount of their choice. When a button is clicked the donation must be done and should be shown in the paragraph below just like so : "TOTAL OF ${TOTAL_DONATION_AMMOUNT} HAS BEEN DONATED TO THE BAND... THANK YOU!". You can put an additional "Donate!" button if you want to call the actions from one place.
• Write a function which prompts the user to type their name. When the page loads, this function must run and prompt the user for their name, when the user writes their name down, an alert message should appear which greets the user with their name.

Happy Coding!!!