Reading Sharing Website
Reading Sharing Website

Reading Sharing Website

BookShare is an webpage focused on book information sharing, designed to provide users with an intuitive book browsing experience.

by meihuan zhang meihuan.zhang.24@stu.hainan-biuh.edu.cn

Entertainment

Description

## Project Overview BookShare is a book information sharing platform primarily built with HTML, CSS, and JavaScript. The project adopts a single-page application model, with index.html serving as the core page, combined with the books.json data file and cover images in the images folder, forming a lightweight book display system. ## Project Purpose The main purpose of BookShare is to provide users with an intuitive and user-friendly book browsing and discovery platform. Its original design concept includes three core objectives: recommending excellent books, recording reading notes, and categorizing books. This project aims to help users discover interesting books more efficiently and enhance their reading experience through categorization and recommendation features. ## Core Features 1. **Book Category Browsing**: Offers four main categories - novels, essays, popular science, and fantasy. Users can quickly switch between different book categories via the top navigation bar. The system dynamically displays all books under the selected category and generates a quick list of book titles for that category. 2. **Book Display and Interaction**: Utilizes a responsive card grid layout to display book information. Each card contains a cover image, title, author, and recommendation. It supports the display of popular book recommendations and the latest book list, and implements highlight animation effects for book cards to enhance user experience. 3. **Reading Notes Management**: Supports adding reading note links to specific books. Users can view all books with notes under the "Reading Notes" category and open the corresponding note HTML files in a new tab by clicking. 4. **Data-Driven Design**: Dynamically loads data from the books.json file through the fetch API, separating content from presentation for easier future maintenance and expansion. 5. **Responsive Layout**: Optimizes the interface layout for different device screen sizes, ensuring a good user experience on mobile devices as well.

Desktop Homepage

Desktop Screenshot

Mobile Homepage

Mobile Screenshot

Open Graph Image

Open Graph Image

Favicon

Favicon