How To Create a Inbox With Suggetion Using HTML,CSS and JS

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>How To Create a Inbox With Suggetion Using HTML,CSS and JS</title>

</head>

<body>

</body>

</html>

CSS Copied

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

::-moz-selection {
      color: #222;
      background: rgba(0, 0, 0, 0.12);
    }

::selection {
      color: #222;
      background: rgba(0, 0, 0, 0.12);
    }

body {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
    }

input {
      outline: none;
      border: 0;
    }

.input-side-img {
      display: none;
    }

.mainDiv {
      width: 400px;
      height: 400px;
      display: grid;
      place-items: center;
    }

.mainDiv .eachInputDiv {
      position: relative;
      width: 360px;
      height: 65px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid lightgray;
      box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.044), 0 22.3px 17.9px rgba(0, 0, 0, 0.066), 0 100px 80px rgba(0, 0, 0, 0.11);
      backface-visibility: hidden;
      transform: translateZ(0) scale(1, 1);
    }

.mainDiv .eachInputDiv.animateDIvArea {
      animation: animationStylingName 800ms ease;
    }

.mainDiv .eachInputDiv [type="text"] {
      position: absolute;
      width: 360px;
      height: 65px;
      color: #ff3939;
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      padding: 0px 45px 0px 18px;
      caret-color: #000;
      background: transparent;
      z-index: 5;
    }

.mainDiv .eachInputDiv [type="text"]::placeholder {
      color: rgba(34, 34, 34, 0.55);
    }

.mainDiv .eachInputDiv .suggestion-container {
      width: 360px;
      height: 65px;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      color: #1da1f2;
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      padding: 0px 45px 0px 18px;
      pointer-events: none;
      z-index: 4;
    }

.mainDiv .eachInputDiv .allIconImg {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 20px;
      top: 50%;
      transform: translateX(0%) translateY(-50%);
      opacity: 1;
      transition: all 180ms ease-in;
      z-index: 10;
    }

.mainDiv .eachInputDiv .allIconImg.hidden {
      transform: translateX(80%) translateY(-50%);
      opacity: 0;
    }

.mainDiv .eachInputDiv .allIconImg svg {
      width: 100%;
      height: 100%;
      fill: #222;
      pointer-events: none;
    }

@keyframes animationStylingName {
      0% {
        transform: scale(1, 1);
      }

10% {
        transform: scale(1.02, 0.98);
      }

30% {
        transform: scale(0.98, 1.02);
      }

50% {
        transform: scale(1.02, 0.98);
      }

100% {
        transform: scale(1, 1);
      }
    }

JS Copied

console.clear();

const inputContainerEl = document.querySelector(".eachInputDiv");
const textInputEl = document.querySelector("input#text");
const suggestionEl = document.querySelector(".suggestion-container");
const svgTabIcon = document.querySelector(".allIconImg.tab-key");
const svgEnterIcon = document.querySelector(".allIconImg.enter-key");

const ENTER_KEYCODE = 13;
const TAB_KEYCODE = 9;
const BACKSPACE_KEYCODE = 8;
const UP_ARROW_KEYCODE = 38;
const DOWN_ARROW_KEYCODE = 40;
const SPACE_KEYCODE = 32;

let wordsArray = [
  "html", "css", "javascript", "jquery", "ajax", "react",  "angular", "node js", "express js", "redux", "chart js", "bootstrap", "php", "yii", "laravel", "codigniter", "mysql", "mongo db", "asp .net", "java", "python", "django", "ruby", "c++", "webpack", "hammer js", "http", "server", "programming", "artificial inteligence", "development", "website", "app", "frontend", "backend", "cross platform", "xml", "api", "algorithm", "ssl", "enrypt", "decrypt", "code",
];
let suggestedWord = "";
let suggestedWordsArray = [];
let currentWordIndex = 0;
let insertText = false;

textInputEl.addEventListener("input", e => {
  if (e.data != " ") {
    insertText = true;
  }
  if (insertText == false) {
    textInputEl.value = "";
  }

let inputValue = e.target.value;
  suggestedWordsArray = filterArray(wordsArray, inputValue);
  suggestedWord = suggestedWordsArray[0];

if (suggestedWord != undefined) {
    suggestionEl.innerHTML = suggestedWord;
  }

if (inputValue.length == 0 || suggestedWordsArray.length == 0) {
    suggestionEl.innerHTML = "";
  }

if (suggestedWordsArray.length != 0) {
    svgTabIcon.classList.remove("hidden");
    svgEnterIcon.classList.add("hidden");
  } else {
    svgTabIcon.classList.add("hidden");
    svgEnterIcon.classList.remove("hidden");
  }

if (inputValue.length == 0 || inputValue == suggestedWord) {
    svgTabIcon.classList.add("hidden");
    svgEnterIcon.classList.add("hidden");
  }

if (textInputEl.value.length == 0) {
    insertText = false;
  }
});

textInputEl.addEventListener("keydown", e => {
  if (e.keyCode == ENTER_KEYCODE) {
    if (textInputEl.value.length == 0) return;
    let inputValue = textInputEl.value;
    let words = inputValue.split(" ");
    for (let i in words) {
      if (words[i].length != 0) {
        wordsArray.push(words[i]);
        textInputEl.value = "";
        suggestionEl.innerHTML = "";
      }
    }
    wordsArray = removeDuplicatesFromArray(wordsArray);
    inputContainerEl.classList.add("animateDIvArea");
    svgTabIcon.classList.add("hidden");
    svgEnterIcon.classList.add("hidden");
    removeClassAfterAnimationCompletes(inputContainerEl, "animateDIvArea");
  }

if (textInputEl.value.length != 0) {
    if (e.keyCode == UP_ARROW_KEYCODE) {
      if (currentWordIndex == 0) return;
      currentWordIndex--;
      suggestionEl.innerHTML = suggestedWordsArray[currentWordIndex];
    }

if (e.keyCode == DOWN_ARROW_KEYCODE) {
      if (currentWordIndex == suggestedWordsArray.length - 1) return;
      currentWordIndex++;
      suggestionEl.innerHTML = suggestedWordsArray[currentWordIndex];
    }

if (e.keyCode == BACKSPACE_KEYCODE) {
      currentWordIndex = 0;
    }
  }

if (suggestedWord != undefined && suggestedWord != "") {
    if (e.keyCode == TAB_KEYCODE) {
      e.preventDefault();
      textInputEl.value = suggestedWordsArray[currentWordIndex];
      suggestionEl.innerHTML = "";
      svgTabIcon.classList.add("hidden");
      svgEnterIcon.classList.add("hidden");
    }
  }
});

removeClassAfterAnimationCompletes(inputContainerEl, "animateDIvArea");

function removeClassAfterAnimationCompletes(el, className) {
  let elStyles = window.getComputedStyle(inputContainerEl);
  setTimeout(function () {
    el.classList.remove(className);
  }, +elStyles.animationDuration.replace("s", "") * 1000);
}

function filterArray(array, item, reverse = false) {
  if (reverse) {
    return array
      .filter(word => compareTwoStrings(word, item))
      .sort((a, b) => a.length - b.length);
  } else {
    return array
      .filter(word => compareTwoStrings(word, item))
      .sort((a, b) => b.length - a.length);
  }
}

function removeDuplicatesFromArray(array) {
  return [...new Set(array.map(i => i))];
}

function compareTwoStrings(string, subString) {
  let temp = string.split("", subString.length).join("");
  if (subString == temp) return subString;
}