Wikipedia Viewer - мой пятый проект в спидране. Это было непросто. Тем не менее, мне понравилось это делать!
Я использовал для этого проекта фреймворки начальной загрузки и jQuery, так как я уже потратил много времени на чтение документации API и не мог больше тратить время на написание собственного пользовательского CSS. В таких ситуациях удобен Bootstrap.
Этап 1: укладка
Программа просмотра Wikipedia Viewer проста с точки зрения макета и стиля. Он состоит из очень немногих элементов. В нем есть поле поиска и две кнопки - для поиска и чтения случайной статьи. Наконец, div для отображения результатов поиска.
Я позаимствовал один из классных стилей окна поиска из codepen (в следующий раз я научусь делать это сам, мизинец, обещание!: D)
Этап 2. Получение данных из Wikipedia API и отображение.
Когда пользователь нажимает кнопку поиска или клавишу «Enter», вызовите функцию поиска, чтобы отобразить результаты поиска. Пока все просто.
При этом возникает одна сложность: мы не можем напрямую отправить текст, введенный в поле поиска, в API. Введенная строка должна быть закодирована как компонент универсального идентификатора ресурса (URI):
var search = $("#search").val() //Get text entered in search box
search = encodeURIComponent(search); //encode the search string
Мне было очень сложно понять документацию Wikipedia API. Для этого был полезен форум FreeCodeCamp. Я получил данные - название результата, описание и ссылку - из API через вызов AJAX в формате JSON.
Я добавил к этому дополнительную функциональность, добавив кнопку «вернуться к началу», чтобы при большом количестве результатов было легче перейти наверх.
Программа просмотра википедии выглядит так:
Заметки для себя
- Добавьте функцию автозаполнения.
- Научитесь делать анимированное окно поиска самостоятельно.
Этот проект находится здесь.
Репо по проекту можно найти здесь.
