Время от времени у меня возникает зудящее желание написать что-нибудь, а потом сожалеть об этом и думать, что я слишком много думаю о себе, но все равно. Для этого и существует Интернет, верно?

Итак, я подумал — почему бы не сделать какую-то рамку для возможного текста/рассказа и проверить, что я могу сделать без туториалов или конкретных примеров того, как сделать приложение для чтения и т. д.

/* Это не руководство. Просто некоторые мысли о том, как я подходил к делу, не используя никаких руководств и делая все, используя первое решение, которое приходит на ум. */

В итоге получилось вот так (ничего особенного, ага). Но, по крайней мере, я сделал это сам (в этом тоже нет ничего особенного). А репозиторий со всем кодом можно найти здесь.

Я использовал Bootstrap для одного из проектов курса, на котором я сейчас учусь, и подумал, что могу попрактиковаться с ним еще немного, поэтому CSS-работы не было. Вся стилизация происходит через Bootstrap (устанавливается через CDN).

По сути, он состоит из трех HTML-страниц (оглавление, история и информация), JSON-файла для размещения истории и файла JavaScript для реализации функциональности.

Страницы имеют одинаковый шапку и футер, а JS-скрипт используется только для истории (страницы index и about не делают ничего, связанного с JS).

Я просто хотел загрузить весь текст в один файл, чтобы не создавать для каждой главы отдельную HTML-страницу. Итак, я сделал JSON-файл и поместил его туда в виде массива объектов с двумя ключами в каждом — название главы и содержание главы. Затем я экспортировал его и использовал в JS-файле.

Мне нужна была следующая функциональность для страницы: навигация назад и вперед (кнопки предыдущей и следующей глав) и навигация по главам (чтобы к любой главе можно было получить доступ из выпадающего меню.

Сначала я некоторое время бился головой о стену и писал для каждого отдельную функцию. Выглядело это так (показал это, чтобы посмеяться над собой, так как позже это было изменено):

И это:

И так как я устал и хотел спать, то вместо того, чтобы лечь спать, я начал писать кучу таких функций и после каждой оставлять такие комментарии:

Тогда я, наконец, решил назвать это днем ​​и проверить это позже.

Кто бы мог подумать, это помогло. На следующий день я переделал его на эти две функции и прослушиватели событий для кнопок (проще проверить код через репозиторий, приведенный ранее, скрины здесь просто для справки):

  • Код для уменьшения/увеличения количества страниц

  • Код для нажатия кнопок «предыдущий/следующий»

А потом я просто поместил ссылку на каждую главу в выпадающее меню, сделал цикл по ним и добавил ссылку:

Итак, в итоге получилось две функции, два прослушивателя событий и цикл for с другим прослушивателем событий (вместо 10+ функций). Я предполагаю, что пытаться кодировать некоторые личные проекты после дня кодирования — не всегда хорошая идея, и немного отдыха помогает.

Не то чтобы я горжусь этой странной штуковиной, но, по крайней мере, я сделал ее сам, и странным образом она выполняет свою работу (рассказ можно прочитать, и я, наконец, могу отложить его в сторону и перестать думать о нем) .

Если ты дочитал это до конца и не уснул и до сих пор не сердишься на меня, то я благодарю тебя, добрый человек.