JavaScriptmas-2023

JavaScriptmas 2023 - 24 Days of Coding Challenges

Day 1: Countdown to Christmas

Challenge

• Create a christmas countdown timer

Stretch goals:

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

Day 2: Style a Colorful Button

Challenge

• 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

Here is the output of my solution of the Day 1 & Day 2 Challenges

Day 3: Divide Candy

Challenge:

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

Day 4: AI Christmas Joke Generator

Challenge

Use AI to generate a one-line Christmas joke.

Stretch Goals

• Use a different AI provider
• Work on the UX

Day 5: Jeopardy Card Flip

Challenge

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

Day 6: Secret Santa

Challenge

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

Day 7: Xmas Present Wishlist

Challenge

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

Requirements

• 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

Challenge

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

Day 9 AI Christmas E-card Generator

challenge

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

Stretch Goals

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

Day 10: Rockin' Around

Challenge

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

Stretch Goals

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

Day 11: Flag Challenge Switzerland

Challenge

• Create Switzerland Flag Using Css

Day 12 Santa's Gift Sorter

Challenge

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

Stretch Goals

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

Day 13 Christmas Dinner Packer

Challenge

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

Stretch Goals

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

Day 14 Lonely Elf

Challenge

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

Stretch Goals

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

Day 15 Archery Target

Challenge : Build An Archery Target

• Match the example.
• Center on the page

Day 16 Naughty List, Nice List

Requirements

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

Stretch Goals

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

Day 17 Word Carousel

Challenge

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

Day 18 AI Alt Text Generator

Challenge

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

Stretch Goals

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

Day 19 Debug Jingle Words

Debug Challenge

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

Stretch Goals

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

Day 20 Save Santa

Requirements

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

Stretch Goals

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

Day 21 Expanding Search Bar

Requirements

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

Hints and Help

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

What to Research

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

Day 22 Gift App

Challenge

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

Stretch Goals

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

Day 23 Toggle Button

Challenge

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

Day 24 Christmas Tree Lights

Challenge

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

Stretch Goals

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