Мой репозиторий: https://github.com/ferrufinob/StudyNook-frontend

Короткая демонстрация:

Недавно я создал свое первое веб-приложение с использованием JavaScript для школы Flatiron. Никогда не прикасаясь к JavaScript и услышав, как трудно учиться, я нервничал, когда пришло время запускать модуль 4. Для этого приложения я использовал бэкэнд Rails API и JavaScript для моего внешнего интерфейса, который использовал классы и асинхронно обрабатывал все взаимодействия между бэкэндом и внешний интерфейс.

Приложение, которое я разработал, представляет собой приложение с карточками, в котором отображаются названия всех модулей, которые я закончил в школе Flatiron, и других модулей, которые я хочу начать изучать (Ruby, Rails, JavaScript, Data Structures и Algorithms). Мне было очень трудно решить, что строить, поэтому я решил создать приложение для того, чем я часто занимаюсь: записи карточек.

Бэкенд

Для бэкенда я выбрал две модели. В колоде много карт, а карта принадлежит колоде.

Внешняя структура

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

Самой сложной частью этого проекта был запрос PATCH для моей модели карты, было много шагов, и я потерялся, даже не зная, с чего начать. Поэтому я разобью его, чтобы иметь в качестве справочного материала для себя в будущем или помочь любому, кто может застрять.

Шаг 1. Прислушайтесь к событию

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

#edit button
if (e.target.classList.contains("editBtn")) {
			console.log("edit button clicked")
      this.createEditFields(e.target);
}
#Save button
this.card.addEventListener("submit", this.submitEditForm);
submitEditForm = (e) => {
    e.preventDefault();
    console.log("edit form save button clicked")
    const cardId = e.target.dataset.id;
    cardApi.patchCard(cardId);
  };

Я решил прикрепить свой прослушиватель событий к карте, как только он будет прикреплен к DOM. У карты не было другого события отправки или формы для прослушивания, поэтому она обрабатывала только отправку формы редактирования.

Шаг 2. Замените раздел карточки на раздел формы, в котором будут отображаться поля для редактирования.

Я использую событие, переданное методом handleClick, который был кнопкой редактирования.

Теперь нам просто нужно прикрепить поля текстовой области формы, которые будут отображать текущий внутренний текст карты, на которую нажали. Для заполнения полей текстовой области мы получаем элемент, вызывающий событие. Я использовал editBtn.contains(“.card”), чтобы просмотреть DOM и найти родителя этой кнопки.

createEditFields = (editBtn) => {
    const card = editBtn.closest(".card");
    const front = card.querySelector(".cardFront h2").innerText;
    const back = card.querySelector(".cardBack p").innerText;
    this.card.innerHTML = `
    <form class="update-form" data-id="${this.id}">
    <label for="front">Question</label>
    <textarea name="front" class="update-front-${this.id}" value="${front}">${front}</textarea>
    <label for="back">Answer</label>
    <textarea name="back" class="update-back-${this.id}" value="${back}">${back}</textarea>
    <input type="submit" name="submit" value="SAVE" class="saveBtn" data-id="${this.id}">
    <form>
    `;
  };

Шаг 3. Выберите входные данные

Эти входные данные — это то, что мы сохраним на нашем сервере, и их также нужно будет отображать на нашем внешнем интерфейсе.

# Card Patch
const front = document.querySelector(`.update-front-${cardId}`).value;
const back = document.querySelector(`.update-back-${cardId}`).value;

Шаг 4. Запрос исправления

Здесь нам нужно сохранить информацию в нашу базу данных. В нашем запросе PATCH возьмите выбранный нами ввод из нашей формы редактирования и включите эти данные в тело HTTP-сообщения. (Данные нужно будет преобразовать обратно в строку).

let cardObj = {
      front: front,
      back: back,
    };
body: JSON.stringify(cardObj),

Шаг 5. Добавьте в DOM!

После того, как серверная сторона позаботится, нам нужно отобразить эти изменения в DOM. Во-первых, нам нужно использовать .json() после того, как мы получим тело ответа от нашего промиса, чтобы оно было в формате, который наш интерфейс может легко понять. Поскольку мы обновляем уже существующую карту, а не создаем новую, нам нужно найти идентификатор и отрендерить эту карту с данными, которые мы получили из нашего второго обещания. Однако нам нужно распаковать эти данные, используя назначение деструктурирования, которое обеспечит более чистый и аккуратный способ извлечения данных из наших объектов.

#destructuring
renderUpdatedCard = ({ front, back }) => {
    this.front = front;
    this.back = back;
    this.renderHTML();
  };
#after promise
let findCard = Card.findById(card.data.id);
findCard.renderUpdatedCard(card.data.attributes);

Несмотря на то, что это небольшое приложение, я почувствовал себя превосходно, когда оно заработало. За плечами у меня 6 недель JavaScript, и это только начало. Я далеко не на том уровне, на котором хотел бы быть со своими знаниями JavaScript, мне еще так многому предстоит научиться!!!

Отличный ресурс, который действительно помог мне понять запросы на получение и обещания: https://www.youtube.com/user/shiffman.

Отличный плейлист, который помогает объяснить, как код выполняется под капотом в Javascript: https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP

Любая конструктивная критика, которая может помочь мне стать лучшим программистом или в моем приложении, очень ценится 😊.