Joined the JavaScript 30 Day Challenge at https://JavaScript30.com. I've learned of SO many new things during this course and I'm always amazed how elegantly (especially thanks to ES6) JS can be written. This repo will work as a nice little treasure trove of JS (and CSS) techniques.
You can view some of these on GitHub Pages.
| Challenge | Done | Comments |
|---|---|---|
| 01 - JavaScript Drum Kit | Aug 10, 2020 | JS: querySelector, event listenersCool CSS stuff: transition, transformNot deviating from the video in my code |
| 02 - JS and CSS Clock | Aug 11, 2020 | JS: setIntervalCSS stuff: transform-origin to change the position of transformed elements, here to make the clockhands pivot around the right-most end and not in the middleManaged to fix the bug where clockhands transition backwards to the beginning. |
| 03 - CSS Variables | Aug 12, 2020 | JS: querySelectorAll gives you a node list which doesn't have the same methods as arrays.CSS stuff: variables (--) |
| 04 - Array Cardio Day 1 | Aug 13, 2020 | JS: console.table instead of console.log (doesn't seem to be working similarly in Edge, though), array functions: filter, map, sort, reduce, ternary operator (? :) |
| 05 - Flex Panel Gallery | Aug 14, 2020 | JS: classList.toggle is an easy way to remove or add a classCSS: flexing for the first time! |
| 06 - Type Ahead | Aug 14, 2020 | JS: regular expressions, pushing data from an array into a const array with spread (...), fetch method to get data from a URL |
| 07 - Array Cardio Day 2 | Aug 15, 2020 | JS: some and every array methods, find and findIndex. Refreshing my memory of implicit return from an arrow function (super compact), as well as the usefulness of the spread operator .... |
| 08 - Fun with HTML5 Canvas | Aug 17, 2020 | HTML: canvasJS: You need to getContext from the canvas before you can do drawing. Restructuring from an array [a, b] = [1, 2]. Using flagging to "detect" mouse dragging. |
| 09 - Dev Tools Domination | Aug 18, 2020 | JS: console.log tricks: %s to insert a string (or you can use backticks ``), %c to insert CSS styles. console.warn, console.error and console.info for different types of messages, console.clear, console.assert, console.dir, and grouping (console.group, console.groupCollapsed, console.groupEnd). FUN! |
| 10 - Hold Shift and Check Checkboxes | Aug 20, 2020 | JS: Challenged to try this out by myself. Got it working in a way, but was confused by when the checkboxes should be cleared -- apparently never (therefore by reloading)? Anyway, reminded about the handy this and how you can do stuff with this and the previous this and then assign this to that 😁 |
| 11 - Custom Video Player | Aug 30, 2020 | HTML: video tag.JS: Controlling the video: methods play, pause. Video properties: paused (true/false), currentTime, duration. Challenged to make the video toggle fullscreen mode, which I did. Yay me! 💪 |
| 12 - Key Sequence Detection | Aug 23, 2020 | JS: Collecting pressed keys in an array and checking for a secret code easily with join('') + includes(secretCode). Using splice to prevent "keylogging", i.e. keeping the stored array as short as needed for the code. |
| 13 - Slide in on Scroll | Aug 26, 2020 | JS: debounce, scroll event plus useful window properties (window.scrollY, window.innerHeight) and offsetTop for elements. Nice way to make if statements very readable by making the conditions into variables! |
| 14 - JavaScript References VS Copying | Aug 28, 2020 | JS: Working with copies and references. I was quite confused about the point where Object.assign copies only one level deep and you'll change both objects (original and copy) if you change a value too deep – until I realised that "level two" in an object is another object which is copied as a reference value. Duh. |
| 15 - LocalStorage | Aug 31, 2020 | CSS: Custom checkbox. JS: Local storage, event delegation ("responsible parents, negligent children" – you can add an event listener to a parent element and then find out which child triggered it). Challenge: add uncheck/check all and clear list buttons. Added! |
| 16 - Mouse Move Shadow | Sep 2, 2020 | JS: Adjusting text shadow based on the position of the cursor using offsetY and offsetX. Need to do some math adding offsetTop and offsetLeft when hovering over nested elements because they have their own offset coordinates. |
| 17 - Sort Without Articles | Sep 2, 2020 | JS: Sorting a list of band names with articles but the articles shouldn't affect the sort order. Challenged to solve it first by myself – and I did! BUT, I totally forgot about reg exp even though I love reg exp! Such an elegant solution on the video. 👍 |
| 18 - Adding Up Times with Reduce | Sep 2, 2020 | JS: map-ing to turn time string format into numbers and then reduce-ing for calculation. You can do .map(parseFloat), too. Nifty. |
| 19 - Webcam Fun | Sep 6, 2020 | There was a bit of a setup for this one. I started the server on my VirtualBox Ubuntu (where I have Node.js, didn't want to install on my Windows), enabled Bridged networking, found out the IP, added it as a secure local origin (chrome://flags/#unsafely-treat-insecure-origin-as-secure), and then was able to view the page on my Chromebook that has a webcam. 😅 JS: There was lots to do in the challenge as well: accessing the web cam ( navigator.mediaDevices.getUserMedia), showing its image on the webpage in a canvas to be able to mess around with it, taking a snapshot of the video stream and making it a downloadable image. Phew. |
| 20 - Speech Detection | Sep 15, 2020 | !!Last one!! window.SpeechRecognition || window.webkitSpeechRecognition to access, recognition.interimResults = true to get continuous output even before recognition is considered final. (This required fiddling around with VirtualBox and Chrome flags again but third time around I'm a pro. 😎 ) So much fun to be had with this tech (albeit not so widely supported). |
| 21 - Geolocation | Sep 11, 2020 | JS: Setting up the server on my VirtualBox Ubuntu again, this time accessing it on my phone. navigator.geolocation.watchPosition is used to register a handler to spew location data. Used the .toFixed() I happened to learn in video 28 just yesterday because the speed data was showing looooooooong numbers. |
| 22 - Follow Along Link Highlighter | Sep 3, 2020 | JS: getBoundingClientRect to find out where in the viewport an element is and its dimensions.CSS: a single span element moving around the page highlighting different links, transitioning smoothly with animation using transform. |
| 23 - Speech Synthesis | Sep 4, 2020 | JS: Built-in speech synthesis! Alas, no Finnish voice to play around with. However, I did change the list of options a bit by sorting by language and displaying the language code first. |
| 24 - Sticky Nav | Sep 7, 2020 | CSS: Sticky navbar (position: fixed) and programmatically adding offset to "counter" the change from being in the normal flow to being fixed. |
| 25 - Event Capture, Propagation, Bubbling and Once | Sep 8, 2020 | JS: capturing (top-down) and bubbling (bottom-up), stopPropagation method, once property of event listeners. |
| 26 - Stripe Follow Along Nav | Sep 12, 2020 | A dropdown menu with a nice animation when you move between the top links. Nothing new here really, just a lot of "gotchas" to fix: how to make the transition smooth by adding a little delay to showing the menu content, how to offset the dropdown background if you have something before the navigation element pushing it down a bit... |
| 27 - Click and Drag | Sep 9, 2020 | Creating a draggable row of divs. JS: console.log({}) to see the variable values in a nice object. Lots of variables and math to get the effect. 👍 CSS: Lots of properties and selectors to look into: user-select, will-change, :nth-childOther: VS Code's multicursor! Mind. Blown. 💥 |
| 28 - Video Speed Controller | Sep 10, 2020 | JS: A simple speed controller for a video. A nice reminder to create useful variables/consts for more readable code. Useful .toFixed()! |
| 29 - Countdown Timer | Sep 13, 2020 | JS: Date math. A timer with buttons for varying times plus an input field. Added a check for the input field in case of typos (if (!isNaN())) where I flash an error message in the input field. After browsing what other people had done with this, I also realised you could just tell the browser it's a number field (originally text field) and it may handle the error message and prevent the function from running. |
| 30 - Whack A Mole | Sep 14, 2020 | Last of the series (!) but second last for me since I have that speech detection to be done when the kid's not sleeping (or around at all). JS: setTimeout (although it has been used in a couple of previous exercises, I keep forgetting it), checking if a click has been faked (?!) event.isTrusted. Extra feature ideas from Wes: hi-score board saved to local storage or different levels. And I made the hi-score board! 💪 |