Web-based HTML Presentation Builder

Introduction

In this project, you will learn how to create a web-based PowerPoint (PPT) presentation using front-end technologies. This type of PPT is more convenient for dissemination and viewing, and can make full use of the layout and interaction capabilities of front-end technologies.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to implement the switchPage function to switch between PPT pages
• How to handle user input, such as keyboard presses and button clicks, to navigate through the PPT pages
• How to implement the goLeft and goRight functions to handle the navigation between the PPT pages
• How to add content to the PPT slides to teach basic HTML knowledge

🏆 Achievements

After completing this project, you will be able to:

• Create a web-based PowerPoint (PPT) presentation using front-end technologies
• Manipulate the DOM to display and hide PPT pages
• Handle user input and update the UI accordingly
• Structure and present HTML-related content in a PPT format

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

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

Where:

• css/style.css is the stylesheet.
• The images folder contains the icons used in the page.
• js/index.js is the JavaScript file for the page.
• js/jquery-3.6.0.min.js is the jQuery file.
• index.html is the main page.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and manually refresh it to see the page.

Implement the switchPage Function

In this step, you will learn how to implement the switchPage function to switch between the PPT pages.

1. Open the js/index.js file.
2. Locate the switchPage function and add the following code:

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}`);
}

Explanation:

• $("section").eq(activeIndex).show().siblings().hide();: This line shows the current page (section) and hides all other pages.
• $(".btn.left").toggleClass("disable", activeIndex === 0);: This line adds the disable class to the "Previous" button when the user is on the first page, and removes the class when the user is on any other page.
• $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: This line adds the disable class to the "Next" button when the user is on the last page, and removes the class when the user is on any other page.
• $(".page").text(${activeIndex + 1} / ${sectionsCount});: This line updates the page number display at the bottom left of the page.

3. Save the js/index.js file.

Now, the switchPage function is implemented, and the page switching functionality should work as expected.

Handle User Input

In this step, you will learn how to handle user input, such as keyboard presses and button clicks, to navigate through the PPT pages.

1. Open the js/index.js file.
2. Locate the event listener code and add the following code:

// 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);

Explanation:

• The first event listener listens for keydown events on the document. When the user presses the space bar or the right arrow key, the goRight() function is called. When the user presses the left arrow key, the goLeft() function is called.
• The second set of event listeners listens for click events on the "Previous" and "Next" buttons. When the user clicks the "Previous" button, the goLeft() function is called. When the user clicks the "Next" button, the goRight() function is called.

3. Save the js/index.js file.

Now, the user input handling is implemented, and the user can navigate through the PPT pages using the keyboard or the buttons.

Implement the goLeft and goRight Functions

In this step, you will learn how to implement the goLeft and goRight functions to handle the navigation between the PPT pages.

1. Open the js/index.js file.
2. Locate the goLeft and goRight functions and add the following code:

// Functions for switching to the next sheet
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Functions for switching the previous sheet
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Explanation:

• The goLeft function checks if the user is on the first page. If so, it returns without doing anything. Otherwise, it decrements the activeIndex variable and calls the switchPage function to update the display.
• The goRight function checks if the user is on the last page. If so, it returns without doing anything. Otherwise, it increments the activeIndex variable and calls the switchPage function to update the display.

3. Save the js/index.js file.

Now, the goLeft and goRight functions are implemented, and the user can navigate through the PPT pages using the keyboard or the buttons.

The final effect of the page should be as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.