jameswquinn

<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

<div class="main">
    <section><div>1</div></section>
    <section><div>2</div></section>
    <section><div>3</div></section>
    <section><div>4</div></section>
  </div>
<div id="con"></div>

jameswquinn

Add Tags - React Hooks

A Pen by james quinn on CodePen.

License.

jameswquinn

<div id="root"></div>

jameswquinn

import React, { useState, useEffect } from "react";


export default function QuoteBox() {
	const API_URL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
	const [quote, setQuote] = useState({});
	const [isLoading, setLoading] = useState(false);
	async function queryAPI() {
		setLoading(true);
		const response = await fetch(API_URL);

jameswquinn

// IntersectionObserver polyfill
import 'intersection-observer'
// *****************************

import React, { Component } from 'react'

export default class ImageLazyLoader extends Component {

    state = {
        isLoaded: false,

jameswquinn

<div id="root"></div>

jameswquinn

<div id="root"></div>

jameswquinn

Accordion

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

A Pen by james quinn on CodePen.

License.

jameswquinn

var mediaJSON = { "categories" : [ { "name" : "Movies",
        "videos" : [ 
		    { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
              "subtitle" : "By Blender Foundation",
              "thumb" : "images/BigBuckBunny.jpg",
              "title" : "Big Buck Bunny"
            },
            { "description" : "The first Blender Open Movie from 2006",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],