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…
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 : -1);
//…
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 just
one…
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…
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 aware of being…
