Emoji Pick Two

emoji-pick-two.markdown

Emoji Pick Two

A tongue-in-cheek checklist to give to your next client. 😛

Uses sass, emoji, vanilla JS (tried Vue at first, but it turned out to be less complicated to just handle everything in vanilla JS than to implement the proper watchers), and a sprinkling of variable fonts transformation.

A Pen by Josh Collinsworth on CodePen.

License.

index.html

<div id="app">
	<h1>Pick <span>two</span>:</h1>
	<form action="">
		<div class="group">
			<input type="checkbox" id="fast">
			<label for="fast">
				<span>
					Fast
				</span>
			</label>
		</div>

		<div class="group">
			<input type="checkbox" id="cheap">
			<label for="cheap">
				<span>
					Cheap
				</span>
			</label>
		</div>

		<div class="group">
			<input type="checkbox" id="good">
			<label for="good">
				<span>
					Good
				</span>
			</label>
		</div>
	</form>
</div>

script.babel

//Originally had this in Vue, but it turned out to be more work than vanilla JS, so ¯\_(ツ)_/¯

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

const howManyAreChecked = () => {
	return [...checkboxes].filter((box) => box.checked === true).length;
};

const checksAndBalances = (e) => {
	if (howManyAreChecked() === 2) {
		const uncheckedBox = document.querySelector(
			'input[type="checkbox"]:not(:checked)'
		);
		uncheckedBox.disabled = true;
	} else if (howManyAreChecked() < 2) {
		setTimeout(() => {
			checkboxes.forEach((checkbox) => checkbox.removeAttribute("disabled"));
		}, 150);
	}
};

checkboxes.forEach((checkbox) => {
	checkbox.addEventListener("change", checksAndBalances);
});

style.scss

$lightGray: #a7a8aa;
$darkGray: #53565a;
$white: #fff;
$yellow: #ffd100;
$red: #e4002b;
$lightBlue: #7ba7bc;
$darkBlue: #34657f;

$easing: cubic-bezier(0.5, 0, 0.5, 1);

@font-face {
	font-family: "Quicksand";
	font-weight: 500 700;
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/Quicksand-VariableFont_wght.ttf")
		format("truetype");
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	font-size: 1.125em;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	place-content: center;
	font-family: "Quicksand", sans-serif;
	font-display: swap;
	color: $darkGray;
	background: $lightBlue;
}

#app {
	width: 100%;
	max-width: calc(16rem + 6vmin);
	border-radius: 6px;
	margin: auto;
	border: 2px solid $darkGray;
	padding: 2.5rem;
	background: $white;
	box-shadow: 0.5em 0.5em 0 0 $darkBlue;

	h1 {
		font-size: calc(1rem + 3vmin);
		margin: 0 0 0.75em;
		padding-bottom: 0.5em;
		line-height: 1em;
		border-bottom: 2px solid $lightGray;
		font-weight: normal;

		span {
			color: $yellow;
			font-weight: bold;
		}
	}

	form {
		font-size: calc(0.8rem + 2vmin);
		width: 100%;

		.group {
			line-height: 1;
		}

		label {
			display: inline-block;
			line-height: 1.2;
			transition: all 0.2s $easing;
			border-bottom: 1px solid transparent;

			&:hover {
				cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/point.png"),
					auto;
			}
		}

		input[type="checkbox"] {
			position: absolute;
			left: -100vw;
			width: 1px;
			height: 1px;
			opacity: 0;

			&:disabled + label {
				color: $lightGray;
			}

			& + label {
				color: inherit;
				position: relative;
				padding: 0.15em 0.5em 0.15em 1.5em;
				overflow: hidden;

				&:before {
					content: "⬜";
					margin-right: 0.5em;
					display: inline-block;
					position: absolute;
					left: 0;
					animation: uncheck 0.2s $easing;
				}

				span:after {
					width: 0;
					height: 0.075em;
					border-radius: 0.075em;
					background: $red;
					position: absolute;
					content: "";
					left: 1.3em;
					top: 50%;
					transition: width 0.2s $easing;
				}
			}

			&:checked + label {
				color: $yellow;
				font-weight: bold;

				&:before {
					animation: ✅ 0.2s $easing forwards;
				}
			}

			&:disabled + label {
				color: $lightGray;
				transition-delay: 0.15s;

				span:after {
					width: calc(100% - 1.6em);
					transition-delay: 0.15s;
				}

				&:hover,
				*:hover {
					cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/rofl.png"),
						auto;
				}
			}

			&#fast:disabled + label:before {
				// content: "🐌";
				animation: 🐌 0.2s $easing both;
				animation-delay: 0.15s;
			}

			&#cheap:disabled + label:before {
				// content: "💸";
				animation: 💸 0.2s $easing both;
				animation-delay: 0.15s;
			}

			&#good:disabled + label:before {
				// content: "💩";
				animation: 💩 0.2s $easing both;
				animation-delay: 0.15s;
			}
		}
	}
}

@keyframes uncheck {
	0% {
		transform: scaleX(1) scaleY(1);
	}
	50% {
		transform: scaleX(0.5) scaleY(0);
	}
	51% {
		content: "⬜";
	}
	100% {
		transform: scaleX(1) scaleY(1);
		content: "⬜";
	}
}

$symbols: [ "✅", "🐌", "💸", "💩" ];

@each $emoji in $symbols {
	@keyframes #{$emoji} {
		0% {
			transform: scaleX(1) scaleY(1);
			content: "⬜";
		}
		50% {
			transform: scaleX(0.5) scaleY(0);
			content: "⬜";
		}
		51% {
			content: "#{$emoji}";
		}
		100% {
			transform: scaleX(1) scaleY(1);
			content: "#{$emoji}";
		}
	}
}