Javascript30 Lesson 5

What I learned from lesson 5 of JavaScript30

Lee Keitel

2 minute read

After the last lesson which was only JavaScript, this lesson dealt mainly with CSS in particular flex box. The JavaScript that was used had already been covered in previous lessons such as .querySelectorAll(), .forEach(), and classList. In this lesson, you make a photo gallery page where each image is shown and clicking on an image will expand it to take up more space to get a better look. With the expanding image, some text also animates in from the top and bottom giving a nice, smooth feel to…

Javascript30 Lesson 4

What I learned from lesson 4 of JavaScript30

Lee Keitel

1 minute read

This lesson dealt with JavaScript array fundamentals rather than making a functional application. Not as fun, but still very important.

I’ve used array functions like map, filter, and reduce in other languages but not JavaScript. The implementations are simple to understand and doesn’t take long to learn.

My solutions to the sort problems are a bit simpler then what Wes used in the video:

// Problem 3
// Original Answer
const ordered = inventors.sort((a, b) => a.year > b.year ? 1…

Javascript30 Lesson 3

What I learned from lesson 3 of JavaScript30

Lee Keitel

2 minute read

Lesson 3 dealt more with CSS than JavaScript. This lesson demonstrated the use of variables in standard CSS. Although CSS preprocessors have had variables for quite some time, the values of them can’t be changed at runtime. Meaning, there’s no way to change a single value and have all other dependent properties update with the new value. In contrast, when a variable in CSS is altered, every property that uses it will also be updated and repainted. This allows the programmer to change…

Javascript30 Lesson 2

What I learned from lesson 2 of JavaScript30

Lee Keitel

4 minute read

Lesson 2 of JavaScript30 was to make a realtime clock with second, minute, and hour hands. This lesson focused on both CSS and JavaScript. With CSS, styles were applied to adjust the start position of the hands, make them look like a real clock where they overshoot slightly before bouncing back into place, and ensuring a smooth transition between positions. JavaScript was used to adjust the rotation of the hands in accordance with the current time.

From this lesson I learned about the…

JavaScript30 - Lesson 1

What I learned from lesson 1 of JavaScript30

Lee Keitel

2 minute read

The first lesson of JavaScript30 is to make a page where pressing a key on the homerow of a qwerty keyboard caused the browser to play a sound such as a bass drum, cymbal, or snare drum. This lesson focused on event handlers and manipulating the HTML audio element.

I was already familiar with event handlers and query selectors. I’ve never used an audio element before so that was new. In particular I was already aware of being able to play and stop audio with JavaScript but I wasn’t…