Jimmy Cleveland Jimmydalecleveland

## index.js
#!/usr/bin/env node

const result = "A gist on Github run with npx"
console.log(result)

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Html JS class example</title>
	</head>
	<body>
		<h1>HTML JS Class Example</h1>

## styledComponentExample.js
// First example: using a callback for every line to access theme
export const PretendContainer1 = styled.div`
  background-color: ${({ theme }) => theme.colors.primary};
  color: ${({ theme }) => theme.colors.secondary};
  padding: ${({ theme }) => theme.spacing.medium};
  margin-bottom: ${({ theme }) => theme.spacing.small};
`;

// Second example: using a single call back that returns `css` for
// a single reusable theme prop

## composeContext.js
function ProviderComposer({ contexts, children }) {
  return contexts.reduceRight(
    (kids, parent) =>
      React.cloneElement(parent, {
        children: kids,
      }),
    children
  );
}

## blog-tagged-template-5.js
function styled(css, ...variables) {
  // . . .
  const computedCss = css
    .map(
      (chunk, index) =>
        // now fires a callback at 'variables[index]'
        `${chunk}${variables[index] ? variables[index](props) : ''}`
    )
    .join('')
  return computedCss

## blog-tagged-template-4.js
function styled(css, ...variables) {
  const theme = {
    spacing: {
      min: '2px',
      max: '24px',
    },
    colors: {
      primary: 'coral',
      secondary: 'peachpuff',
    },

## blog-tagged-template-3.js
const theme = {
  spacing: {
    min: '2px',
    max: '24px',
  },
  colors: {
    primary: 'coral',
    secondary: 'peachpuff',
  },
}

## blog-tagged-template-2.js
/**
 * To use this function, pass in your damage as the first variable
 * and your bonus (modifier) as the second variable.
 *
 * optional: Start the string with what happens to you for flavor.
 * @example:
 *    doDamage`${18}${3}`
 *    doDamage`trip on a stone${7}${3}`
 * */

## blog-tagged-template-1.js
function taggedTemplate(stringArray, variable) {
  console.log(stringArray)
  // [ 'The string will be split here: ', ' Then it resumes here.' ]

  console.log(variable)
  // I am the great divider!

  return `${stringArray[0]}${variable}${stringArray[1]}`
}

## blog-styled-button-example.js
// Intro example from Styled Components docs
const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
	#!/usr/bin/env node

	const result = "A gist on Github run with npx"
	console.log(result)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Html JS class example</title>
	</head>
	<body>
	<h1>HTML JS Class Example</h1>
	// First example: using a callback for every line to access theme
	export const PretendContainer1 = styled.div`
	background-color: ${({ theme }) => theme.colors.primary};
	color: ${({ theme }) => theme.colors.secondary};
	padding: ${({ theme }) => theme.spacing.medium};
	margin-bottom: ${({ theme }) => theme.spacing.small};
	`;

	// Second example: using a single call back that returns `css` for
	// a single reusable theme prop
	function ProviderComposer({ contexts, children }) {
	return contexts.reduceRight(
	(kids, parent) =>
	React.cloneElement(parent, {
	children: kids,
	}),
	children
	);
	}
	function styled(css, ...variables) {
	// . . .
	const computedCss = css
	.map(
	(chunk, index) =>
	// now fires a callback at 'variables[index]'
	`${chunk}${variables[index] ? variables[index](props) : ''}`
	)
	.join('')
	return computedCss
	function styled(css, ...variables) {
	const theme = {
	spacing: {
	min: '2px',
	max: '24px',
	},
	colors: {
	primary: 'coral',
	secondary: 'peachpuff',
	},
	/**
	* To use this function, pass in your damage as the first variable
	* and your bonus (modifier) as the second variable.
	*
	* optional: Start the string with what happens to you for flavor.
	* @example:
	* doDamage`${18}${3}`
	* doDamage`trip on a stone${7}${3}`
	* */
	function taggedTemplate(stringArray, variable) {
	console.log(stringArray)
	// [ 'The string will be split here: ', ' Then it resumes here.' ]

	console.log(variable)
	// I am the great divider!

	return `${stringArray[0]}${variable}${stringArray[1]}`
	}
	// Intro example from Styled Components docs
	const Button = styled.button`
	background: ${props => props.primary ? "palevioletred" : "white"};
	color: ${props => props.primary ? "white" : "palevioletred"};

	font-size: 1em;
	margin: 1em;
	padding: 0.25em 1em;
	border: 2px solid palevioletred;
	border-radius: 3px;