Technical Screen - Front-end Developer

gistfile1.txt

/**************\
 * Algorithms *
\**************/

// Given an array of objects summarizing the number of fish in an aquarium,
// find the percent of fish where the species is unknown (the `species` is
// `undefined`). Return the percentage as a whole number between `0` and `100`.

// Example input:
const fish = [
  { species: 'Swordtail', count: 2 },
  { species: 'Pearl Gourami', count: 1 },
  { species: 'Rummynose Tetra', count: 12 },
  { species: 'Neon Tetra', count: 30 },
  { species: 'Guppy', count: 8 },
  { species: 'Kribensis', count: 1 },
  { species: 'Angelfish', count: 1 },
  { species: undefined, count: 5 },
];

// Example output:
// 8;

// Solution:
const percentUnknown = fish => 'SOLUTION HERE';



/*****************\
 * Algorithms II *
\*****************/

// There exists a function that, given an array of categories and an array of
// entries, creates an array of objects with a category name and an entry count.

// Example input (categories):
const categories = [
  { name: 'Cats', id: 10 },
  { name: 'Dogs', id: 20 },
  // ...
];

// Example input (entries):
const entries = [
  { categoryId: 10, name: 'Fluffy' },
  { categoryId: 10, name: 'Mittens' },
  // ...
];

// Example output:
// [{ name: 'Cats', count: 42 }, { name: 'Dogs', count: 55 }, /* ... */];

// The following example implementation has a performance problem noticeable
// when you have hundreds of categories and tens of thousands of entries.

const categoriesByEntryCount = (categories, entries) =>
  categories.map(category => ({
    name: category.name,
    count: entries.filter(entry => entry.categoryId === category.id).length,
  }));

// What is the time complexity (in Big O notation or similarly described) of `categoriesByEntryCount`?
const timeComplexity = 'ANSWER HERE';

// What is the optimum time complexity to do this task with a better algorithm?
const optimumTimeComplexity = 'ANSWER HERE';

// Please re-implement the algorithm to optimize its time complexity.

const countCategoriesOptimized = (categories, entries) => 'SOLUTION HERE';



/***********************\
 * Regular Expressions *
\***********************/

// Given an array of 1,000 strings that may or may not contain phone numbers,
// return the index of each string that appears to contain a U.S. phone number.
// U.S. phone numbers are guaranteed to be formatted either as `(877) 843-2900`
// or `877-843-2900`.

// Example input:
const strings = [
  'Call today! Reach us at 314-867-5309 any day of the week.',
  'Over 3,148,675,309 people trust ACME for all their road runner needs!',
  '(877) 843-2900',
  // ...
];

// Example output:
// [0, 2, /* ... */];

// Solution:
const phoneNumberIndices = strings => 'SOLUTION HERE';



/*******\
 * DOM *
\*******/

// Given an HTML element in the DOM, return the nearest visible
// background color beneath the element's text.

// Example input:
document.getElementById('example');

/* Example HTML:
<div>
  <div style="background: rgba(200, 100, 50, 0.95);">
    <div style="background: transparent;">
      <div style="background: none;">
        <div style="background: rgba(0, 0, 0, 0);">
          <div>
            <div id="example">Text</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/

// Example output:
// 'rgba(200, 100, 50, 0.95)';

// Solution:
const visibleBackgroundColor = element => 'SOLUTION HERE';


/*********************\
 * JavaScript Trends *
\*********************/

// Please refactor this promise-based function that uses
// a chain of `then`s into `async`/`await`.  Assume the `store` object
// passed in has an asynchronous method named `.findAll(<tablename>)` that returns all rows for
// a particular 'table' over XHR; and an asynchronous method named `.query(<tablename>, <criteria>)` that will
// return all rows matching a set of criteria described by an object for a given table over XHR.

const model = store =>
  store
    .findAll('categories')
    .then(
      categories =>
        store.query('entries', {
          categoryId: categories.find(c => c.isCurrent).id,
        }),
      err => {
        if (err.statusCode === '401') {
          return store.findAll('entries');
        }
        throw err;
      }
    )
    .then(
      entries =>
        entries.length
          ? Promise.all([
              entries,
              store.findAll('users'),
              store.findAll('votes'),
            ])
          : [entries, [], []]
    )
    .then(([entries, users, votes]) => ({ entries, users, votes }));



/*************\
 * Debugging *
\*************/

// Please visit this URL:
// https://s.codepen.io/datchley/debug/GYeYbd

// Using the development tools in your favorite browser, please do the
// following tasks. Please also provide a screenshot of how you used the
// development tools for each of the tasks.

// What function is locking the thread for so long?
const nameOfFunctionLockingThread = 'ANSWER HERE';

// Please set a breakpoint on line 1706.
// What is the value of the variable `washingtonAve` at that breakpoint?
const washingtonAve = 'ANSWER HERE';

// Please set a breakpoint on line 2061.
// What is the value of the variable `theLoop` when the variable `cwe` has a
// value of `'central west end'`?
const theLoop = 'ANSWER HERE';

// What is the value of the `X-Best-Restaurant` header on the `POST` to `/opinions`?
const xBestRestaurant = 'ANSWER HERE';



/*******\
 * CSS *
\*******/

// Please define the following to the best of your knowledge. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.

// The CSS Box Model
const cssBoxModel = `
  ANSWER HERE
`;

// CSS Grid
const cssGrid = `
  ANSWER HERE
`;

// Flexbox
const flexbox = `
  ANSWER HERE
`;

// CSS Specificity
const cssSpecificity = `
  ANSWER HERE
`;

// Media Queries
const mediaQueries = `
  ANSWER HERE
`;

// Transitions, Keyframes (and the difference between the two)
const transitionsAndKeyframes = `
  ANSWER HERE
`;

// Please answer the following questions to the best of your knowledge. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.

// What is a clearfix and when do you need one?
const clearfix = `
  ANSWER HERE
`;

// What thought process do you use to decide whether to use floats, flexbox,
// or grid to lay out a page?
const floatsFlexboxOrGrid = `
  ANSWER HERE
`;

// Go to the following url, https://codepen.io/datchley/pen/NOJERV?editors=0110
// Follow the instructions and recreate the layout and elements in the example
// image.  You can fork this codepen (click on the 'Fork' button at the top) to 
// create your answer and post a link to your answer below
const recreationUrl = "LINK TO YOUR ANSWER HERE";

/*******************************\
 * Object-Oriented Programming *
\*******************************/

// Please define the following to the best of your ability. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// This should all be based on the latest version of Javascript/EcmaScript.

// Class, Prototype and Object (and the difference between them)
const classPrototypeAndObject = `
  ANSWER HERE
`;

// Instantiation: what are the ways we can create object instances
const instantiation = `
  ANSWER HERE
`;

// Class Methods, Static Methods (and the difference between the two)
const classAndStaticMethods = `
  ANSWER HERE
`;

// Constructors
const constructors = `
  ANSWER HERE
`;

// Superclass
const superclass = `
  ANSWER HERE
`;

// Inheritance
const inheritance = `
  ANSWER HERE
`;



/**************************\
 * Functional Programming *
\**************************/

// Please define the following to the best of your ability. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// This should all be based on the latest version of Javascript/EcmaScript.

// Pure function, Impure function (and the difference between the two)
const pureAndImpureFunction = `
  ANSWER HERE
`;

// Callback function
const callbackFunction = `
  ANSWER HERE
`;

// Immutability
const immutability = `
  ANSWER HERE
`;

// Function Expressions, Function Declarations (and the difference between the two)
const functionExpressionsAndDeclarations = `
  ANSWER HERE
`;

// Immediately-Invoked Function Expressions (IIFEs) and when/why to use them
const iife = `
  ANSWER HERE
`;


/***************\
 * Code Review *
\***************/

// When reviewing the following code, what changes might you suggest?
// Please leave JavaScript comments in this file with the suggestions you'd
// make to the developer who wrote this code.  The code below shows multiple
// files using Javascript modules (import/export).

  
// File: utils/stats.js //
export const voteStats = (votes, existingStats) => {
  if (!Array.isArray(votes)) {
    throw new Error('You must pass an array of votes to voteStats');
  }

  const ret = [];
  for (const v of votes) {
    const hash = {};
    hash.count = v.count;
    hash.userId = v.user.id;
    ret.push(hash);
  }
  for (const stat of existingStats) {
    ret.push(stat);
  }
  return ret;
};


// File: utils/stats-test.js //
import { voteStats } from './stats';

describe('voteStats', () => {
  it('should calculate new stats after being fed existing stats and stats about votes', () => {
    expect(
      voteStats(
        [
          { count: 22, user: { id: 121 } },
          { count: 61, user: { id: 122 } },
          { count: 93, user: { id: 123 } },
        ],
        [
          { count: 11, userId: 118 },
          { count: 42, userId: 119 },
          { count: 78, userId: 120 },
        ]
      )
    ).toEqual([
      { count: 11, userId: 118 },
      { count: 42, userId: 119 },
      { count: 78, userId: 120 },
      { count: 22, userId: 121 },
      { count: 61, userId: 122 },
      { count: 78, userId: 123 },
    ]);
  });
});


// File: user-actions.js //
import { voteStats } from './utils/stats';

export default class {
  constructor(votes = [], stats = []) {
    this.stats = voteStats(votes, stats);
  }

  render() {
    return `<ul>
      ${this.stats.map(
        stat => `<li>User ID ${stat.userId} took ${stat.count} actions</li>`
      )}
    </ul>`;
  }
}