chocolat5/30days-of-javascript

This is the demo for #JavaScript30

30 days of JavaScript

What is this project

This is the demo for #JavaScript30(30 days vanilla JS cording challenge) by Wes Bos.
Build 30 app with JavaScript.

I create with

• webpack
• Sass
• Babel

Contents

Day 1: Drum Kit

• Sounds are played on the keyboard pressdown
• Sound based on the data- (custom data attributes) set in each keys
• Uses keydown event

Demo

Day2: CSS + JS Clock

• Real-time Clock in Digital and Analog
• Get a moment time uses new Date(), getSeconds(), getMinutes(), getHours()
• Analog clock hands moved by CSS transfrom: rotate()

Demo

Day3: Playing with CSS Variables and JS

• Change the value of a slider control with input of type="range"

Demo

Day4: Array Cardio Day 1

• How to use filter() map() sort() reduce()

Demo

Day5: Flex Panels Image Gallery

• On mouse over to expand the box and show the text
• Uses mouseenter mouseleave transitioned

Demo

Day6: Ajax Type Ahead

• Suggested City Names by type some text
• City Names get from api(json data) by using fetch()
• Find matche City Name by text inputted using filter() match()

Demo

Day7: Array Cardio Day 2

• How to use some() every() find() findIndex splice() slice()

Demo

Day8: Fun with HTML5 Canvas

• Draw on display created with canvas

Demo

Day9: 14 Must Know Dev Tools Tricks

• Uses console method

Demo

Day10: Hold Shift to Check Multiple Checkboxes

Demo

Day11: Custom Video Player

• Video Handler of play or stop, change progress, skip
• Uses play() pause()

Demo

Day12: Key Sequence Detection

• Key pushed to array on each keyboard pressdown
• Show message if array contains secret code
• Uses keyup

Demo

Day13: Slide in on Scroll

• Image fade in when window scroll in specified position
• Uses window.scrollY

Demo

Day14: JavaScript References VS Copying

• What difference between Reference and Copy Variables
• Uses slice() concat() ...(spread) Object.assign

Demo

Day15: LocalStorage

• Input text saved to Local Storage
• Uses localStorage.setItem() localStorage.getItem()

Demo

Day16: Mouse Move Shadow

• Shadow move according to moving the mouse

Demo

Day17: Sort Without Articles

• Uses sort()
• Uses replace() trim() join()

Demo

Day18: Adding Up Times with Reduce

• Uses reduce()

Demo

Day19: Webcam Fun

• Uses MediaDevices.getUserMedia()()
• Uses canvas

Demo

Day20: Speech Detection

• Uses SpeechRecognition() interimResults

Demo

Day21: Geolocation

• Compass can be used in mobile devise
• Uses geolocation.watchPosition()

Demo

Day22: Follow Along Link Highlighter

• Highlighter following the moving mouse
• Uses getBoundingClientRect()

Demo

Day23: Speech Synthesis

• Uses SpeechSynthesisUtterance() getVoices() speak()

Demo

Day24: Sticky Nav

• Navigation fixed at position top of window when window scrolled
• Uses offsetTop offsetHeight

Demo

Day25: Event Capture, Propagation, Bubbling and Once

• Uses event.stopPropagation() capture

Demo

Day26: Stripe Follow Along Nav

• Show sub menu with animation when mouse over item
• Uses getBoundingClientRect()
• Uses mouseenter mouseleave

Demo

Day27: Click and Drag

• Slider can be moved drag and drop
• Uses mousedown mouseleave mouseup mousemove
• Uses offsetLeft scrollLeft pageX

Demo

Day28: Video Speed Controller

• Uses video.playbackRate

Demo

Day29: Countdown Timer

• Countdown timer and show the end time
• Uses Date.now() new Date()
• Uses setInterval() clearInterval()

Demo

Day30: Whack A Mole

• Game of Whack-A-Mole
• Uses Math.random()
• Uses setTimeout()

Demo

References

JavaScript30 https://javascript30.com/