JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main id="app" v-if="show">
  <figure>
    <img :src="`https://loremflickr.com/320/240/man,woman,ski/all?lock=${seed % 1000}`">
    <figcaption>
      <pick :values="man"></pick>,
      <pick :values="woman"></pick> and their
      <pick :values="skis"></pick>
    </figcaption>
  </figure>
  <button @click="refresh">not quite</button>
</main>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

main {
  text-align: center;
}

figure {
  align-items: center;
    font-family: Lato;
  color: hsl(0, 0%, 75%);
  font-weight: 300;
  justify-content: center;
  margin: 10vmin;
}

button {
  border: 0;
  font-family: Lato;
  font-weight: 300;
  color: hsl(0, 0%, 50%);
}

Vue

Vue.component('pick', {
  template: `<span v-text="value"/>`,
  props: {
    values: Array,
    min: {type: Number, default: 1},
    max: {type: Number, default: 1},
    and: Boolean,
    commas: {type: Boolean, default: true},
  },
  data: () => ({
    value: null,
  }),
  mounted() {
    let values = [];
    if (this.min > this.max) {
      this.max = this.min;
    }
    const numValues = this.min + Math.floor((this.max - this.min + 1) * Math.random());
    for (let i = 0; i < numValues; i++) {
      let newVal = this.values[Math.floor(this.values.length * Math.random())];
      if (this.values.includes(newVal)) {
        newVal = this.values[Math.floor(this.values.length * Math.random())];
      }
      values.push(newVal);
    }
    if (this.and && values.length > 1) {
      this.value = values.slice(0,-1).join(', ') + ' and ' + values.slice(-1)[0]
    } else if (this.commas) {
      this.value = values.join(', ')
    } else {
    	this.value = values.join(' ');
    }
  },
});
new Vue({
  el: '#app',
  methods: {
    refresh() {
    	this.seed = (new Date).getTime();
      this.show = false;
      requestAnimationFrame(() => this.show = true);
    },
  },
  data: {
    show: true,
    seed: null,
    man: [
    	'man', 'gentleman', 'boy', 'bro', 'athlete', 'skier', 'human', 'boomer',
    ],
    woman: [
    	'woman', 'lady', 'girl', 'gal', 'athlete', 'teen', 'tween', 'kid', 'millenial',
    ],
		skis: [
    	'skis', 'footsleds', 'alpine skis', 'snow sliding planks', 'waxed boot boards',
    ],
  },
})