General Vanilla JavaScript Survival and bonus content: Switches

4 min readSep 10, 2020

MDN Reference: Fetchapi

// Setup the fetch request with the API's url, 
fetch('<https://example.com/profile>', {
  method: 'POST', // May also be a GET, PUT, PATCH, etc.
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data), // Data you need to send to your server
})// Response from the server - likely won't need to modify this
.then(response => response.json())// if data was returned, this is where you decide what to do with your data
.then(data => {
	doSomething(data);
})
.catch((error) => {
  console.error('Error:', error);
});

DOM Element

MDN Reference: Element

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit.

Event Listeners

MDN Reference: Element.addEventListener()

Element Click Event

MDN Reference: click event

Element.addEventListener('click', (event) => {
	if (event.target.matches('.my-query-selector')) {
		console.log('It matches!');
	}
});

Form Submit Event

MDN Reference: submit event

myForm.addEventListener('submit', (event) => {
	event.preventDefault();	// The value of an input field with id="username" inside the form
	const usernameInputValue = event.target.username.value;
});

Inside a submit event, event.target will always return the form.

Classes

MDN Reference: Element.classList

// Add a class name to an Element
Element.classList.add('some-class-name');// Remove a class name from an Element
Element.classList.remove('some-class-name');

The classList only modifies the classes. The classList is not a querySelector, which means you do not have to prepend the class name with .

Attributes

MDN Reference: Element.setAttribute(), Element.getAttribute()

// Returns the value of an attribute; returns null if there is no match
const srcAttribute = Element.getAttribute('src');// Sets the attribute of an Element
Element.setAttribute('src', '<http://www.example.com/image.jpg>');

Query Selectors

MDN Reference: Element.querySelector()

// querySelector() returns the first element that matches the selector
const myElement = document.querySelector('.my-class');// You can also call a querySelector on an element, not just the document
const myChild = myElement.querySelector('.my-child');

Selectors

MDN Reference: selectors

HTML Markup: <div id="myDivId" class="potato-class" data-id="message">Hello</div>

element reference → div
id is referenced using # → #myDivId
class is referenced using . → .potato-class
if a class in your HTML is named with spaces instead of dashes, Call it with dots in place of the spaces in your query selector.
attributes are referenced using square brackets [] → [data-id="message"] (no spaces and quotations are required)

Specificity

Sometimes you need to combine selectors in order to be more specific and accurate.

ie. div.potato-class selects the div element with the class potato-class

Switches

w3schools reference

Switch statements are similar to the if …else statements.

The example below is sample code from. The switch statement takes in today’s date and runs it through different cases. The cases are compared to our date value using strict comparisons meaning that the comparisons must be an exact match, which is important to JavaScript and similar languages.

The above expression will run one time for the date value. The value of date is compared to each case and the block of code gets executed if there is an exact match. At the time of writing this article, the day is Thursday, the block of code that is executed is case 4, which will return the value of day as Thursday.

Because ‘break’ is in the block of code in case 4, the switch statement stops at that case and returns the value of ‘Thursday’.

For input of value of 6, we get ‘Thursday’ ‘Friday’, and ‘Saturday’ .

The three blocks of code that was executed matched our value input. The switch statement went down the list and executed the blocks of code for all cases that match the input value until it reached a ‘break’ moment.

The image below can illustrate what happens if there was no break for the ‘Saturday’ code block.

The switch statement executed the blocks of code for every case from ‘Thursday’. This means we will be able to execute 4 blocks of code for this particular input value

Hopefully this info was valuable to you.

Articles for reference: https://www.w3schools.com/js/js_switch.asp