Scribd
Upload
20 views

Code

Uploaded by

Mae Ravell Kaye Raby
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

Code

Uploaded by

Mae Ravell Kaye Raby
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Interactive Books</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

.book {

width: 200px;

height: 300px;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 5px;

margin: 10px;
padding: 20px;

text-align: center;

cursor: pointer;

transition: transform 0.3s ease;

.book:hover {

transform: scale(1.05);

.hidden {

display: none;

.page {

padding: 10px;

margin: 10px;

background-color: #f9f9f9;

border: 1px solid #ddd;

border-radius: 5px;

</style>

</head>

<body>

<div class="book" onclick="showContents('book1')">Book 1</div>

<div class="book" onclick="showContents('book2')">Book 2</div>


<div id="book1" class="hidden">

<h2>Book 1 Contents</h2>

<div class="page">Page 1: Introduction</div>

<div class="page">Page 2: Chapter 1</div>

<div class="page">Page 3: Chapter 2</div>

</div>

<div id="book2" class="hidden">

<h2>Book 2 Contents</h2>

<div class="page">Page 1: Preface</div>

<div class="page">Page 2: Chapter 1</div>

<div class="page">Page 3: Chapter 2</div>

</div>

<script>

function showContents(id) {

var content = document.getElementById(id);

if (content.classList.contains('hidden')) {

content.classList.remove('hidden');

} else {

content.classList.add('hidden');

</script>
</body>

</html>
Html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Books Library</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="book" onclick="openBook('book1')">Book 1</div>

<div class="book" onclick="openBook('book2')">Book 2</div>

<div id="bookContent" class="hidden">

<h2 id="bookTitle"></h2>

<div id="bookPages"></div>

<a id="downloadLink" href="#" download>Download</a>

</div>

<script src="script.js"></script>

</body>

</html>
Css

.hidden {

display: none;

.book {

cursor: pointer;

padding: 10px;

margin: 5px;

background-color: #f0f0f0;

border: 1px solid #ccc;

border-radius: 5px;

#bookContent {

margin-top: 20px;

#bookPages {

margin-top: 10px;

#downloadLink {

display: block;

margin-top: 10px;
}

Script.js

function openBook(bookName) {

var bookTitle = document.getElementById('bookTitle');

var bookPages = document.getElementById('bookPages');

var downloadLink = document.getElementById('downloadLink');

if (bookName === 'book1') {

bookTitle.textContent = 'Book 1';

bookPages.innerHTML = 'This is the content of Book 1.';

downloadLink.href = 'book1.pdf'; // Provide the path to the PDF file of Book 1

} else if (bookName === 'book2') {

bookTitle.textContent = 'Book 2';

bookPages.innerHTML = 'This is the content of Book 2.';

downloadLink.href = 'book2.pdf'; // Provide the path to the PDF file of Book 2

var bookContent = document.getElementById('bookContent');

bookContent.classList.remove('hidden');

You might also like