JavaScriptmas 2023 - 24 Days of Coding Challenges

• Create a christmas countdown timer

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

• Gradient Border
  • Use provided colors or choose your own.
  • Gradient is 15 degrees.
• Hover State
  • Gradient colors flip horizontally
  • Button grows slightly in size
  • The text changes from gray to white
• Center button on page

Some children have got some pieces of candy. They want to eat as much candy as they can but each child must eat exactly the same amount. Determine how many pieces of candy can be eaten altogether. A piece of candy can not be split.

My Solution: https://github.com/mehmettemizkan/JavaScriptmas-2023/tree/master/Day3

Use AI to generate a one-line Christmas joke.

• Use a different AI provider
• Work on the UX

• Card has two sides, and flips from front to back on hover
• Match styles as closely as tou can

• 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

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

• Iterate over the wishlist array.
• Dynamically render your wishlist from the array.
• Style the wishlist with CSS.

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

• 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.

• Build a css animation of a progress bar filling to 100%. The animation should run continuosly, with a small pause when the bar is filled 100%.
• The progress begins red, turns blue at 50% full, and green when complete.
• CSS only.

• Use AI to generate an image for a christmas e-card.
• Render the image to the DOM

• Use a different AI provider
• Work on the UX
  • Handle Errors
• Brighten up the modal

• Add code inside of the playSong(id) function to make the Youtube Player play the new youtube song.

• Add your favorite songs.
• Change design and style of app
• Hide YouTube player so you just hear the music.

• Create Switzerland Flag Using Css

• Help santa by sorting the gifts array into alphabetical order AND reverse alphabetical order.

• Complete the task using only the .sort() method.
• Complete the task using no array method other than .forEach()
  
  

• Write the code to help a user choose the perfect Christmas dinner idea based on the number of people attending.
• Include a checkbox for the user to specify the meal should be vegetarian-friendly.

• Add more dietary options.
• Include a button to show an alternative if the user doesn't like the suggested dinner.
• Show links to recipes when a meal is chosen.
• Render an image of the meal when chosen.

• Write a function to duplicate the elf when the button is clicked.
• See index.css for optional styling challenges.

• Write a function to give the elves some tools, or a cup of tea!
• Limit the total number of elves to 100.

• Match the example.
• Center on the page

• Write JS to sort the people in sorteesArr into naughty and nice lists according to whether they've been good or not.
• Display the names on the page in their relevant list.

• Add the option to add new names to sorteesArr.
• Make it possible to switch people from one list to the other.

• Match styles.
• Personalize - display 4 things you love.
• Words should rotate in an infinite loop.
• No JavaScript.

• Use AI to generate alt text for the image provided by generateImage().
• Pass the alt text to renderImage() as a parameter.

• Use a different AI provider.
• Refactor this app so the message is als AI generated.

• There are loads of problems with the code JS. Find them and fix them!

• Work on the UX.
• Have the word selected randomly using AI or an API.

• Save Santa by removing the lions, tigers, bears, and other nefarious creatures from the deeply-nested array.
• Easy mode: you're allowed to flatten the array.

• Hard mode: leave the original array structure in-tact

• Search Input
  • Takes up 1/3 of the width of its container.
• When the user clicks into the search bar:
  • Input grows to entire width of its parent container width smooth transition.
  • Shrinks back to original size when user clicks away.
  • Blue border.
  • Bonus: placeholder text is not visible when user clicks inside the search bar.
• Accessibility
  • For accessibility, form inputs should always have a label. Create a label with a valid for attribute.
  • Look up some CSS rules (no need to write it yourself) that hide search input's label visually but keeps it accessible to screen readers.

• Use a transition to make sure the search bar expands smoothly.

• The :focus pseudo selector.
• A pseudo selector that lets you change placeholder styles.

• We have a gift app. All information disappears when the page refreshes. Make it so that the data doesn't disappear on reload.
• Use localStorage.

• Save the data using Firebase
  • Realtime Database
  • Cloud Firestore
• Play GIF after gift bought.

• On click, toggle switch moves from one side to another.
• Cursor becomes a pointer.
• Match styles.
• No javascript!

• Make the Christmas tree lights flash on and off every 800 miliseconds on a permanent loop.

• Make the blue and red lights toggle on and off alternately. So first the red lights comes on, and then as they go off, blue lights come on.