Борьба с кнопками

Сегодня был первый день моего путешествия в неизвестное неизвестное — в страну JavaScript и фронтенда в целом. Я сделал игровую логику в предыдущие дни, я также сделал это, чтобы веб-сайт мог получать и отправлять сообщения этой игровой логике, но что не сделано, так это реальный способ, которым пользователи могут взаимодействовать с системой. В основном это пустой сайт, если не считать того, что приходит с созданием нового проекта с помощью Phoenix.

Поэтому я попытался решить эту проблему. Я мог пойти как минимум двумя путями. Во-первых — оставить пока этот проект, перейти на какой-нибудь сайт или онлайн-курс, где я смогу узнать о html, CSS и JavaScript или во-вторых — поискать то, что мне понадобится по ходу дела. На этот раз я попытался пойти со вторым вариантом. Казалось, что я смогу быстрее наладить работу, я не буду тратить время на вещи, которые мне не нужны. И я все еще это правда, но… Есть такое «но» — если вы не будете следовать какому-то туториалу, книге или другому курсу, то иногда можете врезаться в стену. Может стать еще хуже, если вы не знаете никого, кому было бы удобно спросить о своей проблеме. Именно это и произошло со мной, когда я захотел создать две сетки 10 на 10 кнопок. Я имею в виду, что я мог бы просто вручную написать строки для каждой кнопки. Так что будет 200 строк. Но я подумал, что это, вероятно, не так, как это должно быть сделано. Должен быть способ создать n кнопок, если они будут делать одно и то же. И поэтому я попытался.

В начале я пытался использовать свои знания из других языков программирования, некоторые для создания кнопок, добавления их куда-то — мне удалось создать 10 не очень хорошо выглядящих кнопок, которые были расположены в другом месте, чем я хотел. Я искал лучшие способы на stackoverflow и других сайтах, которые мне показывали, но, ну… я не сделал ничего большего.

JavaScript в Фениксе

Еще один большой вопрос для меня на весь день заключался в том, как файлы JavaScript работают с Phoenix, потому что я мог видеть что-то, написанное на консоли, если я печатал это в коде js, но когда я пытался использовать некоторые функции в консоли, он не мог найти никакой ссылки . Поэтому я комментировал и раскомментировал части кода, сгенерированного Phoenix. До сих пор не знаю, как все это взаимодействует, но я ближе к поиску ответа.

Я остановился на секунду, затем сделал пару шагов назад, чтобы просто использовать код JavaScript любым способом — поэтому я создал кнопку, и если вы сначала нажали на нее, она напечатала «привет» в консоль, но затем я попытался подключить ее с функциями из игровой логики, и они тоже работали. К сожалению, это было после нескольких часов борьбы с кнопками, поэтому у меня не хватило сил, чтобы сделать больше.

CSS-сетки

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

Из того, что я узнал сегодня, сетки — это конструкция, которая может помочь разработчикам перемещать части веб-сайтов определенным образом. Они работают как контейнер, в котором вы можете изменять длину, ширину и положение строительных блоков вашего сайта. Например, если у вас есть 4 блока текста — если вы поместите их в сетку CSS, вы сможете сказать, что хотите, чтобы эти 4 блока представляли собой квадрат 2 на 2, каждый одинакового размера, но если вы хотите, чтобы вы сможет сказать, что вам нужен один большой блок вверху, который заполнил бы всю строку (слева направо от этой сетки), и 3 других блока под ним, каждый из которых занимает только 1/3 строки.

Я думал, что эти знания в конечном итоге помогут мне достичь моей цели с кнопками — так что будет две сетки кнопок 10 на 10, но для этого мне еще нужно подождать.

Последние мысли

Я заканчиваю этот день более или менее счастливым — счастливым, потому что я чему-то научился, но человек застрял в разочаровании. Я не знаю, когда я займусь этой проблемой, потому что в течение следующей недели мне, вероятно, придется сидеть над своим проектом третьего курса, чтобы решительно закончить программную часть. Если вы знаете и можете порекомендовать какое-либо место для изучения JavaScript и того, как правильно использовать его в веб-разработке, я с удовольствием выслушаю его и проверю.