Comparing and matching an Array strings vs a giving input value string

Hello Everyone, so for the few days been working on my todo-list and adding new features, as well new feedback and how to code it better. I have added a new feature where the user inputs its todo item, this input should match and array that i have created with key values strings, if it matches will add an icon (emoji) next to it. It works when i have a single string input , like the array (‘ham’), but wont work if i add (‘pick ham from the store’), it should also get it because the string has ham in it, so i want to still recognize my value even if i have more string to it.
So basically comparing the array vs the input string on the todo list.

for the comparison i did two ways, with a forEach

 const fruits = ['ham', 'sandwish'];

  fruits.forEach(function(fruit){
    if (fruits.indexOf(valueLowerConvert) !== -1 ) {
      icon = '🥪';
    }else{
      icon = '🎫';
    }
  });

with regular expressions:

if( valueLowerConvert.match(/^(ham|sandwish|)$/) ){
    console.log('match');
    icon = '🥪';
  }else if(valueLowerConvert.match(/^(burger)$/)){
    icon = '🍔';
  }else{
    icon = '🎫';
    console.log('no match');
  }

This is the code function were i have the validations comparison.

function createListItems(myValue){

  const valueLowerConvert = myValue.toLowerCase();
  const myTime = timeStampDate();

  let icon;
  const fruits = ['ham', 'sandwish'];

  fruits.forEach(function(fruit){
    if (fruits.indexOf(valueLowerConvert) !== -1 ) {
      icon = '🥪';
    }else{
      icon = '🎫';
    }
  });



  // if( valueLowerConvert.match(/^(ham|sandwish|)$/) ){
  //   console.log('match');
  //   icon = '🥪';
  // }else if(valueLowerConvert.match(/^(burger)$/)){
  //   icon = '🍔';
  // }else{
  //   icon = '🎫';
  //   console.log('no match');
  // }

  const container = document.getElementById('list-itemsc');
  container.insertAdjacentHTML('beforeend',
    `<li class="items"> ${icon} ${myValue} <span id="icon"></span>
      <small class="my-date" id="date">${myTime}</small>
      <a href="#" class="delete">
        <i class="fas fa-trash-alt"></i>
      </a>
    </li>`);

};

i have send the codepen todolist:

@imendieta Just so we are clear, give us a couple examples of entered tasks and what you expect to see displayed for each task added.

Hi @RandellDawson, so basically when i add an input value like this “ham”;
my array contains
const sandwish = ['ham', 'cheese'];
so works well with single string in the input value “ham”, because my array contains “ham” so it wills how the icon.

but if i add in the input value “pick ham” wont show sandwish icon. only my last options witch is the else where its ether other todo list.

At least needs to get my ham string to compared with my array.

What if someone enters pick up hamburger meat, which icon should show since ham and burger are in the input?

Yes so i wanted to first get the match or comparison of both array and the input string, once i have that i can add more icons for burger or others in my array, in the if else statement.

something similar to my regular expresion:
actually true but i will have to decide witch one will be good for every value entering. so far i was thinking about this process.

if( valueLowerConvert.match(/^(ham|sandwish|)$/) ){
    console.log('match');
    icon = '🥪';
  }else if(valueLowerConvert.match(/^(burger)$/)){
    icon = '🍔';
  }else{
    icon = '🎫';
    console.log('no match');
  }

hi @RandellDawson, just to give a bit of an update, it seems i came for a solution not sure still a good solution for now but i will be testing it, but any suggestions or feedback are welcome. It does what it was plan to do at first. works perfectly, as I’m comparing using regex to get the key pair strings, and making a validation on a string.match between both, meaning the (input value string) vs (regex key value pairs), So basically i wrote the following code.

// We Declare an empty variable to get the icons of each different output.

  let icon;
  // Get all key pair strings to compare/match or input value task.
  let capturingRegexSandwish = /(ham|sandwish)/;
  let capturingRegexBurger = /(burger|cheeseburger)/;

  // We validate to match the input value task vs the key pair strings.
  if( valueLowerConvert.match(capturingRegexSandwish) ){
    icon = '🥪';
  }else if(valueLowerConvert.match(capturingRegexBurger) ){
    icon = '🍔';
  }else{
    icon = '🎫';
  }

This will allow me to enter any key value and adds the icon to it.
any suggestions are welcome, to improve the small project, as far as code its concern :slight_smile:

codepen Link updated: