Skip to content

Instantly share code, notes, and snippets.

@alvinpascoe
alvinpascoe / index.js
Last active March 25, 2023 19:14
React 'Intro To React' Tutorial - Extension: When someone wins, highlight the three squares that caused the win.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
const winningSquareStyle = {
backgroundColor: '#ccc'
};
return (
@alvinpascoe
alvinpascoe / index.js
Last active June 27, 2023 11:25
React 'Intro To React' Tutorial - Extension: Add a toggle button that lets you sort the moves in either ascending or descending order.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
@alvinpascoe
alvinpascoe / index.js
Last active February 27, 2023 15:39
React 'Intro To React' Tutorial - Extension: Rewrite Board to use two loops to make the squares instead of hardcoding them.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
@alvinpascoe
alvinpascoe / index.js
Last active August 4, 2017 09:51
React 'Intro To React' Tutorial - Extension: Bold the currently-selected item in the move list.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
@alvinpascoe
alvinpascoe / index.js
Created July 21, 2017 08:58
React 'Intro To React' Tutorial - Extension: Display the move locations in the format "(1, 3)" instead of "6".
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
@alvinpascoe
alvinpascoe / index.js
Created July 21, 2017 08:57
React 'Intro To React' Tutorial - Original Example
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props){
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
@alvinpascoe
alvinpascoe / jquery.plugin.js
Last active July 4, 2017 11:46
jQuery Plugin Boilerplate
// Based on https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/Extending-jQuery-Boilerplate
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;( function( $, window, document, undefined ) {
"use strict";
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
@alvinpascoe
alvinpascoe / previous_next_node.module
Created June 26, 2017 19:52
Previous Next Node Module - after **part four** of the five part series: Drupal 7 Dynamic Content Carousel
<?php
/**
* Prev Next Module utility function
*/
function previous_next_node_pn_node($node, $mode = 'n') {
// If the Previous/Next API's helper function does
// not exist, exit function.
if (!function_exists('prev_next_nid')) {
return NULL;
@alvinpascoe
alvinpascoe / <THEME>.behaviors.js
Created June 23, 2017 11:35
Ajax Content Loader Module - after **part five** of the five part series: Drupal 7 Dynamic Content Carousel
(function ($) {
// Carousel initialisation
Drupal.behaviors.carousel = {
attach: function (context, settings){
// Selectors
var carousel = '.main-carousel';
var previousLink = '.js-carousel-pager .prev a';
var nextLink = '.js-carousel-pager .next a';
@alvinpascoe
alvinpascoe / ajax_content_loader.css
Last active June 26, 2017 19:11
AJAX Content Loader Module - after **part three** of the five part series: Drupal 7 Dynamic Content Carousel
.js-ajax-loader a.use-ajax{
/* Hide AJAX links by default, let JavaScript show them if enabled. */
display:none;
}