junkyard ui

by Nicholas Berlette

HTML

<script src="https://npmcdn.com/tags-input"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
<h1>junkyard<em>.js</em></h1>
<div class="container">
  <fieldset>
      <input type="text" placeholder="preferred yard location" id="location" class="input" />
  </fieldset>
  
  <fieldset>
      <input type="tags" placeholder="tag at least one brand of vehicle" id="makes" class="tags-input" />
  </fieldset>
  
  <fieldset>
      <input type="tags" placeholder="tag some filters (335i, red, etc.)" id="filters" class="tags-input"  />
  </fieldset>
  
  <fieldset>
      <button class="btn btn-default bg-grey" id="btn-save" name="btn-save">Save Preferences</button>
  </fieldset>
</div>
<div class="container">
  <p id="output"></p>
</div>

SCSS

/* dimensions, margins, widths, etc. */
$gap: 1em;

$body-min-width: 320px;
$body-width: 320px;
$wave-width: 180px;
$label-width: 3.5em;

/* margin and padding */
$h1-margin-bottom: 0.3em;

$body-padding: 30px 50px;
$fieldset-padding: 10px;


/* colors */
$body-background-color: #eee;
$h1-background-color: #787878;

/* fonts and text styles */
$body-font: 16px/1.21 'Helvetica Neue', Helvetica, Arial, sans-serif;
$h1-font: 4em/1.15 'Rockwell', 'Operator Mono', sans-serif;
$h1-font-weight: 600;
$h1-letter-spacing: -0.05em;
$h1-text-align: center;
$h1-em-font-size: 0.75em;
$h1-em-font-weight: 300;
$h1-color: transparent !important;

/* shadows */
$h1-text-shadow: 0 0.15em 0.11em rgba(0,0,0,0.15), 0 0.15em 0.021em rgba(0,0,0,0.1), 0 0.32em 0.32em rgba(0,0,0,0.1) !important;


/* * * * * * * * * * * * * * * * */

/* stylesheet */
:root {
  --gap: 1em;
  --color-primary: #aaa;
  --color-wave: #e50b4f;
  --color-wave-shadow: #333;
  --width-wave: 220px;
}

body {
  background-color: $body-background-color;
  padding: $body-padding;
  font: $body-font;
  min-width: $body-min-width;
}

h1 {
  background-color: $h1-background-color;
  color: $h1-color;
  text-shadow: $h1-text-shadow;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-background-clip: text !important;
  font: $h1-font;
  font-weight: $h1-font-weight;
  letter-spacing: $h1-letter-spacing;
  text-align: $h1-text-align;
  margin-bottom: $h1-margin-bottom;
  
  
  & > em {
    font-size: $h1-em-font-size;
    font-weight: $h1-em-font-weight;
  }
}

fieldset {
  padding: $fieldset-padding;
  border: none;
  caret-color: transparent !important;


  label {
    display: inline-block;
    width: $label-width;
    text-align: right;
    padding: 0 5px;
  }
}

div, p {
  caret-color: transparent !important;
}

div.container {
  width: calc(100% - 4em);
  margin: 2em 0;
  padding: 1em 2.5em;
  border-top: 1px solid #ccc;

  #output {
    margin: 0;
    padding: 0;
   ...

Babel + JSX

// quick n' dirty querySelector aliases
function $ (s, context = document) {
	if (s instanceof Document || s instanceof Element) return s;
  return context.querySelector(s);
}

function $$ (s, context = document) {
	return [].slice.call(context.querySelectorAll(s))
}

// data persistence, localStorage for browser dev
function write (v, k = 'filters') {
	return localStorage.setItem(k, v);
}
function read (k = 'filters', spaced = false) {
	let v =  localStorage.getItem(k)
  if (spaced) v = v.replaceAll(',', ', ')
	return v;
}

// element selectors
const $location = $('#location');
const $output   = $('#output');
const $filters  = $('#filters');
const $makes 	  = $('#makes');

// EventListeners and EventHandlers
function inputHandler (e) {
	write(this.value, this.id);
}

function loadData (e) {
  $('#location').value = read('location');
  $('#filters').value  = read('filters');
  $('#makes').value 	 = read('makes');
  
/*   $('#output').innerHTML = 'Location: ' + read('location') + '<br />'
                         + 'Makes:    ' + read('makes') 	 + '<br />'
                         + 'Filters:  ' + read('filters') */
}

document.onready = loadData();

$('#location').addEventListener('input', inputHandler);
$('#location').addEventListener('change', inputHandler);
$('#filters').addEventListener('input', inputHandler);
$('#filters').addEventListener('input', inputHandler);
$('#makes').addEventListener('input', inputHandler);
$('#makes').addEventListener('change', inputHandler);

$('#btn-save').addEventListener('click', function (e) {
	alert(`Searching   "${read('location', true)}"\n\nFor brands  "${read('makes', true)}"\n\nFiltered by  "${read('filters', true)}"`)
});

// hook up them tags
$$('input[type="tags"]').forEach(tagsInput);