Ура! Я прибыл. Представляю свой первый проект: TV Lister. Скачать телепрограмму здесь.
Это одностраничное приложение, которое по запросу пользователя отображает список телешоу в браузере. После отправки названия шоу в форму TV Lister извлекает информацию из API tvmaze.com и заполняет «карточку» изображением, названием, типом и жанрами телешоу. При нажатии на изображение будет переключаться видимость сводки соответствующей телепередачи. Каждая карточка шоу включает кнопку Удалить, чтобы удалить карточку шоу из вашего списка.
Одним из полезных аспектов API tvmaze является нечеткий алгоритм, применяемый к их функции поиска. Это позволяет пользователям отправлять заголовки в форму телелистера с небольшими опечатками. При отправке тусоваться с мистером Купером будет возвращено тусоваться с мистером Купером.
Самой сложной задачей для меня было перестроить уже функционирующую, но неудовлетворительную версию элементов списка TV Lister. Первоначальный «список» TV Lister был неупорядоченным списком, заполненным элементами списка. Интуитивно, правда? Каждая новая порция информации, добавляемая в пункт списка, превращала мои усилия в неуклюжий баланс. Изображение было добавлено к элементу списка, к нему была добавлена кнопка Удалить. Массив жанров, добавленный к кнопке. Или, может быть, кнопка была добавлена к массиву жанров, а жанры добавлены к элементу списка. Это было функционально, но было слишком много ограничений, когда пришло время настроить внешний вид. Слишком долго меня возмущала мысль об изменении структуры. Это TV Lister! В названии есть List!
Евангелист Div Аарон Фаулкс открыл мне глаза на его образ жизни, ориентированный на Div. Вместе мы визуализировали перечисленные телешоу в виде «карточек» div, содержащих несколько дочерних div. Кнопка «Удалить» и изображения tvmaze разделены на левый div, а названия, типы и жанры tvmaze — на правый div. Дальше справа от «справа» есть скрытый div, содержащий сводку, пока щелчок по изображению не переключит назначенный ему класс и его отображение: none; свойство и ценность внутри.
Я доволен преобразованием в div. Я чувствую себя более подготовленным к экспериментам на раннем этапе и часто с внедрением этой структуры в будущие проекты. Это немного больше работы по настройке, чем просто вызов неупорядоченного списка, но в конечном итоге он предлагает гораздо больше возможностей, чем попытка возиться с жесткостью элементов с более конкретным использованием.
