Javascript 30 in 30 Repo
Contains:
- Javascript Drum Kit
-
data- will allow us to add a custom attribute to HTML elements.
-
The event object passed to an event listener contains the 'keyCode' attribute, which we can use to determine which keyboard button has been pressed.
-
Audio HTML element can be selected and played in HTML using .play(). The audio will not play if it has already started, so we can reset the audio back to the start using .currentTime = 0;
-
We can listen for a CSS transition end using the "transitionend" event. The event object for this listener will contains the property 'propertyName'. This tells us the property that finished transitioning.
- CSS + JS Clock
-
We can use CSS to rotate elements using: transform:rotate(deg); By default this will use the centre of the element as the axis. To change this use the 'transform-origin' property. The value for this can be a percentage, with 100% being the rhs of the element, and 0% being the lhs.
-
SetInterval(, ); can be used to run every .
- Playing with CSS Variables and JS
-
We can declare variables in CSS using: --:val. To make these globally available we declare them in the :root element.
-
To use CSS variables we use var(--).
-
We can select multiple HTML elements using the .querySelectorAll() method. This returns a NodeList, which has less methods than an array.
-
The 'change' event handler can be used for detecting input change on sliders. The 'mousemouse' event handler can be used to detect the change AS it happens, not after.
-
element.dataset contains an object with all the data attributes and their values.
-
document.documentElement returns the root element of the page.
-
.style.setProperty(, ); can be used to set a CSS variable in JS.
-
CSS variables are scope based, so the closer variable with the same name as another is used instead of the further ones.
- Array Cardio Day 1
-
.filter(() => {
})can be used to filter down an array. which return true in function body will be in the returned array. We do not need to return false. -
console.table() will display the objects in a table format.
-
.map((item) => {
});is used to return the same number of items as in the original array, but typically altered in some manner (e.g. only the .age value of each object). -
.sort((a, b) => {
})is used to sort the array. Within the function body we will compare a and b. Return < 0 to have a come before b. Else return > 0 to have b before a. -
.reduce((total, item) => {
}, )is used to reduce the array into a single value. is the running total, is the current item, and is the initial value of the counter. can be an object. -
We can create an Array from a NodeList using Array.from().
-
.split() will split the string using into an array.
- Flex Panels Image Gallery
- flex:1 on a flex children will have them equally use the remaining space in the parent. It is used as a proportion, between the children.
- Ajax Type Ahead
- Array Cardio Day 2
- Fun with HTML5 Canvas
- Dev Tool Domination
- Hold Shift to Check Multiple Checkboxes
- Custom HTML5 Video Player
- Key Sequence Detection
- Slide in on Scroll
- Javascript - Reference VS Copy
- LocalStorage and Event Delegation
- CSS Text Shadow Mouse Move Effect
- Sorting Band Names without Articles
- Tally String Times with Reduce
- Unreal Webcam Fun
- Native Speech Recognition
- Geolocation based Speedometer and Compass
- Follow Along Links
- Speech Synthesis
- Sticky Nav
- Event Capture, Propagation, Bubbling and Once
- Stripe Follow Along Dropdown
- Click and Drag to Scroll
- Video Speed Controller UI
- Countdown Clock
- Whack a Mole
