https://github.com/thisisnic/javascript30days

https://github.com/thisisnic/javascript30days

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/thisisnic/javascript30days
• Owner: thisisnic
• Created: 2019-02-19T12:36:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-25T13:26:07.000Z (almost 6 years ago)
• Last Synced: 2024-12-03T18:52:11.486Z (about 2 months ago)
• Language: HTML
• Size: 43.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JavaScript 30 Days

Challenges I have completed for the 30 Day Vanilla JS Coding Challenge from https://javascript30.com/

## 1 - JavaScript Drum Kit

Topics: 

* key events

* audio events

* the transitionend event

* HTML5 custom data attributes

* returning matching components using document.querySelector and document.querySelectorAll

* adding classes to elements with JavaScript

* using eventListeners

* using template literals (expression interpolation)

## 2 - JS and CSS Clock

Topics: 

* controlling transitions using transition-timing-function

* using setInterval to run a function based on time passed

* using transition to time transitions between states

* altering styles using JavaScript

# 3 - Scoped CSS Variables and JS

Topics:

* using the :root selector to set top-level styles

* using var to set styles based on a variable and --varname to define variables

* using the dataset object (which contains all data elements from that object)

* using || '' to append nothing rather than undefined

* using inputs to alter properties of the page

* using the mousemove event for smooth transitions

## 4 - Array Cardio

Topics:

* filtering arrays using the filter method

* using array functions ( => )

* console.table

* concatenating strings manually and using template strings

* sorting arrays using the sort method

* bubble sorts

* the ternary operator

* using the reduce method

* initialising values returned from reduce

* converting nodeLists to arrays

* selecting from nodeLists

* combining map and filter

* creating arrays using the split method

* initialising reduce when full set of keys for key/value pairs are not known

## 5 - Flex Panel Gallery

Topics: 

* using the CSS Flexbox Layout module

* font size and flex transitions

* transforming translateY to move things on and off screen

* applying CSS to first and last child elements

* toggling elements in the classList

## 6 - Type Ahead

Topics:

* Ajax

* the Fetch API

* promises and the 'then' method

* extracting HTTP request responses

* spreading data into an array

* using the push method to append arrays

* regex

* using the 'replace' method

* manually generating HTML components

* using innerHTML to assign new content

* keyup vs. change events

## 7 - Array Cardio 2

Topics: 

* checking with some and every

* searching with find and findIndex

* removing/chooping with splice and slice

## 8 - HTML5 Canvas

Topics: 

* drawing on the HTML5 canvas

* HSL colours

* varying line width

* varying strokeStyle (colour)

* using flags

* mouseout event

## 9 - Dev Tools Domination

Topics: 

* String interpolation in the console

* Styled code in the console

* Assertion and errors in the console

* Browsing objects in the console

* Showing objects as groups in the console

* Timing operations in the console

## 10 - Hold Shift and Check Checkboxes

This exercise was slightly different in that it was the first one I completed entirely by myself before viewing the answer provided.

New things learned:

* click events have the property shiftKey which tells you whether the shift key was held whilst the user clicked

* how to loop through objects to compare to the current (this) object

* how to use flags which are negated when the start/end condition is met

## 11 - Custom Video Player

Topics:

* calling a method defined in a variable

* making content fullscreen

* properties and events of the video object

* using offsets to determine length/position

## 12 - Key Sequence Detection

Topics:

* adding elements to an array

* splicing the array to only keep the last N elements

* using join to convert array to a strings

* using includes to search within a string

## 13 - Slide in on Scroll

Topics:

* debouncing eventListeners

* using the window's height and scrollX properties

* the scroll event

## 14 - JavaScript References VS Copying

Topics:

* copying strings, numbers, and booleans

* copying arrays

* copying arrays with deeper levels of nesting

## 15 - LocalStorage

Topics:

* preventing default behaviours

* overriding checkboxes with CSS

* selecting by name as well as class

* saving to, adn restoring from, local storage

* retrieving values of selected items

* using functions with default and non-default parameters

* event delegation when we have reactive and unpredictable components

* converting strings to and from JSON