1. JavaScript30 day 12: Key sequence detection

    Today’s exercise allows the user to unlock something by entering a specific key sequence. This works by using the keyup event listener, storing pressed keys in an array and using Array.prototype.includes() to check if it matches a secret code (a...

  2. JavaScript30 day 11: Custom video player

    Today’s task was to implement custom controls on an HTML5 video player and add a full screen toggle button. Working with play, pause and timeupdate events meant a lot could be achieved with little code. The source is on github...

  3. JavaScript30 day 10: Hold shift to check multiple checkboxes

    Today’s challenge was to add Gmail like functionality to a checklist - if you select one box and then shift-click another it should check the boxes in between. I’ve always used for loops for similar tasks but Wes’s use of...

  4. JavaScript30 day 9: Dev tool tricks

    This was a really useful overview of the Chrome developer tools and how they can help with JavaScript. Setting a breakpoint: Right click an element in the elements panel > Break on > Attributes modification. With this option selected, as...

  5. JavaScript30 day 8: Fun with HTML5 canvas

    Today’s creation was an MS paint-like drawing board using HTML5 canvas. I don’t usually build this kind of thing but it was lots of fun. It’s given me some ideas for some more creative side-projects. Notes ES6 allows you to...

  6. JavaScript30 day 7: Array cardio day 2

    Another exercise looking at JavaScript’s array methods. I’m finding refactoring ES5 to ES6 to be a really effective way of learning the new syntax. It’s impressive how many things can become a one-liners. Notes: The array method Array.prototype.some() will check...

  7. JavaScript30 day 6: Ajax type ahead

    Challenge six was to build a search of places with autocomplete and highlighting. The fetch API and promises got their first usage. It’s great to see these kind of affects achieved without relying on a third-party library! My latest progress...

  8. JavaScript30 day 5: Flex panels image gallery

    This lesson reinforced the value of Flexbox to me. It’s something I’d like to use a lot more of on future projects. Notes: An element in CSS can be a flex item as well as a flex container. CSS transitions...

  9. JavaScript30 day 4: Array cardio day 1

    The first day of pure JavaScript exercises focused on working with Arrays and there were plenty of lessons learned: Array.prototype.map takes in an array and returns a new array of the same length. map will always return the same number...

  10. JavaScript30 day 3: CSS variables and JS

    The third challenge was to use JavaScript to change the value of CSS Variables creating a spacing, blur and colour mixer in the process. So far I’ve learnt more about modern CSS than JavaScript! I’ve generally stayed away from CSS...