Автор оригинала: FreeCodeCamp Community Member.
Айо Исаия
Я действительно не совсем доволен моим Первая попытка При построении генератора случайных цитатов на бесплатный код лагеря. Это было уродливо, и цитаты были слишком длинными, поэтому я не решил реализовать функциональность «Tweet». Это просто не имело никакого смысла сделать это.
Так после того, как я закончил с Pomodoro Clock Project Я почувствовал сильное желание пересматривать мою машину случайной цитаты и начать с другим подходом.
Я хотел более интересный дизайн, с несколькими анимацией. У меня также была эта идея поставить цитаты в разные категории, чтобы пользователи могли просматривать цитаты из своих любимых категорий.
Мои экзамены были закончены, поэтому у меня было достаточно времени на руках, чтобы закончить его.
Логика
Я поселился на восьми категориях для цитат и собрал 25 цитатов для каждого. Каждая категория была массивом объектов с цитатой и автором свойства, чтобы я мог легко получить каждый.
Затем я сделал функцию, чтобы поставить цитаты в HTML после нажатия кнопки следующей цитаты и аналогичная функция для кнопки «Предыдущая цитата».
Если вы посмотрите на код, вы увидите, что цитаты вообще не генерируются случайно, но вместо этого они повторяют от первого до последнего и обратно. Это намеренный выбор дизайна, который я сделал.
Дизайн
Что мне раздражало больше всего в том, что первая попытка была даже не очень, как это сработало, но как это выглядело. Таким образом, дизайн был то, насколько я сосредоточился по большей части в этом проекте.
Первое, что я сделал, должен был прочитать все то, что я хотел, чтобы мое приложение делать и как я хотел, чтобы это посмотреть. Со временем я узнал, что лучший способ подойти к чему-либо – это сломать его в простых действий, так что это то, что я здесь сделал, используя Рабочий процесс Отказ
Я всегда использовал Скелет CSS Boilerplate Всякий раз, когда я хочу сделать планировку на основе сетки, поэтому я продолжал с ним для этого.
На этот раз я использовал Sass версия Что позволило легко изменить несколько переменных и немного настроить его, не касаясь исходных файлов.
Как только это было на месте, я начал работу на дизайне посадочной страницы. В глазу моего разума я хотел 2×4 сетку с картами для каждого сечения и заголовок наверху. Это было достаточно легко.
БАМ! У меня была моя сетка на месте. Следующая вещь было выяснить, как я собирался стирать страницу цитаты и использовать анимацию для переключения между обеих страниц.
Страница цитат взяла меня немного больше времени, чтобы закончить. У меня была навигационная панель на вершине для переключения между разделами и коробкой в середине, где будут отображаться цитаты. Кнопки, чтобы показать цитаты, были внизу.
Идея, которая вскочила в голову на данный момент, заключалась в том, чтобы изменить фоновое изображение, так как пользователь перемещается между разделами. Фоновое изображение было соответствовать избранным изображению в карточках на домашней странице.
Я также хотел, чтобы изменения были гладкими с тонкой анимацией, поэтому я использовал свойство CSS-перехода для этой цели, и он хорошо работал на Chrome, но я не мог заставить его работать на Firefox (если кто-нибудь знает, как это исправить, пожалуйста, пусть мне знать).
Как только у меня оба макета сортировались, пришло время связать две страницы с анимацией. Моя первая мысль должна была использовать анимацию CSS, но я никуда не получил, поэтому я вместо этого искал анимацию jQuery. После некоторых экспериментов я нашел то, что хочу. Функции Slideup () Andslidedown () были идеальными для того, что мне нужно.
В основном, как только вы нажмете на любую из разделов на главной странице, страница кавычек будет просмотреть в поле зрения, и вы можете просмотреть цитаты из разных разделов. Точно так же, когда вы нажимаете на домашнюю кнопку на панели навигации, страница скользит вниз, чтобы показать домашнюю страницу.
Так что это было.
Все, что я сделал с этого момента, было заменить изображения заполнителя реальными изображениями и использовать некоторые шрифты Google для ели. Наконец, я сделал кнопку Tweet.
Вы можете просмотреть Окончательная версия на кодепене.
Уроки выучены
В ходе работы над этим проектом я узнал несколько ценных уроков:
- В некоторых случаях использование фоновых изображений может дать вам больше контроля и более гибкости с изображениями разной высоты, потому что вы можете установить фоновый размер: крышка, и она не переполняет контейнер. Кроме того, вы можете создать несколько прохладных эффектов наводчика, например, я делал с показанными изображениями на целевой странице. Я не всегда знал это, но кто-то на CodeNewie Slack Group указывал на это мне.
- Я также узнал, как сломать свои файлы SASS начасты и импортировать их в основную таблицу стилей. Это помогает для организации и облегчает крепление. У меня есть рабочая архитектура, которую я использую, и она не идеальна, но я улучшусь с течением времени.
Я буду любить услышать ваши мысли о моем подходе и то, что я могу улучшить, так что комментарий или два будут очень оценены.
Следующий
Я буду работать над « показать местную погоду » в эти выходные, и я надеюсь, что это сделано в воскресенье. Это будет мой первый реальный опыт с использованием API, и я надеюсь, что у меня достаточно быстро.
Я напишу аналогичный пост на этом проекте на следующей неделе, поэтому следи за этим.
Если вы хотите протянуть или связаться со мной, вы можете найти меня на Twitter или напишите мне Отказ
Версия этого поста была опубликована на моем личный блог