30 Days of Javascript Challenge - 30 JS Projects - Taught by wesbos
All projects have been implemented using vanilla HTML, CSS and Javascript - no frameworks.
- Learning Points:
- Attaching event listeners to specific keys
- HTML audio
- Learning Points:
- Javascript Datetimes
- Rotational Mathematics
- Animation Timing Functions
- Learning Points:
- CSS Variables
- Adding custom functions Sliders & Colour Pickers
- Learning Points:
- Popular array methods (forEach, map, filter, reduce, sort)
- Learning Points:
- Working with nested Flexbox Containers
- Flex Basis with transitions
- Learning Points:
- Dynamic page updates
- Implementing auto-completion search bars
- Learning Points:
- Other array methods (some, every, find, findIndex)
- Learning Points:
- HTML Canvas
- Creating dynamic pens with Javascript
- Learning Points:
- Several console logging tools (table, count, etc.)
- Debugging in browser using breakpoints (by attribute or behaviours triggered via event listeners)
- Learning Points:
- Implementing shift select in forms
- Learning Points:
- Creating a video player from scratch
- Adding custom video playing functions (full-screen, skips, playback speed, volume, etc)
- Learning Points:
- Using splice to limit array sizes while the items within shift
- Learning Points:
- Working with page viewports
- Image Animation & Transitions
- Learning Points:
- Differences between safe and unsafe object & array manipulations
- Shallow and deep object copies
- Several methods for copying arrays & objects
- Learning Points:
- How to work with local storage for persistent states
- Event Delegation
- Preventing Default Behaviours in the browser
- Learning Points:
- Dynamic Page animation tracking mouse move
- Dealing with mouse move behaviour over children elements
- Learning Points:
- Writing custom sorting functions
- Stripping strings with regular expressions
- Learning Points:
- Parsing and reducing time strings
- Complex reduce functions
- Learning Points:
- Working with Media Devices to Access Webcam
- Rendering Webcam to video elements via localMediaStream
- Rendering webcam video to HTML Canvas
- Applying filters to canvas webcam video (red filter, rbg split, green screen)
- Implementing screencapturing and download functionality
- Learning Points:
- Working with microphone and built-in browser speech recognition software
- Building a dictation app
- Learning Points:
- Working with the iphone simulator in XCode
- Capturing and displaying geolocation & compass and speedometer data
- Learning Points:
- Identifying location of elements on the page using bounding rectangles
- Resolving follow along operations via mathematical operations
- Learning Points:
- Working with built-in browser speech synthesis and voice utterances
- Method chaining on arrays (filter, map, find)
- Passing callback functions with arguments to event listeners using the bind method
- Learning Points:
- Fixed Positioning
- Attaching classes to the parent elements which can then be used to toggle styles on child elements
- Working with element offset heights and window.scrollY properties
- Learning Points:
- Differences between event capturing and bubbling when adding event listeners to elements
- How to stop event listeners from bubbling events up
- How to reverse the order of listening to events from bottom-up to top-down using the capture option.
- How to un-bind event listeners from elements after an event is run once using once option.
- Learning Points:
- Using event listeners to unhide/hide elements on the page
- Handling hovers where area of hover should extend when new elements are shown (to prevent elements from being hidden immediately after)
- Using bounding boxes and element offsets to resize and move background elements around - creating a follow along effect
- Preventing brittle behaviours from occuring when using setTimeouts in event listeners (sometimes classes can be added and not removed in the same order that events have happened due to the usage of setTimeout in event listener callback functions)
- Learning Points:
- Using event listeners to keep track of mouse states and position
- Changing page content via mouse movement tracking and states
- Learning Points:
- Adjusting playback rate using custom slider inputs
- Learning Points:
- Drawbacks of using setIntervals globally
- The need to reset setIntervals when they are called multiple times
- Working with datetime objects to construct timers
- Selecting elements from DOM using name properties and not query selectors
- Learning Points:
- Creating utility functions such as RandInt.
- Recursive functions - If returning a repeated value - call yourself again.
- Using SetIntervals to time the game
- Preventing scores to add up if clicks are not genuine (not trusted).
