Based on Wes Bos' javascript30.com course

What is this about?

• codealong to Wes Bos JavaScript30 course, which is a free course - the only thing you have to do is sign up via email
• see more of his courses on wesbos.com
• see Wes Bos JavaScript30 on GitHub here
• see transcripts here
• most of Wes Bos lessons are desktop first, a ToDo could be to make (if possible) all of them responsive
• this repo here is my small codealong code snippets, seperated into HTML, CSS and JavaScript files
• down below I've included screenshots of single course projects, to give a visual representation

How to run this?

Heads up: unless stated otherwise, the majority of my code examples don't have build processes - only simple HTML, CSS and JavaScript files

• clone this whole repo or copy and paste code of a single project
• cd into the project you want to throw on localhost
• open index.html in your browser of choice (in my case, built in/for Chrome)

Course Content

01 - Sound Kit

02 - Clock

03 - Update CSS Variables

04 - Arrays and Methods

05 - Flex Panels

06 - City or State

07 - Arrays and Methods

08 - HTML5 Canvas

09 - Dev Tools

10 - ToDo List

11 - Custom HTML5 Video Player

12 - Key Sequence Detection

13 - Slide in on scroll

14 - Arrays and Objects

15 - Local Storage and Event Delegation

16 - CSS Text Shadow Mouse Move Effect

17 - Sort Without Article

18 - Add Up Times

19 - Webcam Fun

20 - Speech Detection

21 - Geolocation Speedometer Compass

22 - Follow Along Link

23 - Speech Synthesis

24 - Sticky Nav

25 - Event Capture, Bubbling, Propagation, Once

26 - Animated Follow Along Nav

27 - Leporello Click and Drag Slider

28 - Video Speed Controller

29 - Countdown Timer

30 - Whack-A-Mole

01 Sound Kit

• grab keyCodes that are asscociated with the keys displayed here
• keycode.info
• listen to keydown event
• if there's corresponding audio, play audio on keydown
• along a bit of transformation (via CSS)

02 Clock

• grab current time
• update hands accordingly (seconds, minutes, hour)
• along a bit of transition (some via CSS, some via JavaScript)

03 Update CSS Variables

• 3 <input>, 2 of them of the type range, 1 of them of the type color
• via JavaScript, manipulate default set CSS variables --base, --blur and --spacing
• event listener for change and mousemove, will be triggered regardless of which one happened

04 Arrays and Methods

• Array.prototype.filter(): Filter the list of inventors for those who were born in the 1500's
• Array.prototype.map(): Give us an array of the inventors first and last names
• Array.prototype.sort(): Sort the inventors by birthdate, oldest to youngest
• Array.prototype.reduce(): How many years did all the inventors live all together?
• Array.prototype.sort(): Sort the inventors by years lived
• Array.from(), Array.map(), Array.filter(): Create a list of Boulevards in Paris that contain 'de' anywhere in the name
• Sort Exercise: Sort the people alphabetically by last name
• Reduce Exercise: Sum up the instances of each of these

05 Flex Panels

• most things are done with CSS here (Flexbox, transitions, translates)
• if clicking on one panel, said panel will grow in size and show additional text coming in from the top and the bottom (via translateY())
• if all panels are clicked, all of them will show the whole texts, available space will be distributed evenly
• JavaScript is only needed to toggle associated classes

06 City or State

• fetch and filter data (US cities and US states) from external .json file link, distributed by Wes Bos
• filter / search for within that list of cities and states
• all matching cities and states will be shown while typing ahead in search field
• results (if any) will be rendered as innerHTMLs and - through adding a CSS class - will be highlighted while typing

07 Arrays and Methods

• Array.prototype.some(): Is at least one person 19 or older?
• Array.prototype.every(): Is everyone 19 or older?
• Array.prototype.find(): Find the comment with the ID of 823423
• Array.prototype.findIndex(): Find the comment with the ID of 823423 / delete the comment with the ID of 823423
• Create a new array with the updated (deleted) array

08 HTML5 Canvas

• enable drawing on HTML5 element <canvas> - that said, drawing will happen on context in 2d - via click and drag
• listen for mousedown, mousemove, mouseup, mouseout
• within the draw() function, using some options we have on the context regarding color, linewidth etc

09 Dev Tools

• this tutorial is about what you can log in the console
  • console.log('hello');
  • console.warn('WARN');
  • console.error('Display error here');
  • console.info('Only Information-Text here');
  • console.clear();
  • console.time();
  • console.count();
  • console.table();
• interpolated %s - will pass the second parameter into the first parameter
  • console.log('I am: %s‘, ‚a fool');
• styled %c
  • console.log('%c I am some great text', 'font-size: 25px; background: yellow;');

10 ToDo List

• click a checkbox, hold down shift key, click another checkbox - automatically also mark all of the checkboxes inbetween
• works top to bottom and bottom to top
• listen on click event on all checkboxes
• check for shift key being down AND checked

11 Custom HTML5 Video Player

• customize the default HTML5 video player controls (in my case, on Chrome)
• hide those panels and build our own based on our own HTML
  • play / pause button
  • volume slider
  • speed of video slider
  • skip buttons (10 seconds back / 25 seconds forward)
  • progress bar (dragable, showing where we're at)
• listen to
  • click, play, pause, timeupdate, change, mousemove, mousedown, mouseup
• possible ToDo: implement full screen button

12 Key Sequence Detection

• when someone inputs a certain sequence of keys, then something needs to happen / something is triggered, e.g. an easter egg
• most used online: Konami Code
• type coffee, this will trigger cornify_add()
• see Cornify Github
• see Cornify.com
• listen to keyup event on window
• splice

13 Slide In On Scroll

"Make sure to debounce your scoll functions! Performance!"

• when scrolling down a page, have images slide in from left/right at half-scolled passed image height
• images are hidden by default via CSS (translate(), opacity: 0)
• listen on scroll event
• implement debounce function, as having event listener on scroll is not performative - the implemented function will only run the checkSlide() function every 20 milliseconds

14 Arrays and Objects

• Reference vs Copy
• strings, numbers, booleans: if you reassign a variable and afterwards change the value of the original variable, the original variable value will change but NOT the reassigned one
• array reference: if you update an array it will always reference back; reference example is NOT a copied array, it's just a reference to the original array, so BOTH of them will be updated!
• array copy options:
  • exisitingArray.slice()
  • concatenate an existing array into an empty array [].concat(existingArray)
  • ES6 spread [...existingArray]
  • `Array.from(existingArray)
• object reference: if you update an object it will always reference back; reference example is NOT a copied object, it’s just a reference to the original object, so BOTH of them will be updated!
• object copy options:
  • Object.assign({}, existingObject, { new-property: new-value }), the third parameter can of course also overwrite existing property/values
  • ES6 spread `{...existingObject}``
  • Object.assign() only goes one level deep!
  • the poor man's deep clone: JSON.parse(JSON.stringify(existingObject)) - make the object a string and immediately parse it back to an object, not recommended

15 Local Storage and Event Delegation

• create menu where you can add items and - after adding - immediately check/uncheck them
• whatever's being entered will have a persisting state (local storage), after refreshing the page (localStorage.setItems())
• possible ToDo: add "select all" / "deselect all" buttons

16 CSS Text Shadow Mouse Move Effect

"Be aware of the element you are targeting! This might need recalculation of cursor position!

• create a shadow that follows mouse move

17 Sort Without Article

• sort band names without considering "a", "an", "the", but keep those when listing/printing the sorted list
• sort(), trim(), map(), join()
• RegEx

18 Add Up Times

• add up total number of hours, minutes, seconds of all videos
• numbers are provided via string in "data-time="xx:xx"
• convert them to numbers, add them all up to total
• .map()
• .reduce()
• modulo

19 Webcam Fun

rgb effect: red effect: green screen:

• live camera footage will be grabbed, drawn on canvas, colors manipulated
• you need to give access to your camera to use this feature
• chose between three effects: rgb effect, red effect, green screen
  • check index.js, here setInterval(), to un/comment desired effect
• download image you've screenshot
• sliders only work on green screen effect
• heads-up: my code is slightly different from Wes Bos
• in Wes Bos course he has this running via live server/browsersync, so if you copy this code, run npm install, then npm start

20 Speech Detection

• voice to text
• for every started/stopped spoken sentence, a new <p></p> is going to be created and filled with detected words
• you need to give access to your microphone to use this feature heads-up:
• make sure you're only detecting for speech in ONE browser window/tab
• even then, in my case my recognition froze after a few spoken words (both, with browsersync and 'native' Visual Studio Code Live Server) and I had to either stop/start browsersync and/or hard reload the browser window
• in Wes Bos course he has this running via live server/browsersync, so if you copy this code, run npm install, then npm start

21 Geolocation Speedometer Compass

• how many degrees of north is a person (compass)
• speed of that person moving (in km/h)
• you need to give access to your location to use this feature
• as on Chrome we can fake geolocation coordinates but cannot fake geolocation heading and geolocation speed, this is supposed to grab heading and speed data given by Chrome and work with that
• in Wes Bos course he has this running via live server/browsersync, so if you copy this code, run npm install, then npm start
• this is intended to be developped with Xcode via simulation of another device (e.g., iPhone11)
• for this after firing up npm start you'd need to copy the external URL shown in your terminal into the browwer of the simulated device on Xcode

22 Follow Along Link

• when hovering over the page, have the links having an animated hover effect that follows (with a little bit of delay) while moving along
• those "little pills" will both resize themselves and follow along

23 Speech Synthesis

• text to voice
• heads-up: my code is slightly different from Wes Bos
• SpeechSynthesis Web Speach API (experimental feature)
• limit selectable voices to 'en'
• manipulate speed and pitch of spoken words/voice

24 Sticky Nav

• navigation that snaps and becomes sticky after scrolling past top of nav position
• little transition while sliding in the 'LOST'

25 Event Capture, Bubbling, Propagation, Once

While using addEventListener, consider what's being fired when!

• 3 nested <div>s all nested inside of each other
• bubbling: click on the innermost element will also trigger the outer parent element, the event will bubble up
• capture: click on an element will go from top to bottom, no event being fired but captured and stored, then - at the bottom - start of bubbling up the event
• stopPropagation(): stops bubbling up an event
• once: true: listens for the event once and unbinds itself; use for example in store checkouts when you don't want and need a customer clicking (submitting) a button multiple times - see <button> element

26 Animated Follow Along Nav

• navigation menu on hover, automatically resizing itself (size depending on content)
• most of this can be done with CSS BUT here it's calculated how big the ul class="dropdown" container is and how to have the white background behind it

27 Leporello Click and Drag Slider

• click and drag slider to left/right
• (calculated) mouse actions mousedown, mouseleave, mouseup and mousemove

28 Video Speed Controller

• control scrubber, control speed as video is playing

29 Countdown Timer

• timer with 6 options:
  • 20 seconds
  • 5 minutes
  • 15 minutes
  • 20 minutes
  • 60 minutes
  • customised entered minutes
• displays how much time is left

30 Whack-A-Mole

• bonk 6 moles when they pop up
• runs for 10 seconds after start has been clicked
• count the hits on a score board