fix search lyrics pagination and breakout colors

Author: solygambas

Diff for: 73-lyrics search app/script.js

@@ -1,7 +1,7 @@
 const form = document.getElementById("form");
 const search = document.getElementById("search");
 const result = document.getElementById("result");
-// const more = document.getElementById("more");
+const more = document.getElementById("more");
 
 const apiURL = "https://api.lyrics.ovh";
 
@@ -25,14 +25,14 @@ async function getLyrics(artist, songTitle) {
         <span>${lyrics}</span>
     `;
   }
-  //   more.innerHTML = "";
+  more.innerHTML = "";
 }
 
-// async function getMoreSongs(url) {
-//   const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); // 403 without
-//   const data = await res.json();
-//   showData(data);
-// }
+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 = `
@@ -48,20 +48,20 @@ function showData(data) {
     </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 = "";
+  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) {

Diff for: 75-breakout game/style.css

@@ -1,12 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap");
 
 :root {
-  --background-color: #0095dd;
+  --background-color: #081150;
+  --background-secondary-color: #1842da;
   --canvas-color: #f0f0f0;
   --text-color: rgba(255, 255, 255, 0.87);
-  --hover-color: #222;
-  --sidebar-color: #333;
-  --button-color: #000;
+  --sidebar-color: #4d515e;
+  --button-color: #00094f;
+  --hover-color: #3e499c;
 }
 
 * {
@@ -15,6 +16,12 @@
 
 body {
   background-color: var(--background-color);
+  background-image: radial-gradient(
+    circle,
+    var(--button-color) 0%,
+    var(--background-color) 35%,
+    var(--background-secondary-color) 100%
+  );
   font-family: "Balsamiq Sans", cursive;
   display: flex;
   flex-direction: column;
@@ -42,6 +49,8 @@ canvas {
   background-color: var(--button-color);
   color: var(--text-color);
   border-radius: 5px;
+  font-family: inherit;
+  font-size: 1rem;
 }
 
 .btn:focus {
@@ -70,7 +79,7 @@ canvas {
   color: var(--text-color);
   min-height: 100vh;
   width: 400px;
-  padding: 1.25rem;
+  padding: 3rem;
   line-height: 1.5;
   transform: translateX(-400px);
   transition: transform 1s ease-in-out;

Diff for: 78-speak number guessing game/style.css

@@ -6,7 +6,7 @@
 
 body {
   background: #27273d
-    url("https://images.unsplash.com/photo-1534595461757-4974c5072dff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+    url("https://images.unsplash.com/photo-1552749412-091909ed9f82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
     no-repeat center center/cover;
   color: rgba(255, 255, 255, 0.87);
   font-family: "Recursive", sans-serif;