changing background color when text area contains certain word from array-CodePudding

I want to change the documents background color to goodColor if the textArea contains more goodWords than badWords. and visa versa. Also if the same word from an array is entered twice I need it to count as being included twice.

    const goodWords = ['happy', 'joyful', 'amazing', 
    'enjoyed', 'fun', 'excited', 'nice', 'funny', 
    'fantastic', 'good', 'calm', 'comfortable', 
    'glad', 'confident', 'kind'];

    const badWords = ['angry', 'sad', 'upset', 
    'defeated', 'embarrassed', 'jealous', 'nervous', 
    'anxious', 'unhappy', 'miserable', 'worst', 
    'bad'];

    const goodColor = 'rgb(225,225,56,20)'
    const badColor = 'rgb(100,100,50,50)'

    textArea.addEventListener('input', function () {
        for (let good of goodWords) {
            if(text.value.includes(good)) {
                document.body.style.backgroundColor = 
    goodColor;
                
            }  
            }
            for(let bad of badWords) {
                if (text.value.includes(bad)) {
                    
    document.body.style.backgroundColor = badColor;
                }
            }
    })

CodePudding user response：

First you need to break textarea value by words and then count all matches in both arrays. Then you can simply compare them and color bg as you wish.

const goodWords = ['happy', 'joyful', 'amazing', 
    'enjoyed', 'fun', 'excited', 'nice', 'funny', 
    'fantastic', 'good', 'calm', 'comfortable', 
    'glad', 'confident', 'kind'];

const badWords = ['angry', 'sad', 'upset', 
    'defeated', 'embarrassed', 'jealous', 'nervous', 
    'anxious', 'unhappy', 'miserable', 'worst', 
    'bad'];

const goodColor = 'rgb(225,225,56,20)'
const badColor = 'rgb(100,100,50,50)'

textArea.addEventListener('input', function () {
    // Exit if textarea contains only spaces or empty
    if (text.value.trim().length === 0) {
        return;
    }

    // Using regexp break value to array of words
    const words = text.value.match(/\b(\w )\b/g)
    let goodCount = 0;
    let badCount = 0;

    // Cycle through words
    for (let i = 0; i < words.length - 1; i  ) {
        if (goodWords.includes(words[i])) {
             goodCount  ;
        }

        if (badWords.includes(words[i])) {
             badCount  ;
        }
    }

    if (goodCount > badCount) {
        document.body.style.backgroundColor = goodColor;
    } else if (goodCount < badCount) {
        document.body.style.backgroundColor = badColor;
    } else {
        // Some neutral color
    }
})

CodePudding user response：

You can count words includes...

const goodWords = ['happy', 'joyful', 'amazing',
  'enjoyed', 'fun', 'excited', 'nice', 'funny',
  'fantastic', 'good', 'calm', 'comfortable',
  'glad', 'confident', 'kind'
];

const badWords = ['angry', 'sad', 'upset',
  'defeated', 'embarrassed', 'jealous', 'nervous',
  'anxious', 'unhappy', 'miserable', 'worst',
  'bad'
];

const goodColor = 'rgb(225,225,56,20)'
const badColor = 'rgb(100,100,50,50)'

let textArea = document.querySelector("#text");

textArea.addEventListener('input', function() {

  var goodCount = 0;
  var badCount = 0;
  for (let good of goodWords) {
    if (good.includes(textArea.values)) {
      goodCount   ;
    }
  }
  for (let bad of badWords) {
    if(bad.includes(textArea.values)) {
      badCount   ;
    }
  }


  if (goodCount > badCount) {
    document.body.style.backgroundColor =
      goodColor;
  } else if (goodCount < badCount) {
    document.body.style.backgroundColor = badColor;
  } else {
    // if equals number for case
  }

})

<textarea id="text"></textarea>