Cardinal direction enum from range input
Evaluation

For somebody learning Javascript this code isn't bad, however it does have some inefficiencies and practices that are frowned upon (e.g. Global variables). See the suggestions below for advice about improving it.

Suggestions

Semicolon terminators

Unless you are intimately familiar with the statements that need to be terminated by a semicolon it is wise to always terminate each line with a semi-colon.

Selecting elements by class vs id attribute

The first line selects an element from the DOM by the id attribute - i.e. document.querySelector('#orientation'). The next line uses a class selector to select an element: document.querySelector(".degrees"). If there is only one element with class name degrees that matters for this application then an id attribute would be more appropriate than class. 

Also, it isn't wrong to use document.querySelector() to get elements by id but using document.getElementById() "is definitely faster" 1 (see this jsPerf test for comparison). Similarly document.getElementsByClassName() is also faster. I would suggest only using document.querySelector() when there is a complex selector (e.g. form lable[for="direction']

Global variables

Any variable not declared with a keyword like var, const or let is considered global. For a small application like this it likely wouldn't lead to any issues but in a larger application it could lead to unintentional side-effects if the same name is used in different functions.

Excess closures

The lines to add event listeners can be simplified:


document.querySelector("#orientation").addEventListener('input', function(event) {
  setCardinalDirection()
})

window.addEventListener("load", function(){
 setCardinalDirection()
})



Instead of wrapping the calls to setCardinalDirection() in an extra function, just pass the name of the function:

document.querySelector("#orientation").addEventListener('input', setCardinalDirection); 
window.addEventListener("load", setCardinalDirection);