Время от времени у меня возникает зудящее желание написать что-нибудь, а потом сожалеть об этом и думать, что я слишком много думаю о себе, но все равно. Для этого и существует Интернет, верно?
Итак, я подумал — почему бы не сделать какую-то рамку для возможного текста/рассказа и проверить, что я могу сделать без туториалов или конкретных примеров того, как сделать приложение для чтения и т. д.
/* Это не руководство. Просто некоторые мысли о том, как я подходил к делу, не используя никаких руководств и делая все, используя первое решение, которое приходит на ум. */
В итоге получилось вот так (ничего особенного, ага). Но, по крайней мере, я сделал это сам (в этом тоже нет ничего особенного). А репозиторий со всем кодом можно найти здесь.
Я использовал Bootstrap для одного из проектов курса, на котором я сейчас учусь, и подумал, что могу попрактиковаться с ним еще немного, поэтому CSS-работы не было. Вся стилизация происходит через Bootstrap (устанавливается через CDN).
По сути, он состоит из трех HTML-страниц (оглавление, история и информация), JSON-файла для размещения истории и файла JavaScript для реализации функциональности.
Страницы имеют одинаковый шапку и футер, а JS-скрипт используется только для истории (страницы index и about не делают ничего, связанного с JS).
Я просто хотел загрузить весь текст в один файл, чтобы не создавать для каждой главы отдельную HTML-страницу. Итак, я сделал JSON-файл и поместил его туда в виде массива объектов с двумя ключами в каждом — название главы и содержание главы. Затем я экспортировал его и использовал в JS-файле.
Мне нужна была следующая функциональность для страницы: навигация назад и вперед (кнопки предыдущей и следующей глав) и навигация по главам (чтобы к любой главе можно было получить доступ из выпадающего меню.
Сначала я некоторое время бился головой о стену и писал для каждого отдельную функцию. Выглядело это так (показал это, чтобы посмеяться над собой, так как позже это было изменено):
И это:
И так как я устал и хотел спать, то вместо того, чтобы лечь спать, я начал писать кучу таких функций и после каждой оставлять такие комментарии:
Тогда я, наконец, решил назвать это днем и проверить это позже.
Кто бы мог подумать, это помогло. На следующий день я переделал его на эти две функции и прослушиватели событий для кнопок (проще проверить код через репозиторий, приведенный ранее, скрины здесь просто для справки):
- Код для уменьшения/увеличения количества страниц
- Код для нажатия кнопок «предыдущий/следующий»
А потом я просто поместил ссылку на каждую главу в выпадающее меню, сделал цикл по ним и добавил ссылку:
Итак, в итоге получилось две функции, два прослушивателя событий и цикл for с другим прослушивателем событий (вместо 10+ функций). Я предполагаю, что пытаться кодировать некоторые личные проекты после дня кодирования — не всегда хорошая идея, и немного отдыха помогает.
Не то чтобы я горжусь этой странной штуковиной, но, по крайней мере, я сделал ее сам, и странным образом она выполняет свою работу (рассказ можно прочитать, и я, наконец, могу отложить его в сторону и перестать думать о нем) .
Если ты дочитал это до конца и не уснул и до сих пор не сердишься на меня, то я благодарю тебя, добрый человек.