-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Added social media icons with hover effects. - Made the footer sticky at the bottom of the page. - Improved typography and layout for better readability.
- Loading branch information
Showing
10 changed files
with
135 additions
and
215 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
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
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 |
|---|---|---|
| @@ -1,80 +1,80 @@ | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const audioPlayer = document.getElementById("audio-player"); | ||
| const playlistItems = document.querySelectorAll("#playlist li"); | ||
| const playPauseBtn = document.getElementById('playPauseBtn'); // Play/Pause button | ||
| const audioPlayer = document.getElementById("audio-player"); | ||
| const playlistItems = document.querySelectorAll("#playlist li"); | ||
| const playPauseBtn = document.getElementById("playPauseBtn"); // Play/Pause button | ||
|
|
||
| // Playlist functionality: Play the clicked audio | ||
| playlistItems.forEach((item) => { | ||
| item.addEventListener("click", function () { | ||
| const audioSource = this.getAttribute("data-src"); | ||
| audioPlayer.src = audioSource; | ||
| audioPlayer.play(); | ||
| playPauseBtn.classList.remove('play'); // Update the button to pause when playing | ||
| playPauseBtn.classList.add('pause'); | ||
| }); | ||
| // Playlist functionality: Play the clicked audio | ||
| playlistItems.forEach((item) => { | ||
| item.addEventListener("click", function () { | ||
| const audioSource = this.getAttribute("data-src"); | ||
| audioPlayer.src = audioSource; | ||
| audioPlayer.play(); | ||
| playPauseBtn.classList.remove("play"); // Update the button to pause when playing | ||
| playPauseBtn.classList.add("pause"); | ||
| }); | ||
| }); | ||
|
|
||
| // Play/Pause button functionality | ||
| playPauseBtn.addEventListener('click', () => { | ||
| if (audioPlayer.paused) { | ||
| audioPlayer.play(); | ||
| playPauseBtn.classList.remove('play'); | ||
| playPauseBtn.classList.add('pause'); | ||
| } else { | ||
| audioPlayer.pause(); | ||
| playPauseBtn.classList.remove('pause'); | ||
| playPauseBtn.classList.add('play'); | ||
| } | ||
| }); | ||
| // Play/Pause button functionality | ||
| playPauseBtn.addEventListener("click", () => { | ||
| if (audioPlayer.paused) { | ||
| audioPlayer.play(); | ||
| playPauseBtn.classList.remove("play"); | ||
| playPauseBtn.classList.add("pause"); | ||
| } else { | ||
| audioPlayer.pause(); | ||
| playPauseBtn.classList.remove("pause"); | ||
| playPauseBtn.classList.add("play"); | ||
| } | ||
| }); | ||
|
|
||
| // Comment submission functionality | ||
| const commentForm = document.getElementById("comment-form"); | ||
| const commentsList = document.getElementById("comments-list"); | ||
| // Comment submission functionality | ||
| const commentForm = document.getElementById("comment-form"); | ||
| const commentsList = document.getElementById("comments-list"); | ||
|
|
||
| commentForm.addEventListener("submit", function (e) { | ||
| e.preventDefault(); | ||
| commentForm.addEventListener("submit", function (e) { | ||
| e.preventDefault(); | ||
|
|
||
| const username = document.getElementById("username").value; | ||
| const commentText = document.getElementById("comment").value; | ||
| const username = document.getElementById("username").value; | ||
| const commentText = document.getElementById("comment").value; | ||
|
|
||
| if (username && commentText) { | ||
| const commentElement = document.createElement("div"); | ||
| commentElement.classList.add("comment"); | ||
| commentElement.innerHTML = `<strong>${username}:</strong><p>${commentText}</p>`; | ||
| commentsList.appendChild(commentElement); | ||
| if (username && commentText) { | ||
| const commentElement = document.createElement("div"); | ||
| commentElement.classList.add("comment"); | ||
| commentElement.innerHTML = `<strong>${username}:</strong><p>${commentText}</p>`; | ||
| commentsList.appendChild(commentElement); | ||
|
|
||
| // Clear the form | ||
| commentForm.reset(); | ||
| } | ||
| }); | ||
| // Clear the form | ||
| commentForm.reset(); | ||
| } | ||
| }); | ||
|
|
||
| // Page navigation buttons functionality | ||
| const prevBtn = document.getElementById("prev-btn"); | ||
| const nextBtn = document.getElementById("next-btn"); | ||
| // Page navigation buttons functionality | ||
| const prevBtn = document.getElementById("prev-btn"); | ||
| const nextBtn = document.getElementById("next-btn"); | ||
|
|
||
| // Define the pages for navigation | ||
| const pages = ['index.html', 'genres.html', 'about.html']; | ||
| let currentPageIndex = pages.indexOf(window.location.pathname); | ||
| // Define the pages for navigation | ||
| const pages = ["index.html", "genres.html", "about.html"]; | ||
| let currentPageIndex = pages.indexOf(window.location.pathname); | ||
|
|
||
| // Function to navigate to the next page | ||
| function nextPage() { | ||
| if (currentPageIndex < pages.length - 1) { | ||
| currentPageIndex++; | ||
| window.location.href = pages[currentPageIndex]; | ||
| } | ||
| // Function to navigate to the next page | ||
| function nextPage() { | ||
| if (currentPageIndex < pages.length - 1) { | ||
| currentPageIndex++; | ||
| window.location.href = pages[currentPageIndex]; | ||
| } | ||
| } | ||
|
|
||
| // Function to navigate to the previous page | ||
| function prevPage() { | ||
| if (currentPageIndex > 0) { | ||
| currentPageIndex--; | ||
| window.location.href = pages[currentPageIndex]; | ||
| } | ||
| // Function to navigate to the previous page | ||
| function prevPage() { | ||
| if (currentPageIndex > 0) { | ||
| currentPageIndex--; | ||
| window.location.href = pages[currentPageIndex]; | ||
| } | ||
| } | ||
|
|
||
| // Event listener for "Next" button | ||
| if (nextBtn) nextBtn.addEventListener("click", nextPage); | ||
| // Event listener for "Next" button | ||
| if (nextBtn) nextBtn.addEventListener("click", nextPage); | ||
|
|
||
| // Event listener for "Previous" button | ||
| if (prevBtn) prevBtn.addEventListener("click", prevPage); | ||
| // Event listener for "Previous" button | ||
| if (prevBtn) prevBtn.addEventListener("click", prevPage); | ||
| }); |
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 |
|---|---|---|
| @@ -1,38 +0,0 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" | ||
| /> | ||
| <link | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
| rel="stylesheet" | ||
| integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" | ||
| crossorigin="anonymous" | ||
| /> | ||
| <title>My Favorite Books Music App</title> | ||
| </head> | ||
| <body | ||
| class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100" | ||
| > | ||
| <!-- Navbar --> | ||
| <div id="header-placeholder" class="sticky top-0 z-20"></div> | ||
| <main> | ||
| <h1>FAQs</h1> | ||
| </main> | ||
| <!-- Footer --> | ||
| <div id="footer-placeholder" class="mt-auto"></div> | ||
| <!-- JavaScript --> | ||
| <script src="./script.js"></script> | ||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
| crossorigin="anonymous" | ||
| ></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
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
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
Oops, something went wrong.