From d860f8e7be6dc16256ada2ce11ca47601394a6fd Mon Sep 17 00:00:00 2001 From: muskan <59757988+Muskan-creator@users.noreply.github.com> Date: Sun, 3 Oct 2021 21:40:24 +0530 Subject: [PATCH] Added lyrics app project --- .../lyrics app/index.html | 33 +++++ .../lyrics app/lyrics.css | 126 ++++++++++++++++++ .../lyrics app/lyrics.js | 107 +++++++++++++++ .../lyrics app/readme.md | 0 4 files changed, 266 insertions(+) create mode 100644 Web Dev Projects_or_Portfolios/lyrics app/index.html create mode 100644 Web Dev Projects_or_Portfolios/lyrics app/lyrics.css create mode 100644 Web Dev Projects_or_Portfolios/lyrics app/lyrics.js create mode 100644 Web Dev Projects_or_Portfolios/lyrics app/readme.md diff --git a/Web Dev Projects_or_Portfolios/lyrics app/index.html b/Web Dev Projects_or_Portfolios/lyrics app/index.html new file mode 100644 index 000000000..d3c10882f --- /dev/null +++ b/Web Dev Projects_or_Portfolios/lyrics app/index.html @@ -0,0 +1,33 @@ + + + + + + + + LyricsSearch + + +
+

Lyrics Search

+ +
+ + +
+
+ +
+

Results will be displayed here

+
+ +
+ + + + + diff --git a/Web Dev Projects_or_Portfolios/lyrics app/lyrics.css b/Web Dev Projects_or_Portfolios/lyrics app/lyrics.css new file mode 100644 index 000000000..837e5ba02 --- /dev/null +++ b/Web Dev Projects_or_Portfolios/lyrics app/lyrics.css @@ -0,0 +1,126 @@ +* { + box-sizing: border-box; + } + + body { + background-color: #fff; + margin: 0; + } + + button { + cursor: pointer; + } + + button:active { + transform: scale(0.95); + } + + input:focus, + button:focus { + outline: none; + } + + header { + background-image: url("https://images.unsplash.com/photo-1510915361894-db8b60106cb1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100px 0; + position: relative; + } + + header::after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + } + + header * { + z-index: 1; + } + + header h1 { + margin: 0 0 30px; + } + + form { + position: relative; + width: 500px; + max-width: 100%; + } + + form input { + border: 0; + border-radius: 50px; + font-size: 16px; + padding: 15px 30px; + width: 100%; + } + + form button { + position: absolute; + top: 2px; + right: 2px; + background-color: black; + border: 0; + border-radius: 50px; + color: #fff; + font-size: 16px; + padding: 13px 30px; + } + + .btn { + background-color: #8d56fd; + border: 0; + border-radius: 10px; + color: #fff; + padding: 10px 10px; + } + + ul.songs { + list-style-type: none; + padding: 0; + } + + ul.songs li { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 0; + } + + .container { + margin: 30px auto; + max-width: 100%; + width: 700px; + text-align: center; + font-size: 21px; + } + + .container h2 { + font-weight: 300; + } + + .container p { + text-align: center; + } + + .centered { + display: flex; + justify-content: center; + } + + .centered button { + transform: scale(1.3); + margin: 15px; + } + \ No newline at end of file diff --git a/Web Dev Projects_or_Portfolios/lyrics app/lyrics.js b/Web Dev Projects_or_Portfolios/lyrics app/lyrics.js new file mode 100644 index 000000000..db9cfa408 --- /dev/null +++ b/Web Dev Projects_or_Portfolios/lyrics app/lyrics.js @@ -0,0 +1,107 @@ +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); +} + +function showData(data) { + if (!data && window.realData) data = window.realData; + console.log(data.data.length); + if (data.data.length === 0) { + window.dataLength = data.data.length; + return (result.innerHTML = ` +

No Results Found.

+

Try something different

+ `); + } else { + window.realData = data; + result.innerHTML = ` + + `; + + if (data.prev || data.next) { + more.innerHTML = ` + ${ + data.prev + ? `` + : "" + } + ${ + data.next + ? `` + : "" + } + `; + } else { + more.innerHTML = ""; + } + } +} + +async function getMoreSongs(url) { + const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); + 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(); + + if (data.error) { + result.innerHTML = data.error; + } else { + const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "
"); + result.innerHTML = ` +

${artist} - ${songTitle}

+ ${lyrics} +

+ + `; + } + + more.innerHTML = ""; +} + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const searchTerm = search.value.trim(); + + if (!searchTerm) { + alert("Please type in a search term"); + } else { + searchSongs(searchTerm); + } +}); + +result.addEventListener("click", (e) => { + const clickedEl = e.target; + console.log(clickedEl); + const property = clickedEl.getAttribute("data-name"); + + if (property === "button") { + const artist = clickedEl.getAttribute("data-artist"); + const songTitle = clickedEl.getAttribute("data-songtitle"); + + getLyrics(artist, songTitle); + } +}); diff --git a/Web Dev Projects_or_Portfolios/lyrics app/readme.md b/Web Dev Projects_or_Portfolios/lyrics app/readme.md new file mode 100644 index 000000000..e69de29bb