EJ Mason mxmason

A Better Form™

Don't mind this. I made it because I was mad about a specific thing that I saw on the Internet.

Data Structure and Algorithms: Full Stack Project

You've been asked to create a site for an animal shelter which allows adoption of cats and dogs. These are the only two animals allowed in the shelter. The adoption process works strictly on a first-in, first-out basis. People can adopt a cat, or a dog, or both, but they may only adopt the oldest one (by arrival time, not age) that is in the shelter.

The following instructions should guide you to through the project from start to finish. Be sure to follow them in the order!

If you’re the sort of person who likes a working example, you can see the working client and the working server for yourself.

Setting up

This app will use two distinct repositories: one for the client, and one for the server.

Create the parent directory for your app on your local machine: mkdir AnimalShelter

	// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system

	// 1. Place this snippet before the end of the <body> tag;
	// NOT in the <head> tag!
	// 2.Make sure it's inside $(function() {})!

	$(function() {
	const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
	if (mediaQuery.matches) $(document).off('click.wf-scroll');
	})

	// Using the web crypto API is a quick way to get a pseudo-random number.
	// It's is experimental in IE11 and namespaced behind a prefix.
	var crypto = window.crypto \|\| window.msCrypto;

	// Generates a uuidv4-compliant string
	// credit: https://gist.github.com/jed/982883
	function uuidv4() {
	return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
	(
	c ^

	const FOCUSABLE_ELEMENTS = `
	[contenteditable]:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"]),
	[tabindex]:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"])
	a[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"]),
	area[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"]),
	audio:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"]),
	button:not([disabled]):not([inert]):not([aria-hidden="true"]),
	iframe:not([tabindex^="-"]):not([inert]):not([aria-hidden="true"]),
	input:not([disabled]):not([inert]):not([aria-hidden="true"]),
	select:not([disabled]):not([inert]):not([aria-hidden="true"]),

	<!-- External dependencies the component needs to run (optional) -->
	<script src="https://unpkg.com/PATH_TO_FILE.js"></script>

	<!-- Polyfill loaders - Will not execute for modern browsers -->
	<!-- WebComponents -->
	<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-loader.js"></script>

	<!-- JS features -->
	<script src="https://polyfill.io/v3/polyfill.js?features=default"></script>

	/**
	* A small lib for fetching with query parameters.
	* CREDIT: discussion in this issue thread: https://github.com/github/fetch/issues/256
	* @param {String} url
	* @param {Object} [opts={}] The init options for the fetch request
	* @param {Object} [opts.params] The key-value pairs that will be used to build a query string
	* @example
	* // Makes a GET request to `foo.com`
	* soFetch('https://foo.com');
	* // Makes a GET request to foo.com with query params