Vue

by cathead

HTML

<div id="app">
  <h1 v-text="name"></h1>
  <p v-text="description"></p>
  <button @click="generate">Another, sir.</button>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Cardo:400i|Italianno');

html, body {
  background:
    radial-gradient(#cdf 3px, transparent 4px),
    radial-gradient(#cdf 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #abf 75px, #abf 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #abf 76px, #abf 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  height: 100%;
  font-family: 'Cardo';
  color: #445;
  font-style: italic;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-style: italic;
  font-size: 24px;
}

h1 {
  font-size: 5rem;
  font-family: 'Great Vibexs', Italianno;
  color: #334;
}

button {
  margin-top: 5rem;
  border: 0;
  background-color: #ddf;
  color: #445;
  padding: 1rem 2rem;
  border-radius: .5rem;
  cursor: pointer;
}

button:hover {
  background-color: #d0d0ff;
}

Vue

new Vue({
  el: "#app",
  data: {
  	name: null,
  	description: null,
    names: [
    	'Wiley',
      'Blue',
      'Pearl',
      'Flying',
      'Neddick',
      'Ogunquit',
      'York',
      'Chebeague',
      'Casco',
      'Sebasco',
      'Harpswell',
      'Bristol',
      'Boothbay',
      'Monhegan',
      'Matinus',
      'St George',
      'Vinalhaven',
      'Chatham',
      'Nantucket',
      'Vineyard',
      'Marshfield',
      'Provincetown',
      'Truro',
      'Narragansett',
      'Kingstown',
      'Charlestown',
      'Westport',
      'Naushon',
      'Warwick',
      'Weekapaug',
      'Westerly',
      'Matunuck',
      'Quonset',
    ],
    placeTypes: [
    	'Isle',
      'Point',
      'Cape',
      'Shore',
      'Bay',
      'Port',
    ],
    states: [
    	'MA', 'ME', 'RI',
    ],
    adjectives: [
    	'mild', 'medium', 'strong', 'bold',
      'sweet', 'crisp', 'succulent',
      'reduced', 'smooth',
    ],
    joiners: [
    	', ',
      ', accompanied by ',
      ', supplemented with ',
      ', paired with ',
      ', enhanced with ',
      ', under ',
      ', despite ',
    ],
    nouns: [
    	'salt',
      'finish',
      'brine',
      'notes of seaweed',
      'seaweed notes',
      'kelp notes',
    ]
  },
  methods: {
  	getRandom(arr) {
    	return arr[Math.floor(arr.length * Math.random())];
    },
  	getAttribute() {
    	let description = this.getRandom(this.adjectives);
      
      if (Math.random() > .5) {
      	description += ' ' + this.getRandom(this.adjectives);
      }
      
      return description + ' ' + this.getRandom(this.nouns);
    },
    
    getJoiner() {
    	return this.getRandom(this.joiners);
    },
    
    generate() {
    	if (Math.random() > .5) {
      	this.name = this.getRandom(this.placeTypes) + ' ' + this.getRandom(this.names) + ', ' + this.getRandom(this.states);
      } else {
      	this.name = this.getRandom(this.names) + ' ' + this.getRandom(this.placeTypes) + ', ' +...