Project review wiki viewer

Project review wiki viewer
0

#1

This is my wikipedia viewer. I would love someone to review the code and critique it. Thanks.


#2

I suggest changing the following code:

$('#search').keyup(function () {
  let result = document.getElementById('search').value;

to the following, in case someone accidentally hits the enter button at the end of a word they type in. With your current solution, the form submits which reloads the page instead of doing nothing.

$('#search').on('keyup keypress', function (event) {
  if (event.keyCode === 13) { 
    event.preventDefault();
  }
  let result = document.getElementById('search').value;

#3

One other suggestion is instead of clearing out the html of the div with class=“container” and then iterating through the results and appending the divs with class=“content” to the div with class=“container” during each iteration, you should instead create an html string with the for loop and replace one time the html content of the div with class=“container”. This is better because it only updates the DOM one time instead of 11 times. Below I have provided the code for my suggestion. I also used template literals to make the building the stream easier and more readable.

    success: function (data) {
      let results = '';  
      for (let i = 0; i < 10; i++) {
          const link = `<a href='${data[3][i]}'>${data[1][i]}</a>`;
          const split = data[2][i].split('.').join('') + '...';
          results += `<div class="content">${link}<br><br>${split}</div>`;
      }
      $('.container').html(results);
    }  

#4

Thank you for all the input. This stuff is gold. I’m pretty new to this so all these suggestions are helping with cleaner, more professional code.