Мой третий проект, этот, сосредоточен на адаптивном стиле, асинхронном JavaScript и работе с базами данных и их данными. Наша задача состояла в том, чтобы сделать веб-страницу внешнего интерфейса для API по нашему выбору примерно за две недели (хотя одна из этих недель была неделей Рождества/Нового года, поэтому я сделал большую часть работы для этого проекта примерно за неделю). Я выбрал API без ключа (чтобы эта веб-страница могла быть полностью функциональной в моем портфолио), который меня интересовал — База данных поэзии Thundercomb.
Моей первой идеей, учитывая API, был генератор поэтического мудборда. Углубившись в документацию базы данных, я понял, что это невозможно сделать очень строго — нет никаких способов поиска по жанру, настроению или тегам. Я на время отложил доску настроения и продемонстрировал другие функции базы данных, такие как поиск стихов по названию или автору и случайный выбор результатов на странице поиска.
На другой странице я также реализовал использование базы данных, описанной в документации: создание сонетов путем поиска 14 случайных стихотворений по 14 строк, а затем взятие строк по одной из каждого стихотворения. Здесь начинаются мои нестрогие предположения, ибо это предполагает, что все 14-строчные стихотворения являются сонетами. Я сделал то же самое для хайку, а затем дал пользователю возможность ввести любое количество строк с помощью того же процесса. После добавления опции простого извлечения любого случайного стихотворения для базы данных я обернул эти функции на странице, ориентированной на случайность.
Теперь, когда в проекте оставалось мало времени, я обратился к мудборду. Вместо того, чтобы пытаться выполнить какой-либо тщательный процесс, я вытащил свою функцию поиска по заголовку со страницы поиска и дал ей ключевые слова в зависимости от того, какую кнопку нажимал пользователь. В итоге у меня остались только две кнопки: «тоска по любви» (которая просто ищет стихотворение со словом «любовь») и «мрачная» (которая делает то же самое со словом «смерть»).
Для стиля я изучил и использовал Tailwind, CSS-фреймворк. Этот фреймворк работает вместе с ручным CSS, который был полезен для настройки стиля всего сайта. С помощью Tailwind я смог быстро создать и запустить базовые стили для сайта, используя современный дизайн, такой как flexboxes и служебные классы, чтобы сделать сайт мобильным с минимальными служебными классами. Я также использовал служебные классы в своем JavaScript, что позволило мне динамически менять фон мудбордов на основе пользовательского ввода. Если бы у меня было больше времени, я мог бы случайным образом выбирать фоны из большего списка изображений, добавлять украшения и, возможно, даже извлекать из базы данных поэзии, которая поддерживает теги контента, для действительно тщательного генератора мудбордов. На данный момент я добавил последние штрихи с помощью CSS, в том числе медиа-запросы, чтобы масштабировать текст в соответствии с размером экрана пользователя и установить шрифт, цвет и размер для всего динамически генерируемого текста.
Конечный результат этого проекта по-прежнему примитивен и нестрог — в конце концов, это всего лишь моя седьмая неделя программирования! — но подчас интересные и пассионарные на беглый взгляд. Настоящая польза от этого проекта, как и от всех моих ранних проектов, заключалась в уроках и методах, усвоенных на этом пути. Подавляющая часть недели, потраченной на этот проект, была пресловутой заточкой топора, что позволит реализовать более крупные проекты в будущем.
Тем не менее, вы можете найти некоторые интересные фрагменты самостоятельно. Попробуйте и начните микшировать!
