body {
  font-size: 62.5%;
  background: linear-gradient(
    to right,
    rgb(249, 168, 212),
    rgb(216, 180, 254),
    rgb(129, 140, 248)
  );
}

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 400px;
  height: 400px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.palindrome__box {
  margin: 50px auto;
  width: 100%;
  height: 100%;
}

.box__title {
  padding: 15px;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(
    to right,
    rgb(29, 78, 216),
    rgb(30, 64, 175),
    rgb(17, 24, 39)
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.input__box {
  width: 100%;
  height: 50px;
}

.text__input {
  width: 70%;
  border: none;
  background: none;
  text-align: center;
  height: 100%;
  font-size: 1.2rem;
  margin-bottom: 20px;
  border-bottom: 2px solid blue;
  transition: all 0.4s ease-in;
}

.text__input:focus {
  width: 100%;
  outline: none;
}

.submit__button {
  width: 70%;
  height: 50px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 100px;
  animation: background 2s linear infinite;
  transition: all 2s ease-in;
}

.submit__button:hover {
  background: linear-gradient(
    to right,
    rgb(110, 231, 183),
    rgb(59, 130, 246),
    rgb(147, 51, 234)
  );
  animation: none;
}

.results {
  margin: 20px auto;
  font-size: 1.5rem;
  padding-left: 10px;
  overflow-wrap: break-word;
  padding: 30px 0;
}

span {
  font-weight: bold;
  font-size: 2.5rem;
  display: inline-block;
  transition: 1s ease-in;
  background: linear-gradient(
    to right,
    rgb(29, 78, 216),
    rgb(30, 64, 175),
    rgb(17, 24, 39)
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

span.fade {
  animation: title 0.4s ease-in 1;
}

@keyframes title {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes background {
  0% {
    background: rgb(110, 231, 183);
  }
  50% {
    background: rgb(59, 130, 246);
  }
  100% {
    background: rgb(147, 51, 234);
  }
}

const title = document.querySelector('.title');
const titleContent = title.textContent;
const input = document.querySelector('.text__input');
const submitButton = document.querySelector('.submit__button');
let resultBox = document.querySelector('.results');

// trophy icon
let winIcon = `<i class="uil uil-grin"></i>`;
let loseIcon = `<i class="uil uil-sad-cry"></i>`;

// Making the animation happen as soon as the page was loaded
window.onload = function () {
  // We should split up the word / the result is always an array
  const splitedText = titleContent.split('');
  title.textContent = '';
  // Creating a for loop for every charachter to changed into a span
  for (let i = 0; i < splitedText.length; i++) {
    title.innerHTML += `<span>${splitedText[i]}</span>`;
  }

  let char = 0;
  let timer = setInterval(onClick, 100);

  function onClick() {
    const span = title.querySelectorAll('span')[char];
    span.classList.add('fade');
    // increasing it to be happended for every one of them
    char++;

    //we need to stop it
    if (char === splitedText.length) {
      complete();
      return;
    }
  }

  function complete() {
    clearInterval(timer);
    timer = null;
  }
};

// checking the users word
submitButton.addEventListener('click', palindromeChecker);

// palindrome checker
function palindromeChecker(word) {
  word = input.value.toLowerCase();
  // console.log(word);
  let wordSplited = word.split('');
  //   console.log(wordSplited);
  let reversedWord = wordSplited.reverse();

  //joining the reversed word
  let joinedWord = reversedWord.join('');
  //   console.log(reversedWord.join(""));

  // Setting the conditions / 1.Not empty 2. Exactly the same with it's reversed
  if (word == joinedWord && word != '') {
    // console.log('It is a palindrppme');
    // Adding the result to the box
    resultBox.innerHTML = `${winIcon} Palindrome ${winIcon}`;
    input.value = '';
  } else if (word == '') {
    resultBox.innerHTML = 'Enter a Word!';
  } else {
    // console.log('It is not a palindrome');
    // Adding the result to the box
    resultBox.innerHTML = `${loseIcon} Not A Palindrome ${loseIcon}`;
    input.value = '';
  }
}