richleach’s gists

richleach / ternaryIfElse.js

Last active April 16, 2020 02:24

REACT: Basic use of ternary conditional operators in React. This code is from the same component, but commented based on if the code is in the function() above the returned JSX, or actually within the JSX.

	//this is basic ternary JS inside a function block but outside of the return(...jsx code...) block
	//if regularMarketChange is LT 0 then set red, else green
	{response.data.price.regularMarketChange.fmt < 0 ? setQuoteColor('red') : setQuoteColor('green') };

	//this is ternary JS inside JSX
	//Notice the implementation of the quoteColor variable (set above) in the Nav tag below
	//If the value in the marketChange variable is GT 0 then display +, else display - (notice the quotes!)
	<Nav
	className="nav-tabs-neutral"
	role="tablist"

richleach / doubleAmpersandIf.js

Last active April 16, 2020 03:01

REACT: Double ampersand if statement used in JSX output

	//Read 'if the value in institutions is true, then execute the following .map() code'. I think it's an ES6 thing....
	{ institutions &&
	institutions.map((institutions) => (
	<tr key={institutions.organization}>
	<td width="15%">
	{institutions.pctHeld.fmt}
	</td>
	<td width="60%">
	{institutions.organization}
	</td>

richleach / externalBlockOfCssInSameFile.js

Last active April 16, 2020 03:07

REACT: A couple things going on here - a block of CSS code (UserStyle) defining the styles to be used in the above div. Loop over users object using .map() to declare the UserItem components and pass key and user values as props. Also, if loading flag is set to true, show the Spinner animation, else display the users. Seems like I'm always forge…

	import React from 'react';
	import Spinner from '../../layout/Spinner';
	import UserItem from './components/UserItem';

	const Users = ({users, loading}) => {
	if(loading) return <Spinner/>
	} else {
	return(
	<div style={UserStyle}>
	{users.map(user) => (

richleach / conditionalDisplayInMapFunction.js

Created April 16, 2020 04:13

REACT: I needed an easy way to look at values in the map() loop and display a different string for each given value, creating a mapping on the fly. I replaced the values on the left with the values on the right (displayActionMap). Notice the bracket notation to display the rendered value(s).

	<Table hover>
	<tbody>
	{grades &&
	grades.map((grades) => {

	const displayActionMap = {
	init: 'initiated',
	down: 'downgrade',
	reit: 'reiterates',
	up: 'upgrade',

richleach / css_animations.html

Created May 7, 2020 20:38

CSS: Animations introduced with basic syntax and functional CSS. Some commented code for you to use in your next CSS animation.

	<html>
	<head>
	<meta charset="UTF-8">
	<title>SANDBOX</title>

	<style type="text/css">
	.heading {
	color: darkblue;
	font-size: 15px;
	/*transition-property: font-size;

richleach / css_variables.css

Created May 7, 2020 21:40

CSS: Finally the standard CSS implementation is starting to catch up with LESS/SCSS and gives us variables to use in CSS code

	// define all CSS variables in the root block
	:root {
	--main-color: blue;
	}

	.hover-text {
	transition: all 0.5s;
	}

	//apply CSS variables using var() method and the variable name

richleach / css_cubic-bezier.css

Created May 7, 2020 21:52

CSS: Use of the cubic-bezier timing function to create custom timing of animations (instead of ease, ease-in, etc)

	:root {
	--main-color: blue;
	}

	.hover-text {
	transition: all 3s;
	}

	.hover-text:hover {
	color: var(--main-color);

richleach / useful-css-snippet-grid-layout-image-span.html

Last active May 12, 2020 22:15

I got this code from Brad's youtube video (https://www.youtube.com/watch?v=-qOe8lBAChE) about laying down a full-sized background image behind a CSS grid.

	<!-- I got this code from Brad's youtube video (https://www.youtube.com/watch?v=-qOe8lBAChE) about laying down a full-sized
	background image behind a CSS grid. It uses a CSS grid (obviously) but also some CSS wizardry including:
	· Background images (think "windows in the grid exposing the background image behind")
	· CSS animations (transitions)
	· A few handy CSS selectors that I normally learn about once a year then promptly forget (not kidding)
	· Grid spacing and layout -->

	<!doctype html>
	<head>
	<meta charset="UTF-8">

richleach / flexBoxLayout.html

Last active July 9, 2020 19:45

flexbox HTML and CSS starter template code

	<!-- copy and paste entire file and open in browser.
	Simple layout using flexbox to build columns, I always seem to forget how to do this....
	-->
	<html>
	<head>
	<title>HTML & CSS</title>

	<style>
	body {
	margin: 0;

richleach / javascript.js

Last active August 9, 2020 19:41

fetch a json file, loop through each value in the json file (forEach()) and print it out to a div on screen

	//FETCH, JSON, FOREACH & DIV.INNERHTML EXAMPLE
	//fetch a json file, loop through each value in the json file and print it out to a div on screen

	//this is the contents of the people.json file that would need to be located in the same directory to work on your machine
	[
	{"name": "John",
	"age": 20},
	{"name": "Mary",
	"age": 24},
	{"name": "Bob",

Rich Leach richleach