ricealexander

// CSS Color Names
// Compiled by @bobspace

// Updates by @ricealexander
// added Rebecca Purple
// associates color names with their hex values
// random color and locating a color in the array by its name

const colorValues = [
  {hex: "#F0F8FF", name: "AliceBlue"},

ricealexander

const query = (selector, source = document) => {
  if (isElement(selector)) return selector

  if (typeof selector !== 'string') {
    throw new TypeError(`First argument must be a string. Instead got ${typeof selector}`)
  }
  if (!isElement(source)) {
    throw new TypeError(`Second argument must be a Node/NodeList. Instead got ${source}`)
  }

ricealexander

// Inspired by @kokokonotsu
///  https://github.com/kokokonotsu/Cells-and-Grids

const
  gridContainer = 'body',  // selector for our HTML grid
  columnCount = 26,        // number of columns
  rowCount = 20;           // number of rows


// Generate the grid

ricealexander

/** STICKY-FOOTER CSS
  *  these styles configure a "sticky" footer
  *
  *  "sticky" footers stick to the bottom of the window
  *  when there isn't much page content,
  *  but stick to the bottom of the page
  *  when the content is bigger than the window.
  *
  *  traditional "sticky" footers use padding or calc()
  *  which require knowledge of the heights of the

ricealexander

const detectAdblock = ()=> {
  const adSample = '<div class="adBanner">&nbsp;</div>';
  document.body.insertAdjacentHTML('beforeend', adSample);

  const bannerHeight = document.querySelector('.adBanner').offsetHeight;
  document.querySelector('.adBanner').remove();
  return (bannerHeight === 0) ? true : false;
}

console.log(detectAdblock());

ricealexander

// Build Custom Stylesheets
///  this is a really basic function for adding custom stylesheets

///  it works by inserting a style tag into the head
///  and then populating styles into it.
///  this demo was built with IE support in mind.

function Stylesheet(id) {
  this.sheet = id;
  document.head.insertAdjacentHTML("beforeend", '<style id="'+ this.sheet +'"></style>');

ricealexander

:root {
  --system-sans-serif:
    system-ui,            /* detect system font automatically */
    -apple-system,        /* Safari (Mac OS X and iOS) and Older Mac OS X */
    BlinkMacSystemFont,   /* Chrome<56 (Mac OS X) */
    "Segoe UI",           /* Windows and Windows Phone */
    "Roboto",             /* Android and Chrome OS */
    "Oxygen",             /* KDE    - Linux environment */
    "Ubuntu",             /* Ubuntu - Linux distribution */
    "Cantarell",          /* GNOME  - Linux environment */

ricealexander

<style>
/*
forward-slash:
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 55 88">
  <path d="M5 88a5 5 0 0 1-2 0 5 5 0 0 1-2-7L46 3a5 5 0 0 1 9 5L9 86a5 5 0 0 1-4 2z"/>
</svg>

angle-bracket:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.1 55.26">
  <path d="M34.14 27.63l-31.6 18.3a5 5 0 0 0 2.49 9.33 5.11 5.11 0 0 0 2.51-.63l39-22.61a6.45 6.45 0 0 0 1.86-2 5 5 0 0 0-1.86-6.79L7.54.63a5.013 5.013 0 1 0-5 8.69l31.44 18.21z"/>

ricealexander

.countdown-container {
  font-size: 1rem;
  text-align: center;
}
.countdown-group {
  display: inline-block;
  margin: 0 1em;
}
.countdown-tile {
  border-bottom: 2px solid;

ricealexander

const arr1 = ["a","b","c"];
const arr2 = ["d","e","f"];
const arr3 = ["g","h","i"];


// Array.prototype.concat()
const arrayConcat = arr1.concat(arr2).concat(arr3);

// Array.prototype.push() + spread operator
const arrayPush = [];