jameswquinn’s gists

jameswquinn / index.html

Created June 17, 2019 21:48

svg: text-anchor nav

	<svg
	aria-hidden="true"
	style="position: absolute; width: 0; height: 0; overflow: hidden;"
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	>
	<defs>
	<symbol id="icon-navigation-more" viewBox="0 0 20 20">
	<path

jameswquinn / index.html

Created December 2, 2018 13:08

Material Design Ripple Effect with JavaScript

jameswquinn / router.js

Created November 11, 2018 01:04 — forked from fr0gs/router.js

	//ROUTER
	//Silly small javascript router to help me learn how they worked in a very simple way

	(function (){
	const appDiv = "app";

	// Both set of different routes and template generation functions
	let routes = {};
	let templates = {};

jameswquinn / index.html

Created October 17, 2018 18:24

intersectionObserver animateMe

	<section class="animate-me slideLeft">
	<div>slideLeft</div>
	</section>
	<section class="animate-me slideRight">
	<div>slideRight</div>
	</section>
	<section class="animate-me slideUp">
	<div>slideUp</div>
	</section>
	<section class="animate-me slideDown">

jameswquinn / horizontal-full-screen.markdown

Created September 13, 2018 22:09

Horizontal Full-Screen

jameswquinn / index.html

Created August 26, 2018 14:00

Material Design Login / Sign Up Form. Emoji password strength meter using zxcvbn on sign up.

	<div class="container">
	<div class="row">
	<div class="col s12 m6 offset-m3">
	<div class="card hoverable">
	<div class="card-content grey-text text-lighten-1">
	<div class="row card-title">
	<div class="col s6 left-align login-link"><span>Log in</span></div>
	<div class="col s6 right-align signup-link active"><span>Sign up</span></div>
	</div>
	<div class="row">

jameswquinn / fiddle.html

Created March 18, 2018 14:23 — forked from anonymous/fiddle.html

(source: https://jsfiddle.net/nyh18bLq/)

	<script src=//unpkg.com/vue></script>
	<script src=//unpkg.com/vuetrend></script>

	<div id="app">
	<trend
	:data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
	:gradient="['#6fa8dc', '#42b983', '#2c3e50']"
	auto-draw
	smooth>
	</trend>

jameswquinn / fiddle.html

Created March 15, 2018 19:37 — forked from anonymous/fiddle.html

VuexFire Todo App Demo (source: https://jsfiddle.net/973dLvsy/)

	<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
	<script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/vuex"></script>
	<script src="https://unpkg.com/vuexfire"></script>

	<div id="app">
	<input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
	<ul>
	<li v-for="todo in todos">
	<input :value="todo.text" @input="updateTodoText(todo, $event.target.value)">

jameswquinn / fiddle.babel + jsx

Created March 12, 2018 19:45 — forked from anonymous/fiddle.babel + jsx

Vue Carousel - Navigation example (source: https://jsfiddle.net/toddlawton/46wegz8a/?utm_source=website&utm_medium=embed&utm_campaign=46wegz8a)

	const buildSlideMarkup = (count) => {
	let slideMarkup = '';
	for (var i = 1; i <= count; i++) {
	slideMarkup += '<slide><span class="label">' + i + '</span></slide>'
	}
	return slideMarkup;
	};

	new Vue({
	el: '#example',

jameswquinn / fiddle.css

Created March 12, 2018 17:29 — forked from anonymous/fiddle.css