How can I uppercase my array as well as any word I push into that Array-CodePudding

I am working on an algorithm where you press a button and 2 checks happen:

You can only push a word into array if that word doesn't exist in the array already and starts with the same letter that the last word in the array ends with.

I think i figured out the checks but i am trying to optimize it. If i type all lower case or all upper case it works, but if my word is "Maine"...the next word has to start with e and its "Egypt", it will not accept it, i need to lower case it to be accepted.

From what i understand one solution is to automatically convert all words in the Array to lower case or upper case and do the same to the word that is being added from field.value input.

For the life of me, i cannot implement it for some reason, iv been at it for 3 hours already and tried different tutorials. Not sure what i am doing wrong at this point.

Thank you for your time and explanation.

HTML

<div id="main-container">
    
    <input type="text" id="field" >
    <div id="message"></div>
    <button  id="play">Plasdfay</button>
    </div>

JS


const field = document.querySelector('#field');
const message = document.querySelector('#message');
const playBtn = document.querySelector('#play')

let usedCities = [];

playBtn.addEventListener('click', function() {
    let fieldView = field.value;
    let lastWordInArray = usedCities[usedCities.length - 1]

    if(!usedCities[0] || !usedCities.includes(fieldView) && lastWordInArray[lastWordInArray.length - 1] === fieldView[0]) {
        usedCities.push(fieldView)

    }

    console.log(usedCities)
    
})

CodePudding user response：

const field = document.querySelector('#field');
const message = document.querySelector('#message');
const playBtn = document.querySelector('#play')

let usedCities = [];

playBtn.addEventListener('click', function() {
  let fieldView = field.value;
  let lastWordInArray = usedCities[usedCities.length - 1];

  if(!usedCities[0] || !usedCities.includes(fieldView) && lastWordInArray[lastWordInArray.length - 1] === (fieldView[0].toLowerCase() || fieldView[0].toUpperCase())) {
    usedCities.push(fieldView)
  }
  console.log(usedCities)
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1 id="header"></h1>
    <div id="main-container">
    <input type="text" id="field" >
    <button  id="play">Play</button>
    <div id="message"></div>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>

CodePudding user response：

If casing doesn't matter for checking, but you want to keep the casing in the array, you could do something like this:

const field = document.querySelector('#field');
const message = document.querySelector('#message');
const playBtn = document.querySelector('#play')

let usedCities = [];

playBtn.addEventListener('click', function() {
    let fieldView = field.value;
    let fieldViewLc = fieldView.toLowerCase();
    let checkUsedCities = usedCities.map(el => el.toLowerCase()); 
    let lastWordInArray = checkUsedCities[checkUsedCities.length - 1]
    
    if(!checkUsedCities[0] || !checkUsedCities.includes(fieldViewLc) && lastWordInArray[lastWordInArray.length - 1] === fieldViewLc[0]) {
        usedCities.push(fieldView)

    }

    console.log(usedCities)
    
})

<div id="main-container">
    
    <input type="text" id="field" >
    <div id="message"></div>
    <button  id="play">Plasdfay</button>
    </div>

CodePudding user response：

You can make lower case from last letter from last element of array and lower case from first letter from new word

const field = document.querySelector('#field');
const message = document.querySelector('#message');
const playBtn = document.querySelector('#play')

let usedCities = [];

playBtn.addEventListener('click', function() {
    let fieldView = field.value;
    let lastWordInArray = usedCities[usedCities.length - 1]

    if(!usedCities[0] || !usedCities.includes(fieldView) && lastWordInArray[lastWordInArray.length - 1].toLowerCase() === fieldView[0].toLowerCase()) {
        usedCities.push(fieldView)

    }

    console.log(usedCities)
    
})