gg-1414

// Copy & paste this into browser console to play

(function () {
  const winConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],

gg-1414

const catEndpoint = 'https://api.thecatapi.com/v1/images/search';
const wordsEndpoint = 'https://random-word-api.herokuapp.com/word?number=5'

function checkStatus(res) {
  if (!res.ok) Promise.reject(new Error(res.statusText));
  return Promise.resolve(res.json());
}

const renderImage = (imgUrl) => {
  const wrapper = document.getElementById('image-wrapper');

gg-1414

const catEndpoint = 'https://api.thecatapi.com/v1/images/search';
const wordsEndpoint = 'https://random-word-api.herokuapp.com/word?number=5'

function checkStatus(res) {
  if (!res.ok) Promise.reject(new Error(res.statusText));
  return Promise.resolve(res.json());
}

const renderImage = (imgUrl) => {
  const wrapper = document.getElementById('image-wrapper');

gg-1414

class CloseBtn extends HTMLElement {
  constructor() {
    super();

    // Event listener
    const clickHandler = function(event) {
      console.log('event target', event.target)
    }

    // Create a shadow root 

gg-1414

<div>
  <!-- begin close button -->
  <close-btn></close-btn>
  <!-- end close button -->
  <p>Blah blah I say some stuff</p>
</div>

<div>
  <!-- begin close button -->
  <close-btn></close-btn>

gg-1414

<div>
  <!-- begin close button -->
  <div class="btn-wrapper>
    <button>
      <svg width="34" height="34" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 1L7 7M13 13L7 7M7 7L13 1L1 13" stroke="red" stroke-width="2"/>
      </svg>
    </button>
  </div>
  <!-- end close button -->

gg-1414

<template></template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import ListItem from '@/components/ListItem.vue'; 
import { ListItemModel, listData } from '../data/groceryListData'; 

@Component({
  components: { ListItem },

gg-1414

<template></template>

<script lang="ts">
import Vue from 'vue';
import ListItem from '@/components/ListItem.vue'; 
import { ListItemModel, listData } from '../data/groceryListData'; 

export default Vue.extend({
  name: 'GroceryList',
  components: { ListItem }, 

gg-1414

<template></template>

<script>
import ListItem from '@/components/ListItem.vue'; 
import listData from '../data/groceryListData'; 

export default {
  name: 'GroceryList',
  components: { ListItem }, 
  data() {

gg-1414

document.addEventListener("DOMContentLoaded", function() {
  const placeholder = document.querySelector('.placeholder')
  const footer = document.querySelector('footer')

  let placeholderTop,
      ticking
      
  window.addEventListener('resize', onResize)

  // On DOM Content Load, set placeholder height to be equal to footer height