/javascriptmas-scrimba

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

Primary LanguageCSS

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