cdv-poznan · frontenddevmaciej · May 14, 2022 · May 28, 2022 · May 28, 2022 · May 28, 2022
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lyrics</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header">
+        <div class="center-allign">
+            <h1 id="title">Want to sing but don't know the lyrics by heart?</h2>
+            <h3 id="subtitle">Let's search for it!</h4>
+        </div>
+    </header>
+    <section class="main-section">
+        <article class="search">
+            <div class="input-title" id="artist-name-tite">
+                <div class="center" id="search">
+                    <form>
+                        <label for="artist">Who's the artist?</label><br>
+                        <input type="text" id="artist" name="artist"><br>
+                        <label for="song">What's the title?</label><br>
+                        <input type="text" id="song" name="song">
+                    </form>
+                </div>
+                <div class="center" id="search">
+                    <button id="Search">Find</button>
+                </div>
+            </div>
+        </article>
+        <article class="lyrics">
+            <div class="center" id="lyrics">
+                <div id="LyricsContent"></div>
+            </div>
+        </article>
+    </section>
+    <footer class="footer">
+        <p>JS Project 2022</p>
+        <p>by Maciej Kołodziński</p>
+    </footer>
+
+    <script src="main.js"></script>
+    <script type="text/javascript" src="http://tracking.musixmatch.com/t1.0/AMa6hJCIEzn1v8RuOP"></script>
+</body>
+</html>
diff --git 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)
+            })
+        }
+    }
+})
diff --git 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;
+}