Project Feedback - Wikipedia Viewer

Code Feedback
1

Looking for some project feedback on my Wikipedia Viewer. It’s very basic design, not really appealing, but what I am really interested in is feedback on my Javascript. I can redesign the html/css later to make it look nice. Any advice is appreciated. Thanks!

3

I implemented your changes in my local environment. However, I am having trouble displaying the results. @camperextraordinaire

$(document).ready(function() {
  $("#search").on("click", function() {
    $("#searchIcon").css("display", "none");
    $(".searchBar").css("display", "block");
    $("#searchInput").focus();
  });

  $("#searchInput").on("keypress", function() {
    $("#clear").css("display", "block");
  });

  $("#clear").on("click", function() {
    $("#searchInput").val("");
    $(".searchBar").css("display", "none");
    $("#clear").css("display", "none");
    $("#searchIcon").css("display", "");
    $(".data").html("");
  });

  $("#searchInput").on("keyup", function(e) {
    if ($("#searchInput").val().length == 0) {
      $("#clear").css("display", "none");
    }
    if (e.keyCode === 13) {
      $(".data").html("");
      getData($("#searchInput").val());
    }
  });
});

function getData(search) {
  var api = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=search&utf8=1&srsearch=" + search.replace(/ /g, "%20");
  $.getJSON(api, function(json) {
    var results = json.query.search.length === 0
      ? noResults()
      : json.query.search.reduce(displaySearch, '');
    $(".data").append(results);
  });
}

function displaySearch(html, p) {
  return
  `
  <div class="row justify-content-center datarow">
    <div class="col-12">
      <p><a href="https://wikipedia.org/wiki?curid=${p.pageid}">
        ${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div`;
}

function noResults() {
  return
  `
    <div class="row justify-content-center">
      <div class="col-8">
        <p>No Results To Display</p>
      </div>
    </div`;
}
5

Oh that must have been a mistake with my pasting. However, it’s still not working. @camperextraordinaire

7

No console errors on the developer tools. I changed the first grave tick to the same line with the ‘return’ word and it started working, however, it’s only displaying the last index of the array instead of all the indexes. Maybe I need to change the reduce function?

8

I changed it to this and it started working.

function displaySearch(html, p) {
  return (html += `
  <div class="row justify-content-center datarow">
    <div class="col-12">
      <p><a href="https://wikipedia.org/wiki?curid="${p.pageid}">
        ${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div>`);
}
1 Like