Searchbot koncept by HAP v2

by Petr Haluza

HTML

<div>
<svg width="100%" height="100%" viewBox="0 0 400 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M397.398,112.568c0,-60.468 -49.092,-109.56 -109.56,-109.56l-177.938,0c-60.468,0 -109.56,49.092 -109.56,109.56l-0,3.874c-0,50.77 34.607,93.52 81.498,105.928c8.957,2.37 114.363,35.462 131.762,38.542l-22.496,-46.061l96.734,11.152c60.468,-0 109.56,-49.093 109.56,-109.561l0,-3.874Zm-278.743,-38.972c25.456,0 46.123,19.23 
46.123,42.915c0,23.685 -20.667,42.914 -46.123,42.914c-25.456,0 -46.123,-19.229 -46.123,-42.914c0,-23.685 20.667,-42.915 46.123,-42.915Zm167.647,-0.802c25.456,0 46.123,19.229 46.123,42.915c0,23.685 -20.667,42.914 -46.123,42.914c-25.456,0 -46.123,-19.229 -46.123,-42.914c0,-23.686 20.667,-42.915 46.123,-42.915Z" style="fill:#6fb8f4;"/>
</svg>
<p id="result" class="pong">Napiš co hledáš.</p>
</div>

<p id="result2"></p>

<input type="text" id="searchInput">

CSS

body {
  font-family: Calibri, sans-serif;
}

div {
  padding: 10px 20px;
  background: #ff0;
  display:flex
}
svg { width: 30px}

#result {}
.ping {animation: fadeIn .75s; }
.pong {animation: fadeIn2 .75s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn2 {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

JavaScript

var score = 0;
var grade = 0;
var searchInput = document.getElementById('searchInput');

searchInput.addEventListener("keyup", function (evt) {
	score = document.getElementById("searchInput").value.length;
  
  if (score > 7) {
    grade = "Teď už bychom mohli něco najít";
  } else if (score > 5) {
    grade = "Ještě upřesníš?";
  } else if (score > 2) {
    grade = "Neni to uplně ono";
  } else if (score > 1) {
    grade = "Pokračuj"; 
  } else if (score == 0) {
    grade = "Začni psát...";    
  } else {
    grade = "Moc krátký výraz";
    
  }

  document.getElementById("result").innerHTML = "počet " + score + " a " + grade + "." ;
$("#result").toggleClass("ping");
$("#result").toggleClass("pong");
});