rich-at-thinkful

const BASE_SEARCH_URL = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC';

const appState = {
  results: [],
  history: []
};

function clearSearchField(){
  $('#search-field').val('');
}

rich-at-thinkful

Object-Oriented Programming

Object-oriented programming (OOP) refers to a type of computer programming (software design) in which programmers define not only the data type of a data structure, but also the types of operations (functions) that can be applied to the data structure. - Webopedia

OOP is a massive topic that includes many concepts to learn and master. The language of JavaScript does not inherently contain some well-established OOP features, but its flexibility allows the use of many programming patterns, including functional programming and OOP.

Let's start with the basic definition above. By now, you've had a lot of practice creating objects, mainly to hold onto some data. Regardless of the programming language, one core tenet of OOP is you have an object with data, but also functions attached to that object that read and manipulate the data.

Let's take a small version of our store object we've been using for the Quiz

rich-at-thinkful

IMPORTANT: Do NOT complete drills inside the Repl.IT or JSBin examples. All drills should be completed per the Working on Drills requirements https://gist.github.com/rich-at-thinkful/a36c50bc86afc31fed4113c8f1ece110 in your local environment

String, number, and logic drills

Jedi name

Write a function called jediName which takes two arguments:

• firstName - a person's first name
• lastName - a person's last name

rich-at-thinkful

'use strict';

const STORE = {
  items: [
    { name: 'apples', checked: false, createdAt: new Date(Date.now() - 100000) },
    { name: 'oranges', checked: false, createdAt: new Date(Date.now() - 200000) },
    { name: 'milk', checked: true, createdAt: new Date(Date.now() - 400000) },
    { name: 'bread', checked: false, createdAt: new Date(Date.now() - 300000) }
  ],
  sortBy: 'alpha'

rich-at-thinkful

import { Link } from "react-router-dom";

export default function Breadcrumbs({ crumbs }) {
  return (
    <nav>
      <ol className="breadcrumb">
        {crumbs.map((crumb, index) =>
          <li key={index} className={`breadcrumb-item ${!crumb.linkUrl && "active"}`}>
            { crumb.linkUrl ?
              <Link to={crumb.linkUrl}>{crumb.label}</Link> :