From d29b015210e04fe3a9c85d3ba832c5dfe257ac61 Mon Sep 17 00:00:00 2001 From: frontenddevmaciej Date: Sat, 14 May 2022 09:18:00 +0200 Subject: [PATCH 1/5] Initial commit --- index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/index.html b/index.html index e69de29b..586441a9 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + MK JS Project + + + + + \ No newline at end of file From fb5516653a2bc247c49c87e2f4716cbf87f3b69c Mon Sep 17 00:00:00 2001 From: frontenddevmaciej Date: Sat, 28 May 2022 09:41:59 +0200 Subject: [PATCH 2/5] Commit Api and js ready --- index.html | 22 +++++++++++++++++++++- main.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 586441a9..bddda874 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,29 @@ - MK JS Project + Find my podcast + + + + +
+
Lyrics
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..e11d50fe 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,48 @@ + +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) + }) + } + } + + // console.log("NOPE") +}) \ No newline at end of file From f39f736f4e5e0da6fd78e3c985d69f98dad046d7 Mon Sep 17 00:00:00 2001 From: frontenddevmaciej Date: Sat, 28 May 2022 14:15:17 +0200 Subject: [PATCH 3/5] Layout structure and styling --- index.html | 51 +++++++++++++++++++++++++++++++++------------------ style.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index bddda874..748e57e3 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,43 @@ - Find my podcast + Lyrics - +
+
+

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

+
Let's search for it!
+
+
+
+
+
+ + +
+
+
+
+
Lyrics
+
+
+
+
+

JS Project 2022

+

by Maciej Kołodziński

+
- - -
-
Lyrics
-
- - diff --git a/style.css b/style.css index e69de29b..f9bd3f9b 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,45 @@ +* { + margin: 0; + box-sizing: border-box;; +} + +html, body { + height: 100%; +} + +header { + background-color: rgb(52, 95, 145); + color: white; + margin: auto; + height: 20%; + width: 100%; + text-align: center; + padding: 30px; +} + +section { + display: -webkit-flex; + display: flex; + height: 70%; +} + +.search { + height: 100%; + width: 25%; + padding: 10px; + background-color: lightgrey; +} + +.lyrics { + height: 100%; + width: 75%; + padding: 10px; +} + +footer { + background-color: #777; + padding: 10px; + text-align: center; + color: white; + height: 10%; +} From aee6fe9095e939ffeadd3e4adce1bed95438fe15 Mon Sep 17 00:00:00 2001 From: frontenddevmaciej Date: Sat, 28 May 2022 14:36:41 +0200 Subject: [PATCH 4/5] CSS styling update --- index.html | 6 +++--- style.css | 37 ++++++++++++++++++++++++++++++++----- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 748e57e3..91c6bce6 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@
-

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

-
Let's search for it!
+

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

+

Let's search for it!

@@ -32,7 +32,7 @@
Let's search for it!
-
Lyrics
+
diff --git a/style.css b/style.css index f9bd3f9b..f3ccc1a6 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,7 @@ +@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'); + * { margin: 0; box-sizing: border-box;; @@ -8,7 +12,7 @@ html, body { } header { - background-color: rgb(52, 95, 145); + background-color: rgba(52, 95, 145, 0.75); color: white; margin: auto; height: 20%; @@ -17,6 +21,17 @@ header { padding: 30px; } +#title { + font-family: 'Caveat', cursive; + font-size: 275%; +} + +#subtitle { + font-family: 'Caveat'; + font-family: 'Jost', sans-serif; + font-size: 150%; +} + section { display: -webkit-flex; display: flex; @@ -24,16 +39,28 @@ section { } .search { - height: 100%; + margin: auto; + height: 50%; width: 25%; padding: 10px; - background-color: lightgrey; + text-align: center; + font-family: 'Caveat', bold; + font-family: 'Jost', sans-serif; + font-size: 150%; +} + + +label, input { + padding: 20px; + margin: 20px; } .lyrics { height: 100%; width: 75%; - padding: 10px; + padding: 30px; + overflow: auto; + font-family: 'Prata', serif; } footer { @@ -42,4 +69,4 @@ footer { text-align: center; color: white; height: 10%; -} +} \ No newline at end of file From 47f83140967790bac16698e8e79631c2cba41c11 Mon Sep 17 00:00:00 2001 From: frontenddevmaciej Date: Tue, 31 May 2022 22:51:19 +0200 Subject: [PATCH 5/5] final commit --- main.js | 2 -- style.css | 20 +++++++++++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index e11d50fe..b79d8ed6 100644 --- a/main.js +++ b/main.js @@ -43,6 +43,4 @@ button.addEventListener("click", event => { }) } } - - // console.log("NOPE") }) \ No newline at end of file diff --git a/style.css b/style.css index f3ccc1a6..f8113293 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,7 @@ @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; @@ -27,7 +28,6 @@ header { } #subtitle { - font-family: 'Caveat'; font-family: 'Jost', sans-serif; font-size: 150%; } @@ -40,11 +40,10 @@ section { .search { margin: auto; - height: 50%; + height: 60%; width: 25%; padding: 10px; text-align: center; - font-family: 'Caveat', bold; font-family: 'Jost', sans-serif; font-size: 150%; } @@ -69,4 +68,19 @@ footer { 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