JavaScript30

Javascript30 Lesson 11

What I learned from lesson 11 of JavaScript30

Lee Keitel

4 minute read

Lesson 11 has been the most fun so far. This lesson looked at creating custom HTML5 video controls. Browsers have builtin controls for video and audio elements but they don't offer all the features one may want. Also, they typically don't fit stylistically with the rest of a site. In this case, custom controls can be created using CSS and JavaScript to add functionality and fit the style and flow of a site.

In this lesson I gained a better understanding of how video, and by extension audio,…

Javascript30 Lesson 10

What I learned from lesson 10 of JavaScript30

Lee Keitel

2 minute read

So, I'm not gonna lie. This lesson was difficult. The JavaScript itself wasn't difficult, but the logic in the implementation. Honestly this lesson touched on one of the big issues I feel I have with programming which is thinking through a solution in a concise and logical way. I feel like many implementations and solutions I write simply aren't correct. They may work, but I know it's not the right way to do it. My biggest problem is I can tell when my code is bad, but I don't know how to fix…

Javascript30 Lesson 8

What I learned from lesson 8 of JavaScript30

Lee Keitel

3 minute read

Lesson 8 so far has been the most fun. It focused around HTML canvases with the goal being to make a simple painting application. I have some experience with canvases before this lesson. A couple years ago I made an implementation of Conway's Game of Life using the canvas element. I have it setup at the bottom of this post if you want to play it. Source code it here.

Canvas elements allow web develops to have very fine control over a section of the page. Graphics can be as complex or simple as…

Javascript30 Lesson 6 & 7

What I learned from lessons 6 & 7 of JavaScript30

Lee Keitel

4 minute read

For this post I decided to lump together lessons 6 and 7 because 7 was another one that dealt with array functions. It went over four functions .some(), .every(), .find(), and .findIndex(). All of them are simple to understand. The some() function returns if any item in an Array satisfies the function you give to some. This could be used to determine if an Array of people has at least one adult (age >= 18). The every() function returns if all items in an Array satisfy the given functions. For…

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…