Example of javascript code

01 - Drum Kit

Example how to bind key presses to javascript functions. Use of data-* properties

02 - JS + CSS Clock

Use CCS transform and transitions to create a nice looking clock. Use setInterval to update the clock time.

03 - CSS Variables

Using CSS3 variables, changing properties values using javascript and CSS variables, example shows changing blur and margin of an image.

04 - Array Cardio Day 1

Array methods examples, how to use the Array methods: filter, map, sort, reduce. Nothing show, look at the code and console. Use of the function console.table to show array of objects nicelly formatted

05 - Flex Panel Gallery

Pretty example how to use flex to make active panels that grow and shrink

06 - Type Ahead

Get a json, push the object in JSON to array, then search in city and state fields for the typed text, show only matches, with highlighted match.

07 - Array Cardio Day 2

Array example, using the AArray.prototype.every, Array.prototype.find, Array.prototype.findIndex. Nothing show, look at the code and console.

08 - Fun with HTML5 Canvas

Using the canvas, when mouse is pressed a lineis drawn in the screen. Canvas, canvas contex, color using hue, contex functions: BeginPath, moveTo, lineTo, stroke.

09 - Dev Tools Domination

console loging features: Error, warn, info, group, count, time

10 - Hold Shift and Check Checkboxes

When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

11 - Custom Video Player

How to design a custom html5 video player: volume, play speed, progress bar, full screen.

12 - Key Sequence Detection

Silently detect a key stroque sequence, trigger a unicorn if wesbos is typed.

13 - Slide in on Scroll

Example of a document were the images slide into place as you scroll

14 - JavaScript References VS Copying

Examples between copy and reference. Nothing show, look at the code and console.

15 - LocalStorage

Add items to a list, checkbox with image, store list locally.

16 - Mouse Move Shadow

make the mouse cast a shadow over some text

17 - Sort Without Articles

Sort list of strings, ignoring the articles "a,the,an"

18 - Adding Up Times with Reduce

Fun with time, adding up time of a list of video objects with time values stored in data-time properties

19 - Webcam Fun

Using the webcam, and apply changes to the image realtime

20 - Speech Detection

Speach to teXt in your browser

21 - Geolocation

Using location, direction and speed in browser, Need ios simulator if you want to see speed working.

22 - Follow Along Link Highlighter

Highlight jumps from link to link

23 - Speech Synthesis

Example text to speach

24 - Sticky Nav

Navigation bar stays on the top of the page on scroll.

25 - Event Capture, Propagation, Bubbling and Once

Examples how the event propagates through parents and children, how to prevent propagation of event, deal with event on parent, deal with event on child.

26 - Stripe Follow Along Nav

Similar to 22, now the window moves around with the content appearing in and out

27 - Click and Drag

Parallax, use the mouse drag to scroll horizontal items

28 - Video Speed Controller

Use mouse position on a bar to determine a video play speed.

29 - Countown Timer

Example countdown timer, use data-*, timer function with screen update every second.

30 - Whack A Mole

Include svg, game

31 - Each Section one color

Nice effect, that each section has its background, loag images as background.

31 - One Table Two Data

Example how to use data-alt to store alternative values, values change on click. Example shows value shown in DEC and HEX, can also be used to show counts vs percentage. Bonus the table it the ascii table.