How do I refactor these two functions?

user_13122448 0
Viewed 43

What is the best way to refactor this JS for my random quote generator? The getLifeQuote and getTravelQuote functions do the same task. I've tried several things and it won't work. Here is the code: 

    lifeBtn.addEventListener('click', getLifeQuote); 
    travelBtn.addEventListener('click', getTravelQuote);

function getLifeQuote(){

  let sentenceFrag1 = ['Being happy', 'Living contently', 'Enjoying your life', 'Taking it easy', 'Trying to relax']
  let sentenceFrag2 = ['is a challenge', 'is worth it', 'is a possibility', 'is the goal', 'can be done'];
  let sentenceFrag3 = ['for a brighter future.', 'to soar higher.', 'for a better you.', 'to achieve greatness.', 'for a stress-free day.'];

  let inputValue = document.getElementById("userInput").value;
  let quote = ''; 
  for (i = 0; i < inputValue; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] }${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`

    quoteArea.innerHTML= quote; 
  }
   return quote;
}


function getTravelQuote(){

    let sentenceFrag1 = ['Traveling', 'Explorinig', 'Seeing the world', 'Going on a journey', 'Hitchhiking']
    let sentenceFrag2 = ['is the ticket to', 'opens your eyes to', 'grants access to', 'opens doors to', 'can make you experience'];
    let sentenceFrag3 = ['the earth around us.', 'the lives of others.', 'the many cultures different from your own.', 'the adventures that await.', 'the joys of the world.'];

    let inputValue = document.getElementById("userInput").value;
    let quote = ''; 
    for (i = 0; i < inputValue; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] }${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`

    quoteArea.innerHTML= quote; 
    }
     return quote;
  }
refactoring javascript
2 Answers

You can group the functionalities and use parameters for different statement sets:

lifeBtn.addEventListener('click', () => { getQuotes("life") })
travelBtn.addEventListener('click', () => { getQuotes("travel") })

function getQuotes(type) {
  let sentenceFrag1, sentenceFrag2, sentenceFrag3, quote = ''
  
  if (type === "life") {
    sentenceFrag1 = ['Being happy', 'Living contently', 'Enjoying your life', 'Taking it easy', 'Trying to relax']
    sentenceFrag2 = ['is a challenge', 'is worth it', 'is a possibility', 'is the goal', 'can be done'];
    sentenceFrag3 = ['for a brighter future.', 'to soar higher.', 'for a better you.', 'to achieve greatness.', 'for a stress-free day.'];
  } else {
    sentenceFrag1 = ['Traveling', 'Explorinig', 'Seeing the world', 'Going on a journey', 'Hitchhiking']
    sentenceFrag2 = ['is the ticket to', 'opens your eyes to', 'grants access to', 'opens doors to', 'can make you experience'];
    sentenceFrag3 = ['the earth around us.', 'the lives of others.', 'the many cultures different from your own.', 'the adventures that await.', 'the joys of the world.'];
  }

  for (i = 0; i < userInput.value; i++) {
    quote += `${sentenceFrag1[Math.floor(Math.random() * sentenceFrag1.length)]} ${sentenceFrag2[Math.floor(Math.random() * sentenceFrag2.length)] } ${sentenceFrag3[Math.floor(Math.random() * sentenceFrag3.length)]} <br> <br>`
    quoteArea.innerHTML = quote
  }
  
  return quote
}
<button id="lifeBtn">lifeBtn</button>
<button id="travelBtn">travelBtn</button>
<input id="userInput" type="number" value="1" />
<br/>
<div id="quoteArea"></div>

user_78678220 
lifeBtn.addEventListener('click', getLifeQuote);
travelBtn.addEventListener('click', getTravelQuote);

const lifeQuoteOptions = [
    ['Being happy', 'Living contently', 'Enjoying your life', 'Taking it easy', 'Trying to relax'],
    ['is a challenge', 'is worth it', 'is a possibility', 'is the goal', 'can be done'],
    ['for a brighter future.', 'to soar higher.', 'for a better you.', 'to achieve greatness.', 'for a stress-free day.']
]

const travelQuoteOptions = [
    ['Traveling', 'Explorinig', 'Seeing the world', 'Going on a journey', 'Hitchhiking']
    , ['is the ticket to', 'opens your eyes to', 'grants access to', 'opens doors to', 'can make you experience']
    , ['the earth around us.', 'the lives of others.', 'the many cultures different from your own.', 'the adventures that await.', 'the joys of the world.']
]

function getTravelQuote() {
    return getQuoteFor('travel')
}

function getLifeQuote() {
    return getQuoteFor('life')
}

function getQuoteFor(genre) {
    const quoteOptions = genre === 'travel' ? travelQuoteOptions : lifeQuoteOptions
    let inputValue = document.getElementById("userInput").value;
    let quote = '';
    for (i = 0; i < inputValue; i++) {
        quote += `${quoteOptions[0][Math.floor(Math.random() * quoteOptions[0].length)]} ${quoteOptions[1][Math.floor(Math.random() * quoteOptions[1].length)]}${quoteOptions[2][Math.floor(Math.random() * quoteOptions[2].length)]} <br> <br>`
        quoteArea.innerHTML = quote;
    }
    return quote;
}
user_45570730
Related