Scribd Logo
Upload

Welcome to Scribd!

  • WT

    Uploaded by

    Pankaj Ahire
    12 views4 pages
    This document contains code for a lyrics search web application. It includes HTML markup for the page layout and JavaScript code to handle searching lyrics from an API. The JavaScript code searches for songs based on the user input, displays the results, handles getting lyrics, and adds pagination when available.

    Original Description:

    Wt program

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for a lyrics search web application. It includes HTML markup for the page layout and JavaScript code to handle searching lyrics from an API. The JavaScript code searches for songs based on the user input, displays the results, handles getting lyrics, and adds pagination when available.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views4 pages

    WT

    Uploaded by

    Pankaj Ahire
    This document contains code for a lyrics search web application. It includes HTML markup for the page layout and JavaScript code to handle searching lyrics from an API. The JavaScript code searches for songs based on the user input, displays the results, handles getting lyrics, and adds pagination when available.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <!

    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" />

    <title>Lyrics Search</title>

    </head>

    <body>

    <header>

    <h1>Lyrics Search</h1>

    <form id="form">

    <input

    type="text"

    id="search"

    placeholder="Enter artist or song name..."

    />

    <button>Search</button>

    </form>

    </header>

    <div id="result" class="container">

    <p>Results will be displayed here</p>

    </div>

    <div id="more" class="container centered"></div>

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

    </body>

    </html>

    Script.js

    const form = document.getElementById("form");

    const search = document.getElementById("search");

    const result = document.getElementById("result");


    const more = document.getElementById("more");

    const apiURL = "https://api.lyrics.ovh";

    async function searchSongs(term) {

    const res = await fetch(`${apiURL}/suggest/${term}`);

    const data = await res.json();

    showData(data);

    async function getLyrics(artist, songTitle) {

    const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`);

    const data = await res.json();

    console.log(artist, songTitle);

    if (data.error) {

    showAlert(data.error);

    } else {

    const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "<br>");

    result.innerHTML = `

    <h2><strong>${artist}</strong> - ${songTitle}</h2>

    <span>${lyrics}</span>

    `;

    more.innerHTML = "";

    async function getMoreSongs(url) {

    const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); // proxy is required to

    avoid CORS issue

    const data = await res.json();

    showData(data);

    function showData(data) {

    result.innerHTML = `

    <ul class="songs">
    ${data.data

    .map(

    (song) => `<li>

    <span><strong>${song.artist.name}</strong> - ${song.title}</span>

    <button class="btn" data-artist="${song.artist.name}" data-songtitle="${song.title}">Get

    Lyrics</button>

    </li>`

    .join("")}

    </ul>

    `;

    // Pagination

    if (data.prev || data.next) {

    more.innerHTML = `

    ${

    data.prev

    ? `<button class="btn" onclick="getMoreSongs('${data.prev}')">Prev</button>`

    : ""

    ${

    data.next

    ? `<button class="btn" onclick="getMoreSongs('${data.next}')">Next</button>`

    : ""

    `;

    } else more.innerHTML = "";

    function showAlert(message) {

    const notif = document.createElement("div");

    notif.classList.add("toast");

    notif.innerText = message;
    document.body.appendChild(notif);

    setTimeout(() => notif.remove(), 3000);

    // Event Listeners

    form.addEventListener("submit", (e) => {

    e.preventDefault();

    const searchTerm = search.value.trim();

    if (!searchTerm) showAlert("Please type in a search term");

    else searchSongs(searchTerm);

    });

    result.addEventListener("click", (e) => {

    const clickedElement = e.target;

    if (clickedElement.tagName === "BUTTON") {

    const artist = clickedElement.getAttribute("data-artist");

    const songTitle = clickedElement.getAttribute("data-songtitle");

    getLyrics(artist, songTitle);

    });

    // Init

    searchSongs("one");

    You might also like