Build a Vue.js E-book Reader

Introduction

In this project, you will learn how to build a simple e-book reader using Vue 2.x. The e-book reader will allow users to toggle the visibility of the header toolbar, set the reading theme, and adjust the font size of the text content.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to implement the toggle of the header toolbar's visibility
• How to implement the setting of the reading theme
• How to implement the setting of the font size

🏆 Achievements

After completing this project, you will be able to:

• Use Vue.js to create interactive user interfaces
• Handle user interactions and update the UI accordingly
• Dynamically style elements based on user preferences
• Ensure the application remains responsive and accessible

Skills Graph

Implement the Toggle of the Header Toolbar’s Visibility

To get started, look at the directory structure of the files on the left as follows:

├── index.html
├── css
└── js
    └── vue.js

Where:

• index.html is the main page and the next file you need to modify.
• css is the folder for style files.
• js/vue.js is the Vue 2.x file.

Next you do everything in the index.html file.

In this step, you will learn how to implement the toggle of the header toolbar's visibility. Follow the steps below to complete this step:

1. Open the index.html file, define the variable isShowTools in data under el: "#app" to control the display of the header toolbar, with a default value of true to show the header toolbar.

data: {
  isShowTools: true,
  // ...
}

2. Wrap the header toolbar content (the <div class="header"> element) in a <transition> element with the v-if directive, binding it to the isShowTools data property. This will ensure that the header toolbar is only visible when isShowTools is true.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- header toolbar content -->
  </div>
</transition>

3. In the index.html file, locate the <a> element with the class iconfont icon-setting. This element is used to toggle the visibility of the header toolbar.
4. Add a @click directive to the <a> element, and bind it to a showTools method in the Vue instance. This method will toggle the isShowTools data property, which controls the visibility of the header toolbar.

<a @click="showTools" class="iconfont icon-setting"></a>

5. In the Vue instance, add the showTools method to the methods object. This method should toggle the value of the isShowTools data property.

methods: {
  showTools() {
    this.isShowTools = !this.isShowTools;
  },
}

6. Add a close icon to the header toolbar, and bind a @click directive to the showTools method to allow the user to close the header toolbar.

<li class="container">
  <a @click="showTools" class="iconfont icon-close"></a>
</li>

Implement the Setting of the Reading Theme

In this step, you will learn how to implement the setting of the reading theme. Follow the steps below to complete this step:

1. Define the variable isActiveColor in the data under el: "#app" and set the default value to 0, i.e. the default background color is the first selected color. In the index.html file, locate the <div class="right" id="setBG"> element. This is where the circular color blocks for the reading theme will be displayed.

data: {
  isActiveColor: 0,
  // ...
}

2. Use a v-for directive to loop through the bgList data property, which contains the list of theme colors. For each color, create an <a> element with a @click directive that calls the changeColor method, passing the current index as an argument.

<div class="right" id="setBG">
  <a
    @click="changeColor(index)"
    v-for="(item,index) in bgList"
    :style="{'background-color':item}"
    :class="{'iconfont':true,'icon-selected':index==isActiveColor}"
  ></a>
</div>

3. In the Vue instance, add the changeColor method to the methods object. This method should update the isActiveColor data property with the index of the selected color block.

methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}

4. In the <p> element with the class text-content, use the :style directive to dynamically set the background color and font color based on the selected theme color.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4 ? '#ffffff' : '#333333'
  }"
>
  <!-- content -->
</p>

Implement the Setting of the Font Size

In this step, you will learn how to implement the setting of the font size. Follow the steps below to complete this step:

1. Define the variable "fontSize" in data under el: "#app" and set the default value to "18". In the index.html file, locate the <div class="set-font"> element. This is where the font size controls will be displayed.

data: {
  fontSize: 18,
  // ...
}

2. Locate <span class="lang">18</span> and change 18 to the fontSize variable.

<span class="lang">{{ fontSize }}</span>

3. Add @click directives to the "A-" and "A+" buttons, binding them to the updateFontSize method in the Vue instance. Pass a boolean value to indicate whether the font size should be increased or decreased.

<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>

4. In the Vue instance, add the updateFontSize method to the methods object. This method should update the fontSize data property, ensuring that the font size stays within the range of 12px to 48px.

methods: {
  updateFontSize(flag) {
    if (flag) {
      if (this.fontSize < 48) {
        this.fontSize += 2;
      }
    } else {
      if (this.fontSize > 12) {
        this.fontSize -= 2;
      }
    }
  }
}

5. In the <p> element with the class text-content, use the :style directive to dynamically set the font size and line height based on the fontSize data property.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4 ? '#ffffff' : '#333333',
    'font-size': `${fontSize}px`,
    'line-height': `${fontSize + 10}px`
  }"
>
  <!-- content -->
</p>

By following these steps, you have completed the implementation of the e-book reader features, including the toggle of the header toolbar's visibility, the setting of the reading theme, and the setting of the font size.

Next, click on Go Live button in the bottom right corner of WebIDE, to run the project. Open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Summary

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