Skip to content

Commit

Permalink
resolve error in ui and script
Browse files Browse the repository at this point in the history
  • Loading branch information
@pras75299
pras75299 committed Apr 30, 2024
1 parent 5f08bb6 commit a2019de
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 69 deletions.
16 changes: 10 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LyricsDo- Lyrics Finder App</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>

<body>
<section class="main-section">
<header>
<form class="container" id="lyricsDo">
<form class="container" id="lyricsForm">
<h1>LyricsDo</h1>
<p>Find the Lyrics of your favorite song and Keep Humming</p>
<div class="form-combine">
<div class="form-group">
<input type="text" id="searchlyrics" class="input-control" placeholder="Search" autofocus/>
<input type="text" id="searchlyrics" class="input-control" placeholder="Search" autofocus />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
Expand All @@ -26,18 +29,19 @@ <h1>LyricsDo</h1>
</form>
</header>



<ul class="lyricsResult" id="lyricsResult"></ul>
<div class="lyricsResult pt-0" id="lyricsRecommendation">

</div>
<div id="lyrics">

</div>

</section>

<script src="./scripts.js"></script>
</body>

</html>
122 changes: 61 additions & 61 deletions scripts.js
View file
Original file line number Diff line number Diff line change
@@ -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 === "") {
Expand All @@ -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 += `<li>
<div class="album-image">
<img src="${
item.album.cover_medium !== null
? item.album.cover_medium
: "./assets/default-placeholder-image.png"
item.album.cover_medium ||
"./assets/default-placeholder-image.png"
}"/>
</div>
<a href="#">
<p><span>Artist Name:</span> ${item.artist.name}</p>
<p><span>Album Name:</span> ${item.album.title}</p>
<p><span>Title:</span> ${
item.title
}</p>
<p><span>Title:</span> ${item.title}</p>
</a>
<button class="lyricsBtn">View Lyrics</button>
</li>`;
}
});
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 += `<li>
dataRecommend.data.forEach((listOfRecommendations) => {
if (listOfRecommendations) {
html += `<li>
<div class="album-image">
<img src="${
listOfRecommendations.album.cover_medium !== null
? listOfRecommendations.album.cover_medium
: "./assets/default-placeholder-image.png"
listOfRecommendations.album.cover_medium ||
"./assets/default-placeholder-image.png"
}"/>
</div>
<a href="#">
Expand All @@ -126,47 +128,45 @@ function showRecommendations(song) {
<p><span>Album Name:</span> ${
listOfRecommendations.album.title
}</p>
<p><span>Title:</span> ${
listOfRecommendations.title
}</p>
<p><span>Title:</span> ${listOfRecommendations.title}</p>
</a>
<button class="lyricsBtn recommendlyricsbtn" data-artistname="${
listOfRecommendations.artist.name
}" data-titlename="${
listOfRecommendations.title
}">View Lyrics</button>
listOfRecommendations.title
}">View Lyrics</button>
</li>`;
}
}
});
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 += `<pre>${data.lyrics}</pre>`;
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));
}
4 changes: 2 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit a2019de

Please sign in to comment.