diff --git a/index.html b/index.html index e69de29b..91c6bce6 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + Lyrics + + + +
+
+

Want to sing but don't know the lyrics by heart?

+

Let's search for it!

+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..b79d8ed6 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,46 @@ + +const button = document.getElementById("Search") + +// User puts artist and song title values, after a button click fetch api and get the lyrics +button.addEventListener("click", event => { + + // Dodać walidację inputów (obsługa błędów, jednego pola pustego, zamiana spacji na podkreślnik w zmiennych do url "_" + + switch(document.getElementById('artist').value.length){ + case(0): + alert("Fill in the artist name.") + default: + switch(document.getElementById('artist').value.length){ + case(0): + alert("Fill in the song title name.") + default: + + // } + // } + // if(document.getElementById('artist').value.length !== 0 || document.getElementById('artist').value.length !== 0){ + console.log('OK') + + const LyricsContent = document.getElementById("LyricsContent") + const artist = document.getElementById('artist').value + const song = document.getElementById('song').value + + // Zmienić konstrukcję linka na {} + const ApiURL = "https://api.lyrics.ovh/v1/" + artist + "/" + song + '"' + console.log(ApiURL) + + function getApiResponse(url){ + const LyricsRequest = fetch(url) + return LyricsRequest + .then((response) => response.json()) + } + + getApiResponse(ApiURL).then((LyricsContent) => { + const LyricsElement = document.getElementById('LyricsContent') + LyricsElement.innerText = LyricsContent.lyrics + console.log(LyricsContent.lyrics) + console.log(artist) + console.log(song) + }) + } + } +}) \ No newline at end of file diff --git a/style.css b/style.css index e69de29b..f8113293 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,86 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Jost:ital,wght@1,100&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Jost:ital,wght@1,100&family=Prata&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap'); + +* { + margin: 0; + box-sizing: border-box;; +} + +html, body { + height: 100%; +} + +header { + background-color: rgba(52, 95, 145, 0.75); + color: white; + margin: auto; + height: 20%; + width: 100%; + text-align: center; + padding: 30px; +} + +#title { + font-family: 'Caveat', cursive; + font-size: 275%; +} + +#subtitle { + font-family: 'Jost', sans-serif; + font-size: 150%; +} + +section { + display: -webkit-flex; + display: flex; + height: 70%; +} + +.search { + margin: auto; + height: 60%; + width: 25%; + padding: 10px; + text-align: center; + font-family: 'Jost', sans-serif; + font-size: 150%; +} + + +label, input { + padding: 20px; + margin: 20px; +} + +.lyrics { + height: 100%; + width: 75%; + padding: 30px; + overflow: auto; + font-family: 'Prata', serif; +} + +footer { + background-color: #777; + padding: 10px; + text-align: center; + color: white; + height: 10%; + font-family: 'Amatic SC', cursive; + font-size: 150%; +} + +button { + background-color: rgba(52, 95, 145, 0.869); + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} \ No newline at end of file