To get better at JavaScript, I decided to give myself the task of making one thing in vanilla JS every day for 30 days, from the wesbos #JavaScript30 challenge. I'll avoid using the starter files unless completely necessary.
Check out my progress below.
To *ahem* kick things off, I made a keyboard drum kit. Not quite as responsive or as loud as my own drum kit but definitely more neighbour-friendly. I sourced the .wav files online and used my own CSS. Learnt about sizing with rem with this one (I've been using px and % in everything up until now).
This morning I made a real-time clock with CSS. I'm already amazed at how much you can make with a bit of CSS and JavaScript. This exercise taught me about the possiblities of transform in CSS and how to dynamically change the style of an element with JS.
Fun fact: I finished this at midday so had to wait around for a minute to take the screenshot.
Today's exercise was really cool! I used range sliders to dynamically change CSS variables, which morph the properties of the elements on the page. It was a lot easier than I thought it would be. Simple but effective.
This one was a bit different to the rest. No front end magic but instead some good drills on using Array functions in JavaScript. I learned about the console.table() function to print out objects in a nice format. Wish I had known about this 2 months ago! These exercises were great practise in manipulating various forms of array.
Today, I learned about flex in CSS and how it be used to create cool adaptable layouts. The panels of the gallery expand on click events, which also triggers text to expand and additional text to slide in from off-screen. On a side note, artsy pictures overlayed with motivational quotes are the worst.
The task today was to create a search list that gives you suggestions based on your input - just like you get on Google! I learned about regex and the'keyup'event listener that detects when you release a key. This allows the suggestions list to dynamically update.
Eat your greens and do your array cardio. Here, I used some more array functions today: some(), every() and find(). Nothing very new here but always good practice maniupulating arrays.
The HTML5 canvas is a really powerful tool. It was even used in my final project Trick or Eat Brains to create a top-down zombie game with multiple object models. Here, I've used a cancas to draw lines in varying width and colour using hsl.
