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;
}
}
})
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
}
})