12 Days of Christmas
by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | filed under Coding Exercises (https://www.kirupa.com/codingexercises/index.htm)
One of the more popular Christmas songs is 12 Days of Christmas. Unsurprisingly, it has a very catchy tune with lyrics whose verses gradually keep building upon previous versions. That last part will make more sense when we look at the full lyrics for this song:
On the first day of Christmas
On the second day of Christmas
On the third day of Christmas
On the fourth day of Christmas
On the fifth day of Christmas
On the sixth day of Christmas
On the seventh day of Christmas
On the eighth day of Christmas
On the ninth day of Christmas
On the tenth day of Christmas
On the eleventh day of Christmas
On the twelfth day of Christmas
As we pay attention to the lyrics, we can see that each day adds an extra gift. That gift is carried over with the rest of the gifts in each subsequent verse. This leads to us starting with just one gift and ending, on the twelfth day, with a whopping twelve types of gifts. Those particular gifts are:
1. partridge in a pear tree
2. turtle doves
3. French hens
4. Calling birds
5. Golden rings
6. Geese a-laying
7. Swans a-swimming
8. Maids a-milking
9. Ladies dancing
10. Lords a-leaping
11. Pipers piping
12. Drummers drumming
What we are going to do is build a simple web page that allows us to see these lyrics printed onto the screen.
Onwards!
Starting Point
The easiest way is to fork the following Codepen pen and start adding your modifications:
See the Pen 12 Days of Christmas (https://codepen.io/kirupa/pen/JjvMKZM) by Kirupa Chinnathambi (@kirupa (https://codepen.io/kirupa)) on CodePen (https://codepen.io).
You may want to open the pen in a new window (https://codepen.io/kirupa/pen/JjvMKZM) if you want more space to code your solution or bring up the Console to see the output.
If you prefer developing locally in your favorite code editor (like Visual Studio Code), create a new HTML document and copy/paste the following boilerplate/starting content into it:
12 Days of Christmas
The HTML you see here is just the bare minimum content needed to help us get our web page up and running. The rest of the content is what you will add entirely on your own!
Hint: Some Learning Resources
The following tutorials may provide some helpful tips and techniques to help you with this exercise: Console Logging Basics (https://www.kirupa.com/html5/console.htm), If/Else Statements (https://www.kirupa.com/html5/conditional_statements_if_else_switch_javascript.htm),Looping in JavaScript (https://www.kirupa.com/html5/loops_in_javascript.htm), Combining Strings and Variables (https://www.kirupa.com/javascript/combining_strings_variables.htm)
Getting Your Badge
Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection (https://forum.kirupa.com/badges/):
[Image: ] (https://www.kirupa.com/codingexercises/images/99bottles_badge.png)
To claim it, head over to the forums and respond in the 99 Bottles of Beer on the Wall topic (https://forum.kirupa.com/t/99-bottles-of-beer-on-the-wall-frontend-coding-exercises/653715). Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:
[Image: ] (https://www.kirupa.com/codingexercises/images/create_forum_topic.png)
Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.
Stuck? Need Help? Want a Code Review?
We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums (https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.
Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!