Demo can be found here.

What I learned on this mini-project.

isTrusted

Here, the click event is important in determining the outcome of the game, therefore we need to protect from false clicks that can be be mimicked through cheeky javascript code.

Using the isTrusted property allows you to confirm that the event was generated by a user action.

The code above, will return if the event was not a product of user action (not through a script).

Recursion

This technique was used to prevent the same hole from being used twice in a row. It’s important to return the value in the randomHole method, so that it can be used recursively.

Here, the lastHole variable will be assigned to the randomly generated hole. If the following call generates the same hole, the randomHole will be called again until lastHole != hole.

Originally published at gist.github.com.

Javascript 30 (Day 30) was originally published in CloudBoost on Medium, where people are continuing the conversation by highlighting and responding to this story.

Demo can be found here.

What I learned on this mini-project.

setInterval() and clearInterval()

The setInterval method has been used in previous projects, but in this case it's used a little differently, in conjunction with clearInterval.

When you wish for a function or code piece of code to run every so often, setInterval can be used.

Here, an anonymous function which defines a constant is ran every 1000 milliseconds.

In order to clear the countdown variable i.e stop the method running via setInterval you need to clear it. If you don't do this, and try to run the method whilst it's already running (through another function call), they will both run, which can cause erratic behavior.

Here, the method being executed under a given time interval is assigned to countdown, so clearing the variable does the job of cancelling the method calls.

Working with timestamps

If you want the current time, then Date.now() can be used, this will return the number of milliseconds elapsed since 01/01/1970.

It’s easy to turn this into a date object via new Date(milliseconds), where the value extracted from Date.now() is used as a parameter.

Using this object, various methods can be called, to extract different aspects of the time data such as the day, month and year.

Form element selectors

When you want to attach an event to a form, you can utilise this to extract it's input values.

Here, an event listener is attached to the form via its name attribute customForm, and its inputs are extracted by accessing properties off this.

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

offsetHeight

This property represents the height of an element, including vertical padding and borders. It is measured in pixels and is returned as an integer.

In this case, offsetHeight was used in the percentage calculation used to fill the speed-bar.

Normalize value

It made sense for the speed-bar to have appropriate minimum and maximum values, to achieve this, normalization was used, allowing us to map the percentage scrolled, to these minimum and maximum values.

In this case, minimum = 0.4 and maximum = 4. So, the percentage scrolled would fall between the two. For example 10% is approximately equal to a playBackRate of 0.43.

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

Flag variable

These can be used to control the flow of a method or other piece of functionality.

They are mainly used to hold a value until some condition changes, after which you can modify the variable. One of the most common use cases for this is holding a boolean which is dependent on some other piece of code.

In this example, the isDown variable is used to track the state of the mouse. When the mousedown event is triggered the isDown variable is changed, which is used to add further functionality.

pageX and offsetLeft

In this project, the mousedown event is used to initiate the click and drag functionality. For this to work effectively, an anchor point was used, representing the initial click point, the pageX property of the event captures this value.

If a margin or padding is added, then the pageX value will be off, to compensate for this adjustment, you can subtract the pixels changed (from the parent element's offset) to the window.

The code to do this, is shown below.

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

CSS > selector

This is used when you wish to match direct descendent elements.

So, in this case the first li tag, of elements with a class of cool will be selected.

Using multiple classes for progressive effects

In this project, an element needs to be displayed and faded in. To begin with, the element is given the following CSS… display: none, an unfortunate consequence of this, is that transitions can't be applied elements that aren't displayed.

By using multiple classes and adding CSS sequentially, you can first add the element to the page through a class with display: block, then add a second class with the desired transformation properties.

The following code demonstrates this.

Note, a delay of 150ms has been added before adding the second class, this is to maintain the order in which the classes are added.

getBoundingClientRect modification

This object, will by default, give positional values based on the current viewport’s top-left point (which corresponds to (0, 0)).

On occasion however, you might want the element you are targeting to be based on another element.

To do this, you must get that element’s positional values via getBoundingClientRect and subtract these from the target element's positional values.

An example is shown below, where the dropdown is positioned based on the 'nav'.

Originally published at gist.github.com.

Demo can be found here (open up dev tools).

What I learned on this mini-project.

capture

When an event listener has been attached to a DOM element whose parent has the same listener. triggering the event will lead to both elements firing.

By default the events will be triggered from the inside out, but setting capture to true in third options parameter, will reverse this direction.

once

This is a useful option for the addEventListener method, that will prevent the element from triggering multiple events. It has the same functionality as removeEventListener for those higher in the chain.

Event Propagation

This is the blanket term that refers to bubbling and capturing. It essentially means that events will cascade up and down the DOM, from the target element all the way up to the window object.

The direction of propagation can be both ways.

A nice summary of the concept is explained by dividing it into three phases.

This was taken from the following article.

• capture phase - From the window to the event target
• target phase - The event target
• bubble phase - From the event target back to the window

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

position: fixed

The main purpose of this project was to learn about the effects of changing an elements position to fixed.

When applying this property, the element is essentially taken out of the DOM which vacates the space it previously held in it.

This causes a reshuffle for the other elements, which can cause a judder when an elements position is changed to fixed.

One workaround to this, is to fill in the space vacated by adding padding. This can be done multiple ways, but it makes sense to make this value dynamic, so that it adapts when the layout of the page is changed.

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

speechSynthesisUtterance

This is an interface for the Web Speech API. It contains the content that the speech service will read, as well as options that can be configured, such as language and pitch.

• voiceschanged - This event listener can be used to attach an event to add voices to use.
• getVoices() - Will extract the voices on the device being used as an array

SpeechSynthesis

This is the controller interface for the speech service, which can be used to get information about the voices available, on your particular device.

It can also be used to start and pause the speech.

Above, are example properties and methods that can be used to alter the state of the speech device.

Anonymous function

At times you may want to provide a parameter to a function to be used in an event listener. Unfortunately, doing this within a traditional function call will result in it being run on page load.

Using an anonymous function, you can avoid this problem

One caveat to this is that a new function will be created. Relying on this approach can cause unnecessary overhead to your code, which could have negative implications on your websites speed and efficiency.

Originally published at gist.github.com.

Demo can be found here.

What I learned on this mini-project.

getBoundingClientRect()

Used to return an elements sizes and position relative to the window.

It returns an object, which represents the CSS borders associated with the element. The values returned are read-only and can not be updated, these include left, top, x and y.

Values represent the border-box in pixels and are relative to the top-left of the viewport (this doesn't apply to width and height values).

scrollX and scrollY

When the scrolling position changes, the values returned, will adjust to be bound, to the current top-left of the viewport. So, to make sure the values are bound to the top-left of the document, you need to add the distance scrolled via scrollX and scrollY, shown below.

Originally published at gist.github.com.

What I learned on this mini-project.

geolocation

This is a property of the window object, that contains data about the users location. You must grant access for it to work.

The geolocation object is only introduced very briefly, in this project.

watchPosition

This method, allows you to update the users position at regular intervals, instead of getting periodic snapshots of their locations.

The data then needs to be manipulated through a promise, designed to handle successful or unsuccessful data retrieval.

coords

Most of the data that you will need is contained in this object. Examples of this include the latitude, longitude and heading (representing degrees from north).

Originally published at gist.github.com.