Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add book recommendation #4994

Merged
merged 2 commits into from
Nov 10, 2024
Merged

add book recommendation #4994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2291ac
Feat: random book recommendation #4993
jainaryan04 Nov 10, 2024
69551bb
Merge branch 'anuragverma108:main' into patch-1
jainaryan04 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions book.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const books = [
{
title: "To Kill a Mockingbird",
author: "Harper Lee",
genre: "Fiction",
description: "A novel about racial injustice in the Deep South."
},
{
title: "1984",
author: "George Orwell",
genre: "Dystopian",
description: "A totalitarian regime uses surveillance to control its citizens."
},
{
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
genre: "Classic",
description: "A story of love, wealth, and social change in the 1920s."
},
{
title: "The Catcher in the Rye",
author: "J.D. Salinger",
genre: "Fiction",
description: "A young man struggles with the pressures of adulthood."
}
];

document.getElementById("recommend-btn").addEventListener("click", function() {
const randomIndex = Math.floor(Math.random() * books.length);
const book = books[randomIndex];

document.getElementById("book-title").textContent = book.title;
document.getElementById("book-author").textContent = `Author: ${book.author}`;
document.getElementById("book-genre").textContent = `Genre: ${book.genre}`;
document.getElementById("book-description").textContent = book.description;

document.getElementById("book-info").style.display = "block";
});

26 changes: 26 additions & 0 deletions bookrec.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Recommendations</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="book-container">
<!-- Back Button -->
<button id="back-btn" onclick="window.history.back()">Go Back</button>

<button id="recommend-btn">Get Random Book Recommendation</button>

<div id="book-info" class="book-info">
<h2 id="book-title">Title</h2>
<p id="book-author">Author</p>
<p id="book-genre">Genre</p>
<p id="book-description">Description</p>
</div>
</div>

<script src="book.js"></script>
</body>
</html>
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4200,6 +4200,9 @@ <h1 class="h1 hero-title" id="h1-hero-title-1" style="color: var(--text-color);"
Discover
a world where books find new adventures and readers connect through the joy of sharing stories.
</p>
<button onclick="window.location.href='./bookrec.html'">
Book Recommendation
</button>
<div class="container hero-button">
<button class="play-btn" aria-label="play video" onclick="window.location.href='./playNow.html'">
<ion-icon name="play-outline" aria-hidden="true"></ion-icon>
Expand Down
106 changes: 106 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f8ff;
text-align: center;
margin: 50px;
padding: 0;
}

.book-container {
margin-top: 50px;
}

button {
padding: 12px 30px;
font-size: 18px;
font-weight: 600;
background-color: #FF6F61;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

button:hover {
background-color: #FFB03B;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.book-info {
margin-top: 20px;
border: 2px solid #FF6F61;
padding: 20px;
border-radius: 12px;
background-color: #fff7f1;
display: none;
text-align: left;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 28px;
color: #FF6F61;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}

p {
font-size: 18px;
color: #333;
line-height: 1.5;
}

button:focus {
outline: none;
box-shadow: 0 0 8px rgba(255, 111, 97, 0.6);
}

.book-info {
animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

#back-btn {
padding: 12px 30px;
font-size: 18px;
font-weight: 600;
background-color: #FF6F61;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

#back-btn:hover {
background-color: #FFB03B;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Loading