Fast and the Furious Generator

by khamer

HTML

<main>
  <div class="controls">
    <input class="keyword" v-model="first" type="text" placeholder="Fast">
    <input class="keyword" v-model="second" type="text" placeholder="Furious">
  </div>
  <div class="title" v-for="title in titles" :key="title" v-html="title"></div>
</main>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,900&display=swap');

html, main {
  background: #eee;
  color: black;
}

.controls {
  margin-bottom: 1rem;
  text-align: center;
}

.title {
  text-transform: uppercase;
  font-family: 'Kanit', sans-serif;
  font-size: 4.25vw;
  text-align: center;
  line-height: 1.25;
  
  b {
    font-weight: inherit;
    font-size: 125%;
    vertical-align: text-top;
  }
}

Vue

new Vue({
	el: 'main',
  data: {
  	step: 'input',
  	first: 'Fast',
    second: 'Furious',
  },
  computed: {
  	textTitles() {  
    	return [
      	`The ${this.first} and the ${this.second}`,
        `2 ${this.first} 2 ${this.second}`,
        `The ${this.first} and the ${this.second}: Tokyo Drift`,
        `${this.first} & ${this.second}`,
        `${this.first} Five`,
        `${this.first} & ${this.second} 6`,
        `${this.second} Seven`,
        `The Fate of the ${this.second}`,
        `${this.first} & ${this.second} Presents: Hobbs & Shaw`,
        `${this.first[0]}9`,
      ]
  	},
    titles() {
    	return this.textTitles.map(title => {
      	return title.replace(/([A-Z0-9]+)/g, '<b>$1</b>');
      })
    }
  }
})