Gina Lee gg-1414

gg-1414 / fadein-topfold

Created January 19, 2020 02:48

	window.addEventListener('DOMContentLoaded', function() {
	window.addEventListener('scroll', handleScroll)
	})

	function handleScroll() {
	// Grab header
	const header = document.querySelector('header')

	// Grab mid-fold section (two siblings down from header)
	const midFold = header.nextElementSibling.nextElementSibling

gg-1414 / parallax-short-fixed-footer-html

Created April 12, 2020 21:35

gg-1414 / parallax-short-fixed-footer-css

Created April 12, 2020 21:44

	/* CSS */

	header, main, .placeholder {
	position: relative; /* crucial for z-index to work */
	}

	header, main {
	z-index: 10;
	}

gg-1414 / parallax-changing-height-footer-html

Created April 12, 2020 21:51

gg-1414 / parallax-changing-height-footer-js

Created April 12, 2020 21:54

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

	// On DOMContentLoaded, set placeholder height to be equal to footer height
	updateHeight()

	window.addEventListener('resize', onResize)

gg-1414 / parallax-tall-footer-js

Created April 13, 2020 00:12

	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

gg-1414 / GroceryList.vue

Last active July 22, 2020 01:00

normal vue component

	<template></template>

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

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

gg-1414 / GroceryList.vue

Last active July 22, 2020 00:59

vue component with typescript (basic usage)

	<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 / GroceryList.vue

Last active July 22, 2020 00:59

vue component with typescript (class-style)

	<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 / close-btn-without-custom-element.html

Last active August 7, 2020 22:58

	<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 -->