JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main id="app" v-if="show">
  <figure>
    <img :src="`https://loremflickr.com/320/240/conference,board/all?lock=${seed % 1000}`">
    <figcaption>
      <pick :values="yes"></pick>,
      you <pick :values="approve"></pick>
      <pick :values="thing"></pick>.
    </figcaption>
  </figure>
  <button @click="refresh">rephrase</button>
</main>

CSS

@import url('https://fonts.googleapis.com/css2?family=Coda:wght@800&display=swap');

main {
  text-align: center;
}

figure {
  align-items: center;
  font-family: Coda;
  font-weight: 800;
  color: black;
  font-size: 2rem;
  justify-content: center;
  margin: 10vmin;
  display: flex;
}

button {
  border: 0;
  font-family: Coda;
  font-weight: 800;
  cursor: pointer;
  color: black;
  background-color: yellow;
  padding: 1rem;
  box-shadow: 10px 10px 0 goldenrod;
}

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,
    yes: [
    	'Yes', 'Affirmative', 'Correct', 'Yep', 'Yeppers', 'Correct-o-mundo', 'Exactly', 'As witnessed by Jesus', 'Since the dawn of time', 'As sure as rain as wet', 'By the old gods and the new'
    ],
    approve: [
    	'did approve', 'approved', 'accepted', 'did accept', 'agree on', 'acknowledge', 'consent to', 'give your blessing to', 'give the go-ahead on', 'green light', 'bury the hatchet on',
    ],
		thing: [
    	'this', 'this item', 'the matter at hand', 'this work', 'the aforementioned', 'the already stated',
    ],
  },
})