Недавно я закончил свой первый проект для буткемпа по кодированию Flatiron, сложная задача для тех, кто изучает программирование онлайн (начиная с нуля!) все восемь недель. Не принимая себя или свои способности к кодированию слишком серьезно, я выбрал Bored API, базу данных, которая предоставляет список действий, если вам когда-нибудь станет скучно. Я решил создать одностраничное приложение, в котором была бы кнопка, генерирующая случайную активность из Bored API, для тех, кто одновременно вялый и немного азартный.

Моей следующей идеей было включить вторую кнопку, которая сохраняла бы текущую случайную активность, сохраняя ее в списке избранного. Эта идея оказалась непростой. Если вы новичок, как и я, получение данных для надежного извлечения из API и их отображения на странице является как самой простой, так и самой сложной задачей. Как только начинается буткемп, занавес поднимается, и все действия в Интернете, которые раньше казались вам такими простыми, на самом деле оказываются более трудоемкими, чем вы могли себе представить. Никто не хочет знать, как делается колбаса.

Переходя от моего глубоко поэтического тангенса, как я, скромный студент-программист, собирался заставить эту работу работать?

Во-первых, я взглянул на функцию, которую использовал для рендеринга одиночной случайной активности на странице.

function renderActivity(randomActivity) {
   container.innerText = ''
   const p = document.createElement("p");
   p.innerText = randomActivity.activity;
   container.appendChild(p);
}

Предыдущий запрос на выборку извлек действие из API, инициированное событием нажатия на кнопку генератора. Возвращаемые данные в формате JSON представляли собой объект, содержащий пары ключ-значение, которые включали не только действие, но и такую ​​информацию, как тип действия, количество людей, требуемых для выполнения действия, и ожидаемую сумму оплаты.

В приведенной выше функции аргумент randomActivity представляет собой весь объект. Я убедился, что div, который будет содержать значение активности, container, оставался пустым как до, так и после сохранения значения. Затем я создал элемент абзаца p, которому будет присвоено значение и который будет вложен в элемент container. Затем я сузил объект randomActivity только до значения, присвоенного ключу activity, что означает, что я хотел, чтобы отображалось только имя действия, а не какая-либо сопутствующая информация. Это значение activity было присвоено innerText только что созданного элемента p. Затем я добавил этот элемент p к элементу div с именем container, отображая активность на странице.

Теперь мне нужно было создать функцию, которая брала бы активность, появляющуюся в данный момент на экране, и добавляла бы ее в список:

function keepActivity() {
   const li = document.createElement(“li”);
   li.innerText = container.firstElementChild.innerText;
   likeContainer.append(li);
}

У функции keepActivity нет аргументов, поскольку она не получает входные данные от предыдущих функций или от API. Когда событие щелчка происходит на вновь созданной кнопке «Сохранить это действие», создается элемент элемента списка li. Значение этого элемента списка берется из DOM, где хранится активность, отображаемая в данный момент на экране (по последней функции). Мне удалось найти нужное мне значение в div с именем container, которое было объявлено как переменная в глобальной области видимости, и определить innerText из p, созданных в последней функции. Я не мог использовать p в пути, потому что p не входил в область действия этой функции, поэтому вместо этого использовал firstElementChild для его идентификации. Это значение было присвоено innerText элемента списка li. Теперь я добавил элемент списка к новому элементу div, созданному с помощью HTML для хранения списка избранного, который называется likeContainer.

Мне было важно различать, на мой взгляд, что входные данные для второй функции поступали из DOM, а не из предыдущей функции. Когда аргумент для keepActivity был innerText элемента p из renderActivity, в списке появлялись все действия, получаемые из API, а не только текущее действие на экране. Это определенно был прорыв для такого новичка, как я!

Не стесняйтесь проверить мой проект здесь.