JavaScript30-with-notes

This repository is created to record, share, and review what I have learned through Wes Bos' JavaScript30 exercises. I have summarized the key concepts discussed in each lesson with a link to the MDN documentation or other relevant resources for easier access in the future.

The original JavaScript30 exercises and the repository can be found here: https://javascript30.com/ and https://github.com/wesbos/JavaScript30.

Day 1: Drum Kit 🥁

1. Data-attributes
2. Attribute Selectors
3. Event Listeners
4. Audio element
5. Keycode

Day 2: CSS Clock ⏰

1. setInterval Web API method
2. transform CSS Property
3. transform-origin CSS Property
4. transition-timing-function CSS Property

Day 3: CSS Variables ⚡️

1. CSS Variables
2. :root pseudo-class 2a. CSS pseudo-class
3. Data-attributes
4. JavaScript fallback value
5. documentElement
6. CSS Style Declaration - setProperty method

Day 4: Array Cardio Part 1 💪

1. filter() method
2. map() method
3. sort() method
4. reduce() method

Day 5: Flex Panels Gallery 🖼

1. flexbox
2. translateY CSS function
3. :first-child and :last-child pseudo-class
4. cubic-bezier easing-function 4a. cubic-bezier generator
5. classList.toggle()
6. transitionend event

Day 6: Type Ahead 🔮

1. fetch() method
2. response.json() method
3. Spread syntax
4. filter() method
5. new RegExp()
6. regex modifiers such as g and i
7. String.prototype.match() method
8. String.prototype.replace() method

Day 7: Array Cardio Part 2 💪

1. some() method
2. every() method
3. find() method
4. findIndex() method

Day 8: HTML5 Canvas 🎨

1. HTML5 tag and the canvas element
2. canvas.getContext() method
3. Different context methods and properties such as strokeStyle, lineJoin, lineCap, beginPath(), moveTo(), lineTo(), stroke()
4. Array destructuring
5. hsl colors - hue, saturation, lightness

Day 9: Dev Tools Tricks 🧙🏻‍♀️

1. Break on DOM mutation
2. Different console methods and string substitutions

Day 10: Checkbox Challenge ✅

1. Different DOM Events
2. forEach()
3. Input Type - Checkbox

Day 11: Custom Video Player 📹

1. HTMLMediaElement
2. Different DOM Events
3. Data-attributes
4. Short-circuit Evaluation
5. Fullscreen API

Day 12: Key Sequence Detection ⬆️⬇️⬅️➡️

1. Konami Code
2. Different DOM Events
3. splice()
4. join()

Day 13: Slide-in on Scroll 👀

1. Scroll Event
2. Debounce Function
3. Debounce vs Throttle Demo and CSS Tricks - Debounce vs Throttle - Throttle is not mentioned in this lesson but it is often discussed with debounce
4. window.scrollY
5. window.innerHeight
6. HTMLElement.offsetTop

Day 14: Reference vs. Copy 👩🏻👩🏻

1. JavaScript Data Types
2. Pass by Value vs. Pass by Reference
3. slice()
4. concat()
5. Spread syntax
6. Array.from()
7. Object.assign()
8. Shallow vs. Deep copy
9. JSON.stringify and JSON.parse

Day 15: LocalStorage and Event Delegation 📦

1. localStorage
2. MDN Docs on Event Delegation and How JavaScript Event Delegation Works
3. Persist Logs in Dev Tools
4. Event.preventDefault()
5. Attribute Selectors
6. HTMLFormElement.reset()
7. Element.innerHTML
8. Templating HTML with JS Template Strings
9. Styling native checkbox with emojis
10. Element.matches()
11. Data-attributes

Day 16: Mouse Move Shadow 🖱

1. offsetWidth and offsetHeight
2. clientX vs pageX vs screenX vs offsetX - only offsetXY property was discussed, but knowing the differences between different properties seems useful.
3. Object Destructuring and Renaming
4. text-shadow CSS property

Day 17: Sort Band Names Without Articles 👩🏻‍🎤

1. sort() method
2. replace() method
3. regular expression
4. Element.innerHTML

Day 18: Adding Up Times with Reduce ⏳

1. Array.from()
2. Nodelist
3. String split() method
4. Array destructuring
5. Array map() method and only passing in a function without arguments and also tricky use case with a function that accepts optional arguments
6. Array reduce() method
7. Math.floor() method
8. Remainder/Modulo (%) Operator

Day 19: Webcam Fun 📸

1. npm install without arguments
2. navigator.mediaDevices.getUserMedia()
3. Promise and Using Promises
4. then() method on Promise
5. catch() method on Promise
6. setting srcObject property instead of src on video
7. setInterval Web API method
8. getImageData

Day 20: Speech Recognition 🎙

1. Web Speech API - SpeechRecognition
2. SpeechRecognition interface - interimResults property
3. result and end events of SpeechRecognition
4. isFinal property
5. contenteditable attribute on HTML element

Day 21: Geolocation-based Speedometer and Compass 📍

1. Xcode simulator
2. Navigator.geolocation
3. getCurrentPosition()
4. watchPosition()
5. GeolocationCoordinates interface
6. speed and heading properties

Day 22: Follow Along Link Highlighter ☁️

1. Element.getBoundingClientRect() method
2. window.scrollX and window.scrollY properties
3. transform CSS Property
4. translate() CSS function

Day 23: Speech Synthesis 🗣

1. SpeechSynthesis
2. SpeechSynthesis.getVoices(), speak() method, cancel() method, and voiceschanged event
3. SpeechSynthesisUtterance
4. Attribute Selectors (example: [attr=value])
5. Array.prototype.find() method

Day 24: Sticky Nav 🩹

1. HTMLElement.offsetTop - Distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.
2. HTMLElement.offsetHeight - Height of an element, including vertical padding and borders. In the lesson, it was used to add extra space for the fixed positioned nav element.
3. Window.scrollY - Number of pixels that the document is currently scrolled vertically.
4. Fixed Position - The element is removed from the normal document flow, and no space is created for the element in the page layout.
5. CSS Descendant Combinators - Combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
6. width vs. max-width - To add the transition effect, max-width should be used instead of the width property.
7. transform: scale() - Resizes an element on the 2D plane.

Day 25: Event Capture, Propagation, Bubbling, and Once 🔲

1. Event Bubbling, Capture, stopPropagation
2. Event Capture and Once options
3. e.stopPropagation()
4. Event Propagation MDN Example
5. FreeCodeCamp article about Event Propagation

Day 26: Stripe Follow Along Navigation 👀

1. setTimeout and "this" keyword
2. arrow function scope
3. CSS display and opacity properties - these two properties can remain in two different classes to create a transition effect
4. Element.getBoundingClientRect() method - this method cannot be used with display: none

Day 27: Click and Drag ↔️

1. Different DOM Events such as mousedown, mouseup, mouseleave, mousemove
2. Cursor types such as grabbing
3. MouseEvent.pageX - Returns the horizontal (x) coordinate, in pixels, at which the mouse was clicked, relative to the left edge of the entire document.
4. Element.offsetLeft - Returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
5. Element.scrollLeft - The number of pixels that an element's content is scrolled from its left edge.
6. Naming logged variables with curly braces

Day 28: Video Speed Controller 🎮

1. mousemove event
2. MouseEvent.pageY - Returns the vertical (y) coordinate in pixels of the event relative to the whole document.
3. Element.offsetTop - Returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.
4. Element.offsetHeight - Returns the height of an element, including vertical padding and borders, as an integer.
5. Number.prototype.toFixed() - Formats a number using fixed-point notation and returns a string.
6. HTMLMediaElement.playbackRate

Day 29: Countdown Timer ⏱

1. Date.now() - Returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.
2. setInterval()
3. clearInterval()
4. new Date()
5. Data-attributes
6. HTMLFormElement.reset() - Restores a form element's default values

Day 30: Whack-A-Mole 🏏

1. Math.random()
2. Recursion
3. Multiple CSS Class Selectors - Targets an element that has all of the multiple classes.

<h1 class="three four">Double Class</h1>

.three.four { color:red }

4. window.setTimeout() - Sets a timer that executes a function after the specified amount of time (in milliseconds) is over.
5. Event.isTrusted property - Boolean property that returns true when the event was generated by a user action, and false otherwise.