Yazeka
Arama sonuçlarına göre oluşturuldu
HTML ve CSS kullanarak basit bir arama motoru oluşturmak için aşağıdaki adımları izlemek gerekmektedir:
- 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>
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; }
- 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); });
Bu adımları takip ederek, kullanıcı dostu bir arama motoru oluşturulabilir.
5 kaynaktan alınan bilgiyle göre: