Ninelka / JavaScript-30

30 Day Vanilla JS Coding Challenge

JavaScript-30

30 Day Vanilla JS Coding Challenge from Wes Bos

Day 1: Drum Kit

I am creating a drum kit using Javascript and a bunch of audio files

What I learned:

• addEventListener can listen to a lot of events
• Playing audio files is as simple as running .play()
• querySelector can be used to select a matched element
• For every key pressed, there’s a lot of information being passed to the function
• classList returns a list of all classes which can be modified

Day 2: JS and CSS Clock

I am creating a simlpe Clock just using JS and CSS

What I learned:

• I can easily set inline styles using Element.style
• Transforming an element is, by default, at the center
• Element.style.Property = '' resets the styling

Day 3: Playing with CSS Variables and JS

I had already known CSS variables and forEach in JS.

So, what I learned:

• All of the data attributes can be accessed using dataset
• QuerySelectorAll returns a NodeList, which is kind of like an Array, except that it’s not
• CSS Custom Properties can be changed using the setProperty method

Day 4: Array Cardio Day 1

Today we are going to work with Arrays and the different methods that we can use: filter(), map(), sort(), reduce().

What I learned:

• map() and sort() will always return the same number of items
• An initial value is very important in the reduce() method
• How 1 and -1 work in the sort() method

Day 5: Flex Panels Image Gallery

We made an image gallery with CSS Flexbox.

What I learned today:

• The toggle() method is a cool way to literally toggle classes
• Using includes() we can check if something has a certain word or character that we are looking for
• To make image gallery like on many frontpages of a photographers portfolio it really isn’t hard

Day 6: Type Ahead

In the lesson we are using fetch() and filter() methods and also takes advantage of regular expressions to build a simple filter for american cities. Did the same with russian cities in parallel branch

Day 7: Array Cardio Day 2

Today We will explore six JavaScript array functions: some(), every(), find(), findIndex(), splice() and slice()

Day 8: Fun with HTML5 Canvas

Today we are going to create a drawing game using the HTML5 canvas element. We will need to:

• Stretch the canvas to fill the window height and width.
• Set the base settings of the strokeStyle, lineJoin and lineCap.
• Set default drawing variables (to control so the drawing only happens when the mouse is down - not just when the mouse moves).
• Set default variables to hold the beginning and ending coordinates for drawing lines.
• Create some event listeners and a function to handle drawing.
• Add a rainbow styled stroke (first initialising hue and then setting the strokeStyle to an hsl colour)

Day 9: 14 Must Know Dev Tools Tricks

Today we're learning 14 Must know Dev tools tricks:

1. Inspect the element in the dev tools (Break on... > attribute modifications)
2. console.log()
3. Interpolate (use %s)
4. Styled Console Logging (add %c at the beginning of the message)
5. Warnings in the Console (use console.warn())
6. Errors in the Console (use console.error())
7. Information in the Console (use console.info())
8. Using console.assert() for Testing
9. Clearing the Console (use console.clear() )
10. View DOM Elements (use console.dir())
11. Grouping Together (use console.group(name) and console.groupEnd(name))
12. Counting Instances (use console.count())
13. Timing (use console.time() and console.timeEnd())
14. Log in a table (use console.table())