Description:
The Lyrics Finder Tool is a web application built using HTML, CSS, and JavaScript that allows users to quickly and easily fetch and display lyrics for a given song and artist. With a straightforward interface, users can input the artist and song details, and the tool dynamically retrieves the lyrics using the Lyrics.ovh API. The displayed lyrics, or any error messages, are presented in a user-friendly format, enhancing the experience of discovering and accessing song lyrics effortlessly. Lyrics Finder tool that fetches and displays lyrics for a given song in HTML, CSS, and JavaScript
Project tool
Lyrics Finder Tool involves fetching data from an external API. One popular API for lyrics is the Lyrics.ovh API. Below is an example of a simple Lyrics Finder Tool using HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lyrics Finder</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 50px;
}
#lyricsForm {
max-width: 600px;
margin: 0 auto;
}
#lyricsDisplay {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
min-height: 100px;
background-color: #f8f8f8;
text-align: left;
}
</style>
</head>
<body>
<h1>Lyrics Finder</h1>
<form id="lyricsForm">
<label for="artist">Artist:</label>
<input type="text" id="artist" placeholder="Enter artist" required>
<label for="song">Song:</label>
<input type="text" id="song" placeholder="Enter song" required>
<button type="button" onclick="findLyrics()">Find Lyrics</button>
</form>
<div id="lyricsDisplay"></div>
<script>
async function findLyrics() {
const artistInput = document.getElementById('artist');
const songInput = document.getElementById('song');
const lyricsDisplay = document.getElementById('lyricsDisplay');
const artist = artistInput.value.trim();
const song = songInput.value.trim();
if (!artist || !song) {
alert('Please enter both artist and song.');
return;
}
try {
const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
const data = await response.json();
if (response.ok) {
// Display lyrics
const lyrics = data.lyrics.replace(/\n/g, '<br>'); // Convert line breaks for HTML
lyricsDisplay.innerHTML = `<h3>${artist} - ${song}</h3><p>${lyrics}</p>`;
} else {
// Display error message
lyricsDisplay.innerHTML = `<p>Error: ${data.error || 'Lyrics not found.'}</p>`;
}
} catch (error) {
console.error('Error fetching lyrics:', error);
lyricsDisplay.innerHTML = '<p>An error occurred while fetching lyrics.</p>';
}
}
</script>
</body>
</html>
No comments:
Post a Comment