1. HTML Yapısı: Bir arama motoru için temel HTML yapısı, bir form elemanı içinde arama çubuğu ve arama butonu içermelidir 23.

<form>
  <input type="text" id="search" placeholder="Arama yap..." />
  <button id="searchButton">Ara</button>
</form>
Kopyala

2. CSS Stilleri: Arama çubuğunun ve butonun stilini belirlemek için CSS kullanılmalıdır 23.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  text-align: center;
  padding: 50px;
}
input[type="text"] {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  padding: 10px 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
Kopyala

3. JavaScript İşlevselliği: Arama butonuna tıklandığında, kullanıcının girdiği kelimeyi veri kümesindeki öğelerle karşılaştırarak sonuçları görüntülemek için JavaScript kodu eklenmelidir 2.

const data = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Node.js",
  "Python",
  "Java",
  "C++",
  "Ruby",
  "PHP"
];
document.getElementById("searchButton").addEventListener("click", function() {
  const query = document.getElementById("search").value.toLowerCase();
  const results = data.filter(item => item.toLowerCase().includes(query));
  displayResults(results);
});
Kopyala