paigen11

const c = 10;
const d = 5;
console.log('It used to be harder to calculate that ' + (c + d) 
+ '\n is not the same as ' + (2 * c) + ' in a string.');

/* prints: It used to be harder to calculate that 15
is not the same as 20 in a string. */

paigen11

const c = 10;
const d = 5;
console.log(`With the syntactic sugar of ES6 template literals, 
doing math in strings like this: ${c + d} 
and that: ${2 * c} is a cinch.`);

/* prints: With the syntactic sugar of ES6 template literals, 
doing math in strings like this: 15
and that: 20 is a cinch. */

paigen11

var classes = 'header';

function isDesktopSize(){
  window.innerWidth > 1400 ? true : false;
};

var navbar = {
  isOpen: false
};

paigen11

function isDesktopSize(){
  window.innerWidth > 1400 ? true : false;
}

var navbar = {
  isOpen: true
};

classes = `header ${ isDesktopSize() ? '' :
 `icon-${navbar.isOpen ? 'collapse' : 'expand'}` }`;

paigen11

var guy = 'Paul';
var age = 96;

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';

paigen11

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`I'd like this line 1 \n to ignore the newline and be in line with 1 
\n even though I should be on line 3 at this point`;

/* prints: I'd like this line 1 \n to ignore the newline and be in line with 1
\n even though I should be on line 3 at this point */

paigen11

var str = String.raw`What's up \n${4+7}?`;
console.log(str);
// prints: What's up \n11?

console.log(str.length);
// prints: 15

console.log(str.split('').join(','));
// prints: W,h,a,t,',s, ,u,p, ,\,n,1,1,?

paigen11

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { BreakpointProvider } from 'react-socks';
import NowPlaying from './containers/NowPlaying/NowPlaying';
import Dashboard from './containers/Dashboard/Dashboard';
import Upcoming from './containers/Upcoming/Upcoming';
import MovieSearch from './containers/MovieSearch/MovieSearch';
import Genres from './containers/Genres/Genres';
import Header from './containers/Header/Header';
import './App.css';

paigen11

    return (
      <div className="genres-page">
        <h1>Choose a Genre</h1>
        {(error || loading) && <h3 className="genre-info">{info}</h3>}
        <Breakpoint large up>
          <div className="genre-list">
            {this.renderRedirect()}
            {genreInfo}
          </div>
        </Breakpoint>

paigen11

  .genre-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    grid-gap: 15px;
    justify-items: center;
    margin: auto;
    h3 {
      margin: 200px auto;
    }