Attempting to complete Wes Bos' 30 days of Javascript challenge. I have not used a lot of JS up to this point.
01 - DRUMKIT (My version did not push properly and I have since changed laptop) Key learnings
- The 'data-..' attribute in HTML
- Improved knowledge of query selectors
- Improved knowledge of working with audo files within JS
- Improved knowledge of event management
02 - CLOCK Key learnings
- Using the Date() object
- Introduction to ES6 literals
- Modifying styles with JS
- Using the setInterval() method
03 - CSS Variables & JS Key learnings
- Using data-vars from HTML attributes and dataset
- Using :root and CSS variables
- Using HTML attributes to my advantage
- document.documentElement to select :root
04 - Array Cardio Day 1 Key learnings
- Good refresher of map, sort, reduce etc
- Improved knowledge of ternary operators
- Improved knowledge of arrow functions
05 - Flex Panels Key learnings
- First time working with flex panels. Very interested in learning more
- Good introduction to using toggle to adjust CSS and classes
- More event listeners
06 - Ajax Type Ahead Key learnings
- Introduction to promises and the .then method
- Implementing regular expressions
- Keyup event listener
- Putting the map and filter methods into practice
- Googling the difference between 'practice' and 'practise' as a result of the above learning
07 - Array Cardio Day 2 Key learnings
- Really getting to grips with arrow functions
- Spreading data into arrays
- Learned the every() and some() functions
- Removing items from an array with splice()
08 - HTML Canvas Key learnings
- Mousedown, mouseup, mouseout event listeners.
- HTML Canvas
- CTX attributes and functions
09 - Dev Tools Domination Key learnings
- More uses of the dev tools which I was not aware of.
10 - Hold & Shift Checkboxes Key learnings
- More usage of ternary operators
- Flipping boolean values: value = !value
11 - Custom Video Player Key learnings
- Video attributes
- Using several event listeners in tandem.
- Passing data-values from HTML into JS Functions.
12 - Key Sequence Detection Key learnings
- Using join to convert an array to a string.
- Complex splicing to ensure an array never exceeds a certain length.
13 - Slide in on Scroll Key learnings
- Using image attributes and window attributes to establish the position on the page.
- Adding and removing classes to animate.
14 - References vs Copying Key learnings
- Skipped this as I have covered this topic many times.
15 - LocalStorage Key learnings
- Using local storage to persist data in the browser.
- Using JSON to stringify and parse data from local storage.
- Further practise using events and triggers.
16 - Mouse Move Shadow Key learnings
- Adjusting CSS with mouse move event listeners.
- The Math.round(X) function.
- Chrome dev tools will not trigger mousemove events in a responsive state as it is operating as if it is a touch screen.