-
Notifications
You must be signed in to change notification settings - Fork 763
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2842 from Vin205/main
Reading Mood Tracker
- Loading branch information
Showing
3 changed files
with
268 additions
and
0 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,142 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Virtual Bookshelves</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f5f5f5; | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .bookshelf-container { | ||
| background-color: #fff; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); | ||
| width: 500px; | ||
| } | ||
|
|
||
| h1 { | ||
| color: #333; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .add-shelf-container, .bookshelves { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .add-shelf-container input { | ||
| padding: 10px; | ||
| width: calc(100% - 20px); | ||
| border-radius: 5px; | ||
| border: 1px solid #ccc; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .add-shelf-container button { | ||
| padding: 10px 20px; | ||
| background-color: #007BFF; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| width: 100%; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .add-shelf-container button:hover { | ||
| background-color: #0056b3; | ||
| } | ||
|
|
||
| .bookshelf { | ||
| margin-top: 10px; | ||
| padding: 10px; | ||
| background-color: #f0f0f0; | ||
| border-radius: 5px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| .bookshelf h3 { | ||
| margin: 0; | ||
| margin-bottom: 10px; | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .bookshelf ul { | ||
| list-style-type: none; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .bookshelf ul li { | ||
| padding: 5px; | ||
| background-color: #e9e9e9; | ||
| margin-bottom: 5px; | ||
| border-radius: 5px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="bookshelf-container"> | ||
| <h1>Virtual Bookshelves</h1> | ||
|
|
||
| <div class="add-shelf-container"> | ||
| <input type="text" id="shelfName" placeholder="Enter Bookshelf Name"> | ||
| <button onclick="addShelf()">Add Bookshelf</button> | ||
| </div> | ||
|
|
||
| <div class="bookshelves" id="bookshelves"> | ||
| <!-- Bookshelves will be dynamically added here --> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function addShelf() { | ||
| const shelfName = document.getElementById('shelfName').value; | ||
| if (shelfName.trim() === '') { | ||
| alert('Please enter a name for the bookshelf.'); | ||
| return; | ||
| } | ||
|
|
||
| const bookshelfContainer = document.createElement('div'); | ||
| bookshelfContainer.className = 'bookshelf'; | ||
|
|
||
| const bookshelfTitle = document.createElement('h3'); | ||
| bookshelfTitle.innerText = shelfName; | ||
|
|
||
| const bookList = document.createElement('ul'); | ||
|
|
||
| const addBookButton = document.createElement('button'); | ||
| addBookButton.innerText = 'Add Book'; | ||
| addBookButton.onclick = function() { | ||
| const bookName = prompt('Enter the name of the book:'); | ||
| if (bookName && bookName.trim() !== '') { | ||
| const bookItem = document.createElement('li'); | ||
| bookItem.innerText = bookName; | ||
| bookList.appendChild(bookItem); | ||
| } else { | ||
| alert('Book name cannot be empty.'); | ||
| } | ||
| }; | ||
|
|
||
| bookshelfContainer.appendChild(bookshelfTitle); | ||
| bookshelfContainer.appendChild(bookList); | ||
| bookshelfContainer.appendChild(addBookButton); | ||
|
|
||
| document.getElementById('bookshelves').appendChild(bookshelfContainer); | ||
|
|
||
| document.getElementById('shelfName').value = ''; // Clear input field | ||
| } | ||
| </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,116 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Reading Mood Tracker</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f5f5f5; | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .tracker-container { | ||
| background-color: #fff; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); | ||
| text-align: center; | ||
| width: 300px; | ||
| } | ||
|
|
||
| h1 { | ||
| color: #333; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .mood-selection { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| select { | ||
| padding: 10px; | ||
| width: 100%; | ||
| border-radius: 5px; | ||
| border: 1px solid #ccc; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px 20px; | ||
| background-color: #007BFF; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| width: 100%; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #0056b3; | ||
| } | ||
|
|
||
| .suggestion-box { | ||
| margin-top: 20px; | ||
| font-size: 18px; | ||
| color: #333; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="tracker-container"> | ||
| <h1>Reading Mood Tracker</h1> | ||
| <div class="mood-selection"> | ||
| <label for="mood">Select Your Current Mood:</label> | ||
| <select id="mood"> | ||
| <option value="happy">Happy</option> | ||
| <option value="sad">Sad</option> | ||
| <option value="motivated">Motivated</option> | ||
| <option value="relaxed">Relaxed</option> | ||
| <option value="adventurous">Adventurous</option> | ||
| </select> | ||
| </div> | ||
| <button onclick="suggestBook()">Get Book Suggestion</button> | ||
| <div id="suggestion" class="suggestion-box"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function suggestBook() { | ||
| const mood = document.getElementById("mood").value; | ||
| let suggestion; | ||
|
|
||
| switch(mood) { | ||
| case "happy": | ||
| suggestion = "Try reading 'The Alchemist' by Paulo Coelho!"; | ||
| break; | ||
| case "sad": | ||
| suggestion = "How about 'The Book Thief' by Markus Zusak?"; | ||
| break; | ||
| case "motivated": | ||
| suggestion = "You might enjoy 'Atomic Habits' by James Clear."; | ||
| break; | ||
| case "relaxed": | ||
| suggestion = "'The Little Prince' by Antoine de Saint-Exupéry could be a good choice."; | ||
| break; | ||
| case "adventurous": | ||
| suggestion = "Check out 'The Hobbit' by J.R.R. Tolkien!"; | ||
| break; | ||
| default: | ||
| suggestion = "Select a mood to get a book suggestion!"; | ||
| break; | ||
| } | ||
|
|
||
| document.getElementById("suggestion").innerHTML = suggestion; | ||
| } | ||
| </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