Paul Mackey

* Adding to these as I go along - Mainly for me :)

Axios request

const axios = require('axios')
axios.get('https://api.buttercms.com/v2/posts/?auth_token=....').then((response) => {
        this.posts = response.data.data.map((post) => {
            return post.slug
        })
    })
    .catch((e) => {
        console.error(e)
    })

Get element by ID

document.getElementById('id-of-el')

Get first element of matched selector by class

document.querySelector('.el')

Get's all elements

var currentSlides = document.querySelectorAll('.FullscreenCarousel-slides .FullscreenCarousel-slide img')

Loop through slides

;[...currentSlides].forEach(slide => { // logic here })

Old fashioned loop

for (i = 0; i < slideLengths.length; ++i) {
  slideLengths[i].innerHTML = numberOfSlides - 1
}

Get element within a fragment and set an attribute equal to an attribute of another element - uses getAttribute('attr-name') & setAttribute('attr-name')

slideFragment
.querySelector('.CarouselSlide-media img')
.setAttribute('data-flickity-lazyload', img.getAttribute('data-src'))

Get elements by tag name

document.getElementsByTagName("script")

Import a template

// blank slide template
var template = document.querySelector('.slideTemplate')
var slideFragment = document.importNode(template.content, true)

Ternary Operator

let person = {
  name: 'tony',
  age: 20,
  driver: null
};
// if person >=16, person.driver = 'Yes', else person.driver = 'No'
person.driver = person.age >=16 ? 'Yes' : 'No';

Event Listeners

//hash change
window.addEventListener('hashchange', () => {
      // logic here
})


// Add click event listeners to multiple elements 
;[
  document.querySelector('[class$="-cover"] img'),
  document.querySelector('.FullscreenCarousel-cover-count'),
  document.querySelector('.show-skeleton-button')
].forEach(item => {
  item.addEventListener('click', event => {
    // logic here
})
})

// Resize event listener 
window.addEventListener('resize', fn())

// orientation change
window.addEventListener('orientationchange', fn())

// Window loaded 
window.addEventListener('load', () => { // logic here  })

Ajax Request

$.ajax({
  type: 'GET',
  url: '/submit',
  data: $("#filterForm").serialize(),
  success: function (data) {
    $('#product-grid').html(data)
  }
})

Fetch URL

window.fetch('https://services.share-pi.aarp.org/applications/CoreServices/WSOWebService/captcha/getWidget').then((resp) => resp.text()).then(data => {
// logic here
})

Creating a class & constructor

export class ClassName {
  constructor () {
    this.init()
  }
}

Extending a Class

export class StripeForm extends AuthForm { }

Getters/Setters

let campaignTracking = {
  get trackingCode () {
    return this._trackingCode
},

  set trackingCode (value) {
    this._trackingCode = value
  }
}

Object methods

Object.keys(obj) – returns an array of keys.
Object.values(obj) – returns an array of values.
Object.entries(obj) – returns an array of [key, value] pairs.

Useful JS Snippets

* Adding to these as I go along - Mainly for me :)