#JAVASCRIPTMAS 2023

scrimba.com 24-day JavaScript challenge

1. A Christmas Countdown Timer
   The goal was to create a Christmas Countdown Timer.

2. Style a Colorful Button
   The goal was to style a colourful button with a gradient (115 degrees) border that when hovered over, the gradient colours flip horizontally, the button grows slightly in size, and the text changes from gray to white.

3. Dividing Candies
   The goal was to find the total number of pieces of candy the children can eat. Each child had to eat the exact same amount, and a piece of candy could not be split. I also used HTML and CSS to provide a visual interface.

4. AI Christmas Joke Generator
   The goal was to use AI to generate a one-line Christmas joke. I completed a stretch goal of using a different AI provider (Hugging Face).

5. Jeopardy Card Flip
   The goal was to create a card with two sides that flips from front to back on hover without JavaScript, and match the style as closely as possible. I also added a background to fit the theme.

6. Secret Santa
   The goal was to write a function to randomly assign each person in an array a “Secret Santa” who is someone else in the array. No one was to be assigned themselves as their own Secret Santa. I completed the stretch goal to create a UI with a button to trigger the Secret Santa function and display the results.

7. Christmas Present Wishlist
   The goal was to add items to the wishlist array and then iterate over that array, and then display the wishlist on the page, and then style the wishlist with CSS. I also completed a stretch goal of providing a way to add and remove items from the list.

8. Animated Progress Bar
   The goal was to build a CSS animation of a progress bar filling to 100% that runs continuously, with a small pause when the bar is filled 100%; with no JavaScript. I also used HTML and CSS to build a present tracker interface.

9. AI Christmas E-card Generator
   The goal was to use AI to generate an image for a Christmas e-card and render the image to the DOM. I completed the stretch goal of using a different AI provider (Hugging Face). I also made some design changes using HTML and CSS and used JS to provide the user the option to regenerate a new card.

10. Rockin' Around
    The goal was to add code inside of the playSong(id) function to make the YouTube player play the new YouTube song. I also changed the player interface to resemble an mp3 player.

11. Flag Challenge
    The goal was to create the flag of Switzerland using an aspect ratio of 1:1. I also added an animation to change the background of the flag when the user hovers over it.

12. Santa's Gift Sorter
    The goal was to help Santa by sorting the gifts array into alphabetical order and reverse alphabetical order. I also redesigned the interface using HTML and CSS to give a retro feel and added a reset button.

13. Christmas Dinner Picker
    The goal was to write the code to help a user choose the perfect Christmas dinner idea based on the number of people attending. Instead of a checkbox for the user to specify that the meal be vegetarian-friendly, I added a Grinch mode which changed the background and offered Grinch-friendly meals. I completed two stretch goals to show links to recipes and to render an image of the meal when a meal is chosen. I also changed the interface layout using HTML and CSS.

14. Lonely Elf
    The goal was to write a function to duplicate the elf when the button is clicked. I completed the stretch goals of limiting the number of elves to 6 per row, and making the elves stay in the elf hangout zone. I also changed the interface design using HTML and CSS and added the ability for the elf to change his mood based on the number of elves.

15. Archery Target
    The goal was to match the example provided and center it on the page using CSS. JavaScript was not allowed. I also added a background.

16. Naughty List, Nice List
    The goal was to write JavaScript to sort the people in sorteesArr into naughty and nice lists according to whether they’ve been good or not. I completed the stretch goals of adding the option to add new names to sorteesArr and making it possible to switch people from one list to the other. I used HTML and CSS to change the interface design.

17. Word Carousel
    The goal was to create a word carousel that matched the styles presented. It had to be personalized to display 4 things that I loved, and the words needed to rotate in an infinite loop. JavaScript was not permitted. I also added a background.

18. AI Alt Text Generator
    The goal was to use AI to generate alt text for the image on the Christmas e-card. I used the same modifications to the design of the card as I did in the previous AI card challenge, and completed a stretch goal of using a different AI provider (Hugging Face was used).

19. Debug Jingle Words
    The goal was to debug the problems in a section of the JavaScript code provided.

20. Save Santa
    The goal was to save Santa by removing the lions, tigers, bears, and other nefarious creatures from the deeply-nested array. For the stretch goal, the original array structure had to be left intact, I used recursion to accomplish this goal. I also opted to create a visual interface using HTML and CSS.

21. Expanding Search Bar
    The goal was to make an expanding search bar where the search input takes up ⅓ the width of the container. When the user clicks into the search bar, the Input must grow to the entire width of its parent container with a smooth transition, it must shrink back to original size when the user clicks away, and have a blue border. For accessibility, the form input has a label with a valid for attribute, and CSS rules were used to hide the input’s label visually while keeping it accessible to screen readers. As a bonus, I made it so the placeholder text is not visible when the user clicks inside the search bar.

22. Gift App
    For this challenge, I was given the code for an app where you can add names of the people you want to purchase gifts for, and double click to remove the name once the gift had been purchased. The goal was to make it so the data doesn’t disappear on reload, using localStorage. I completed a stretch goal to play a GIF after a gift was bought.

23. Toggle Switch
    The goal was to create a toggle switch which on click; moves from one side to the other. The cursor had to become a pointer, and I matched the style. No JavaScript was allowed. I chose to add text, a background, and an image to be toggled.

24. Christmas Tree Lights
    The goal was to make the Christmas tree lights flash on and off every 800 milliseconds on a permanent loop. I also completed the stretch goal of making the blue and red lights toggle on and off alternatively.