JavaScriptmas

🎄 This repository contains my solution to the JavaScriptmas challenge organized by Scrimba

Day 1: Countdown to Christmas

• Get today's date (you only need the day)
• Calculate remaining days
• Display remaining days

Stretch goals:

• Display hours, minutes, seconds
• Add a countdown for another festival, your birthday, or Christmas 2022

Day 2: Style a Colorful Button

• Add 115deg gradient border with the provided colors, or choose your own
• Hover state: gradient colors flip horizontally, btn grows slightly in size, and the text changes from grey to white

Day 3: Divide Candy

• Find the total number of pieces of candy the children can eat
• Example: -- Children: 3, Candies: 10 -- Each of the 3 children can eat 3 candies, so the total number of candies that can be eaten is 3*3 = 9

//TEST
calcTotalCandies(3, 10); // expected output: 9
calcTotalCandies(4, 20); // expected output: 20
calcTotalCandies(6, 25); // expected output: 24

Day 4: AI Christmas Joke Generator

• Use AI to generate a one-line Christmas joke
• When clicked, the doors should open to reveal a festive joke.

The solution to Day 4 is available here as Scrim: https://scrimba.com/scrim/co5a24fa494cd1c38e2eb9292

Day 5: Flashcard Flip

• Card has two sides, and flips from front to back on hover
• Match styles as closely as you can
• Use CSS only

Day 6: Secret Santa Generator

• Write a function to randomly assign each person in an array a "Secret Santa", who is someone else in the array
• No one should be assigned themselves as their own Secret Santa

Stretch goals:

• Create a UI with a button to trigger your Secret Santa function and display the results

Day 7: XMas Present Wishlist

• Add items to the wishlist array
• Iterate over the wishlist array
• Display your wishlist on the page
• Style the wishlist with CSS

Stretch goals:

• Provide a way to add / remove wishlist items
• Make each array item an object with the item's name, description and a link to where it can be purchased

Day 8: Animated Progress Bar

• Build a CSS animation of a progress bar filling to 100%. The animation should run continuously, with a small pause when the bar is filled 100%
• The progress bar begins with 1 color, turns to the 2nd color at 50% full, and to the 3rd color when complete
• Use CSS only

Day 9: Animated Progress Bar

• When a user hits submit, dialogModal should be hidden.
• Use the inputted text to generate an image for the e-card using an AI model. Make sure the image is square.
• Render the image to imageContainer.

The solution to Day 4 is available here as Scrim: https://scrimba.com/scrim/co9fc449f9072d453490e145e