Веб-ориентированный билдер презентаций HTML

Введение

В этом проекте вы научитесь создавать веб-основанную презентацию PowerPoint (PPT) с использованием фронтенд-технологий. Этот тип PPT более удобен для распространения и просмотра и позволяет充分利用充分利用 фронтенд-технологий.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как реализовать функцию switchPage для переключения между страницами PPT
• Как обрабатывать пользовательский ввод, такой как нажатия клавиш и нажатия кнопок, для навигации по страницам PPT
• Как реализовать функции goLeft и goRight для обработки навигации между страницами PPT
• Как добавить содержимое на слайды PPT для обучения основам HTML

🏆 Достижения

После завершения этого проекта вы сможете:

• Создавать веб-основанную презентацию PowerPoint (PPT) с использованием фронтенд-технологий
• Управлять DOM для отображения и скрытия страниц PPT
• Обрабатывать пользовательский ввод и соответствующим образом обновлять UI
• Структурировать и представлять HTML-связанные контент в формате PPT

Настройка структуры проекта

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

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

где:

• css/style.css — это таблица стилей.
• В папке images находятся иконки, используемые на странице.
• js/index.js — это JavaScript-файл для страницы.
• js/jquery-3.6.0.min.js — это jQuery-файл.
• index.html — главная страница.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Реализовать функцию switchPage

В этом шаге вы научитесь реализовывать функцию switchPage для переключения между страницами PPT.

1. Откройте файл js/index.js.
2. Найдите функцию switchPage и добавьте следующий код:

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

Пояснение:

• $("section").eq(activeIndex).show().siblings().hide();: Эта строка показывает текущую страницу (раздел) и скрывает все другие страницы.
• $(".btn.left").toggleClass("disable", activeIndex === 0);: Эта строка добавляет класс disable к кнопке "Предыдущая", когда пользователь находится на первой странице, и удаляет класс, когда пользователь находится на любой другой странице.
• $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: Эта строка добавляет класс disable к кнопке "Следующая", когда пользователь находится на последней странице, и удаляет класс, когда пользователь находится на любой другой странице.
• $(".page").text(${activeIndex + 1} / ${sectionsCount});: Эта строка обновляет отображение номера страницы в нижнем левом углу страницы.

3. Сохраните файл js/index.js.

Теперь функция switchPage реализована, и функциональность переключения страниц должна работать как ожидается.

Обработка ввода пользователя

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

1. Откройте файл js/index.js.
2. Найдите код обработчика событий и добавьте следующий код:

// Listening for user presses of the space and arrow keys
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Listening to button click events
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

Пояснение:

• Первый обработчик событий слушает события keydown на документе. Когда пользователь нажимает пробел или стрелку вправо, вызывается функция goRight(). Когда пользователь нажимает стрелку влево, вызывается функция goLeft().
• Вторая группа обработчиков событий слушает события click на кнопках "Предыдущая" и "Следующая". Когда пользователь нажимает кнопку "Предыдущая", вызывается функция goLeft(). Когда пользователь нажимает кнопку "Следующая", вызывается функция goRight().

3. Сохраните файл js/index.js.

Теперь обработка пользовательского ввода реализована, и пользователь может навигаться по страницам PPT с помощью клавиатуры или кнопок.

Реализовать функции goLeft и goRight

В этом шаге вы научитесь реализовывать функции goLeft и goRight для обработки навигации между страницами PPT.

1. Откройте файл js/index.js.
2. Найдите функции goLeft и goRight и добавьте следующий код:

// Функции для перехода на следующую страницу
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Функции для перехода на предыдущую страницу
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Пояснение:

• Функция goLeft проверяет, находится ли пользователь на первой странице. Если да, то возвращается без выполнения действий. В противном случае переменная activeIndex уменьшается на 1, и вызывается функция switchPage для обновления отображения.
• Функция goRight проверяет, находится ли пользователь на последней странице. Если да, то возвращается без выполнения действий. В противном случае переменная activeIndex увеличивается на 1, и вызывается функция switchPage для обновления отображения.

3. Сохраните файл js/index.js.

Теперь функции goLeft и goRight реализованы, и пользователь может навигаться по страницам PPT с помощью клавиатуры или кнопок.

Финальный эффект страницы должен быть следующим:

Резюме

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