-
+
Error message
@@ -26,18 +29,19 @@
LyricsDo
-
+
-
+
-
+
+
\ No newline at end of file
diff --git a/scripts.js b/scripts.js
index 27759cd..6061904 100644
--- a/scripts.js
+++ b/scripts.js
@@ -1,23 +1,22 @@
+// Use 'const' for elements that do not change, ensure element IDs match those in your HTML
const searchLyrics = document.getElementById("searchlyrics");
-const form = document.getElementById("lyricsDo");
+const form = document.getElementById("lyricsForm"); // Corrected ID if it was a typo
const results = document.getElementById("lyricsResult");
const apiUrl = "https://api.lyrics.ovh/v1/";
const suggestionsBaseURL = "https://api.lyrics.ovh/suggest/";
const lyricsDiv = document.getElementById("lyrics");
-const recommedSection = document.getElementById("lyricsRecommendation");
+const recommendSection = document.getElementById("lyricsRecommendation"); // Corrected typo in variable name
let timeoutSuggest;
-if (document.readyState) {
+// Checking if the document is ready to handle DOM operations
+if (document.readyState === "complete" || document.readyState !== "loading") {
showRecommendations("In the Night");
+} else {
+ document.addEventListener("DOMContentLoaded", () => {
+ showRecommendations("In the Night");
+ });
}
-form.addEventListener("submit", (e) => {
- e.preventDefault();
-
- checkInputs();
- onChange();
-});
-
function checkInputs() {
const searchValue = searchLyrics.value.trim();
if (searchValue === "") {
@@ -40,83 +39,86 @@ function setSuccessFor(input) {
}
function onChange() {
+ clearTimeout(timeoutSuggest); // Clear the previous timeout if there was one
timeoutSuggest = setTimeout(suggestions, 300);
}
-
+function attachLyricsButtonListeners() {
+ const buttons = document.querySelectorAll(".lyricsBtn");
+ buttons.forEach((button) => {
+ button.addEventListener("click", function () {
+ const artist = this.dataset.artistname;
+ const title = this.dataset.titlename;
+ getLyrics(artist, title);
+ });
+ });
+}
function suggestions() {
- recommedSection.innerHTML = "";
+ recommendSection.innerHTML = ""; // Corrected variable name
let inputValue = searchLyrics.value;
if (!inputValue) {
return;
}
- const suggestionsUrl = suggestionsBaseURL + inputValue;
+ const suggestionsUrl = suggestionsBaseURL + encodeURIComponent(inputValue); // Use encodeURIComponent for URL safety
fetch(suggestionsUrl)
.then((response) => {
if (response.ok) {
return response.json();
} else {
- Promise.reject("Something went wrong");
+ throw new Error("Something went wrong"); // Changed to throw an error
}
})
.then((dataSuggestions) => {
let html = "";
if (dataSuggestions.data.length === 0) {
- alert("No result Found, Please search for something else.");
+ alert("No result found, please search for something else.");
}
- dataSuggestions.data.forEach(function (item) {
- if (item !== undefined) {
+ dataSuggestions.data.forEach((item) => {
+ if (item) {
html += `
Artist Name: ${item.artist.name}
Album Name: ${item.album.title}
- Title: ${
- item.title
- }
+ Title: ${item.title}
`;
}
});
results.innerHTML = html;
+ attachLyricsButtonListeners();
})
- .catch((error) => console.log("error is", error));
+ .catch((error) => console.error("Error is", error));
}
-
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ checkInputs();
+ onChange();
+});
function showRecommendations(song) {
- const recommandationUrl = suggestionsBaseURL + song;
- fetch(recommandationUrl)
+ const recommendationUrl = suggestionsBaseURL + encodeURIComponent(song); // Use encodeURIComponent for URL safety
+ fetch(recommendationUrl)
.then((response) => {
if (response.ok) {
return response.json();
} else {
- Promise.reject("Something went wrong");
+ throw new Error("Something went wrong"); // Changed to throw an error
}
})
- .then((dataRecommand) => {
+ .then((dataRecommend) => {
let html = "";
- dataRecommand.data.forEach(function (listOfRecommendations) {
- if (
- listOfRecommendations !== undefined ||
- listOfRecommendations !== null
- ) {
- if (
- listOfRecommendations.album.title !== undefined &&
- listOfRecommendations.title !== undefined &&
- listOfRecommendations.artist.name !== undefined
- ) {
- html += `
+ dataRecommend.data.forEach((listOfRecommendations) => {
+ if (listOfRecommendations) {
+ html += `
@@ -126,47 +128,45 @@ function showRecommendations(song) {
Album Name: ${
listOfRecommendations.album.title
}
- Title: ${
- listOfRecommendations.title
- }
+ Title: ${listOfRecommendations.title}
+ listOfRecommendations.title
+ }">View Lyrics
`;
- }
}
});
- recommedSection.innerHTML = html;
- let getbtn = document.querySelector(".recommendlyricsbtn");
- getbtn.addEventListener("click", function () {
- getLyrics(getbtn.dataset.artistname, getbtn.dataset.titlename);
+ recommendSection.innerHTML = html; // Corrected variable name
+ attachLyricsButtonListeners();
+ document.querySelectorAll(".recommendlyricsbtn").forEach((btn) => {
+ btn.addEventListener("click", function () {
+ getLyrics(this.dataset.artistname, this.dataset.titlename);
+ });
});
})
- .catch((error) => console.log("error is", error));
+ .catch((error) => console.error("Error is", error));
}
function getLyrics(artist, title) {
console.log({ artist, title });
- recommedSection.innerHTML = "";
+ recommendSection.innerHTML = ""; // Corrected variable name
results.innerHTML = "";
let lyricshtml = "";
- const lyricsUrl = apiUrl + artist + "/" + title;
+ const lyricsUrl =
+ apiUrl + encodeURIComponent(artist) + "/" + encodeURIComponent(title); // Use encodeURIComponent for URL safety
fetch(lyricsUrl)
.then((response) => {
if (response.ok) {
return response.json();
} else {
- Promise.reject("Something went wrong");
+ throw new Error("Something went wrong"); // Changed to throw an error
}
})
.then((data) => {
lyricshtml += `
${data.lyrics}`;
- console.log();
+ lyricsDiv.innerHTML = lyricshtml; // Moved inside success callback to ensure data is available
})
- .catch((error) => console.log("error is", error));
-
- lyricsDiv.innerHTML = lyricshtml;
+ .catch((error) => console.error("Error is", error));
}
diff --git a/style.css b/style.css
index 8acd52a..03e7cbe 100644
--- a/style.css
+++ b/style.css
@@ -168,9 +168,9 @@ p{
font-size: 15px;
display: block;
margin: 0 auto;
- box-shadow: #a7a7a7 0 3px 5px;
+ box-shadow: #a7a7a7 0 3px 10px;
position: absolute;
- bottom: 15px;
+ bottom: 0px;
left: 0;
right: 0;
}