-
Notifications
You must be signed in to change notification settings - Fork 235
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into Issue(#283)
- Loading branch information
Showing
33 changed files
with
1,858 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| REACT_APP_NY_TIMES_APIKEY=get_Your_NYTimes_APIKEY |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Action Books</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 20px; | ||
| background-color: #f4f4f4; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| color: #007bff; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .category-title { | ||
| background-color: darkblue; | ||
| color: white; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .book-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .book { | ||
| margin: 10px; | ||
| background: #fff; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | ||
| flex: 1 1 calc(45% - 20px); /* Two books per row */ | ||
| max-width: calc(45% - 20px); /* Two books per row */ | ||
| } | ||
|
|
||
| .book h4 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .button { | ||
| background-color: #1b6f4c; | ||
| color: white; | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| display: block; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .button:hover { | ||
| background-color: #f7b7a8; | ||
| } | ||
|
|
||
| footer { | ||
| text-align: center; | ||
| padding: 20px; | ||
| background: #333; | ||
| color: white; | ||
| position: relative; | ||
| bottom: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .description { | ||
| color: #555; | ||
| margin-top: 5px; | ||
| font-size: 14px; | ||
| } | ||
| div{ | ||
| box-shadow:10px 10px rgb(214, 230, 4) ; | ||
| } | ||
| div:hover{ | ||
| color: #f45e13; | ||
| background-color: #007bff; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body > | ||
|
|
||
|
|
||
| <div class="category-title"> <h2>Action Books</h2></div> | ||
| <div id="book-list" class="book-list"></div> | ||
|
|
||
| <script> | ||
| const fetchBooks = async () => { | ||
| const response = await fetch('https://openlibrary.org/subjects/action.json?limit=50'); | ||
| const data = await response.json(); | ||
| return data.works; | ||
| }; | ||
|
|
||
| const showBooks = async () => { | ||
| const actionBooks = await fetchBooks(); | ||
| const bookList = document.getElementById('book-list'); | ||
| actionBooks.forEach(book => { | ||
| const bookDiv = document.createElement('div'); | ||
| bookDiv.className = 'book'; | ||
| bookDiv.innerHTML = ` | ||
| <h4>${book.title}</h4> | ||
| <p><strong>Author:</strong> ${book.authors.map(author => author.name).join(", ")}</p> | ||
| <p><strong>Cost:</strong> $${Math.floor(Math.random() * 20) + 10} (estimated price)</p> | ||
| `; | ||
| bookList.appendChild(bookDiv); | ||
| }); | ||
| }; | ||
|
|
||
| // Show the books on page load | ||
| showBooks(); | ||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Book Categories</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 20px; | ||
| background-color: #f4f4f4; | ||
| } | ||
| .grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | ||
| gap: 20px; | ||
| } | ||
| .card { | ||
| background: darkblue; | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .button { | ||
| background-color:rgb(249, 249, 249); | ||
| color:rgb(177, 115, 2); | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| text-decoration: none; | ||
| } | ||
| h3{ | ||
| color:rgb(227, 142, 31) | ||
| } | ||
| h1{ | ||
| color:aliceblue; | ||
| } | ||
| div{ | ||
| box-shadow:10px 10px rgb(214, 230, 4) ; | ||
| } | ||
| div:hover{ | ||
| color: #f45e13; | ||
| background-color: #007bff; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body > | ||
| <a href="quiz.html"><h3>Book Preference Quiz</h3></a> | ||
|
|
||
| <h1>Book Categories</h1> | ||
|
|
||
| <div class="grid"> | ||
| <div class="card"> | ||
| <h3>Action</h3> | ||
| <a class="button" href="action.html">Show Books</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Thriller</h3> | ||
| <a class="button" href="thriller.html">Show Books</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Fiction</h3> | ||
| <a class="button" href="fiction.html">Show Books</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Tech</h3> | ||
| <a class="button" href="tech.html">Show Books</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Philosophy</h3> | ||
| <a class="button" href="philosophy.html">Show Books</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Manga</h3> | ||
| <a class="button" href="manga.html">Show Books</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Thriller Books</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 20px; | ||
| background-color: #f4f4f4; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| color: #007bff; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .category-title { | ||
| background-color: darkblue; | ||
| color: white; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .book-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .book { | ||
| margin: 10px; | ||
| background: #fff; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | ||
| flex: 1 1 calc(45% - 20px); /* Two books per row */ | ||
| max-width: calc(45% - 20px); /* Two books per row */ | ||
| } | ||
|
|
||
| .book h4 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .button { | ||
| background-color: #f76b45; | ||
| color: white; | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| display: block; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .button:hover { | ||
| background-color: #e65c39; | ||
| } | ||
|
|
||
| footer { | ||
| text-align: center; | ||
| padding: 20px; | ||
| background: #333; | ||
| color: white; | ||
| position: relative; | ||
| bottom: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .description { | ||
| color: #555; | ||
| margin-top: 5px; | ||
| font-size: 14px; | ||
| } | ||
| div{ | ||
| box-shadow:10px 10px rgb(214, 230, 4) ; | ||
| } | ||
| div:hover{ | ||
| color: #f45e13; | ||
| background-color: #007bff; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="category-title"><h2>FICTION BOOKS</h2></div> | ||
| <div id="book-list" class="book-list"></div> | ||
|
|
||
| <script> | ||
| const fetchBooks = async () => { | ||
| // Fetching thriller books from Open Library | ||
| const response = await fetch('https://openlibrary.org/subjects/fiction.json?limit=50'); | ||
| const data = await response.json(); | ||
| return data.works; | ||
| }; | ||
|
|
||
| const showBooks = async () => { | ||
| const thrillerBooks = await fetchBooks(); | ||
| const bookList = document.getElementById('book-list'); | ||
| thrillerBooks.forEach(book => { | ||
| const bookDiv = document.createElement('div'); | ||
| bookDiv.className = 'book'; | ||
| bookDiv.innerHTML = ` | ||
| <h4>${book.title}</h4> | ||
| <p><strong>Author:</strong> ${book.authors.map(author => author.name).join(", ")}</p> | ||
| <p><strong>Cost:</strong> $${Math.floor(Math.random() * 20) + 10} (estimated price)</p> | ||
| `; | ||
| bookList.appendChild(bookDiv); | ||
| }); | ||
| }; | ||
|
|
||
| // Show the books on page load | ||
| showBooks(); | ||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.