50 Projects in 50 Days
December 2020
These are the coding projects following the course 50 Projects in 50 Days by Brad Traversy. All mini projects are done in HTML, CSS & JavaScript that relate to the DOM. In addition to this some external ressources like fonts (font-awesome & google-fonts) but no frameworks are being used
The course can be found at udemy.
Rotating Navigation
Day 3
The hamburger menu will rotate the whole webpage by 20 deg and the menu items on the bottom will slide in from the left.
Mini Project
Hidden Search Widget
Day 4
Initially only a search-icon will be shown. On click the hidden search widget will expand moving the button to the side.
Mini Project
Blurry loading
Day 5
Blurry image that clears up the closer the percentage is to 100%. Also loading display fades out.
Mini Project
Scroll Animation
Day 6 not mobile-friendly
Elements that scroll into the viewport are flying in from the sides into the middle. Reverse effect when they leave the viewport.
Mini Project
Form Wave Animation
Day 8
Form with label inside <Input> Fields. When Input is activated the labes moves up in a wave-like motion.
Mini Project
Sound Board
Day 9
The Buttons on the soundboard will play the sound of an <audio> Element.
Mini Project
Dad Jokes
Day 10
Using fetch and async await to request dad joke from the API at https://icanhazdadjoke.com
Event keyCode
Day 11
Simple Page that displays the key, keyCode & code of any button pressed. Although keyCode is deprecated.
FAQ Collapse
Day 12
Collapsable FAQ Elements using FontAwesome & CSS to style the background and FA to style the Buttons.
Mini Project
Random Choice Picker
Day 13
User can enter choices and on <Enter> a random animation will start at the end of which one option is highlighted.
Mini Project
Animated Navigation
Day 14
Navigation with an expanded and a collapsed state. State Transition is done with custom animations.
Mini Project
Incrementing Counter
Day 15
Incrementing counters. Counting up to the target in configurable steps. Responsive design.
Mini Project
Drink Water
Day 16
App that lets the user track your fluid intake. Clicking the small glasses fills the big glass.
Mini Project
Background Slider
Day 18
Lightbox with a twist. Lets you cycle through the images but the image is being displayed muted on the background as well.
Mini Project
Theme Clock
Day 19
Animated Clock with theming. Button toggles Dark mode and Light mode. Slight animations issues on full Minutes/Hours/Days.
Mini Project
Button Ripple Effect
Day 20
Added a ripple Effect to buttons. On click a white circle will enlarge and fade on the active button.
Mini Project
Drag'n drop cat
Day 21
Five Boxes and one Cat. You can drag it into any other box. The cat has a random appearance on each pageload.
Mini Project
Draw App
Day 22
Basic Drawing App with Color Picker and variable stroke size using HTML Canvas Element
Kinetic CSS Loader
Day 23
Kinetic CSS Loader animation using keyframes. Only CSS, no JavaScript.
Background Slider
Day 18
Lightbox with a twist. Lets you cycle through the images but the image is being displayed muted on the background as well.
Mini Project