feat: get advice from api call and show in html

vedhatech002 · Jan 13, 2024 · 8ba1915 · 8ba1915
1 parent 2faa4e2
commit 8ba1915
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/JavaScript/javaScriptDom/06-Quote-Generator-App/index.html b/JavaScript/javaScriptDom/06-Quote-Generator-App/index.html
@@ -7,8 +7,44 @@
     <title>Quote generator</title>
     <link rel="stylesheet" href="./src/css/main.css" />
   </head>
-  <body>
-    <h1 class="bg-slate-600">Hello</h1>
+  <body class="bg-[#202124] flex items-center justify-center">
+    <main class="bg-[#626770] sm:w-[600px] mt-28 rounded-md">
+      <section class="py-10 text-center px-8">
+        <blockquote
+          class="text-2xl italic font-semibold text-gray-900 dark:text-white"
+        >
+          <svg
+            class="w-8 h-8 text-[#35383c] mb-4 -rotate-180"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 14"
+          >
+            <path
+              d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"
+            />
+          </svg>
+          <p class="h-[150px] py-8"></p>
+          <svg
+            class="w-8 h-8 text-[#35383c] mb-4 float-right"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 18 14"
+          >
+            <path
+              d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"
+            />
+          </svg>
+        </blockquote>
+      </section>
+      <button
+        class="text-lg font-bold bg-[#bbc6d4] w-full rounded-b-md mt-8 text-[#202124] outline-none py-2 border-none"
+      >
+        New Quote
+      </button>
+    </main>
+
     <script type="module" src="./src/js/app.js"></script>
   </body>
 </html>
diff --git a/JavaScript/javaScriptDom/06-Quote-Generator-App/src/js/app.js b/JavaScript/javaScriptDom/06-Quote-Generator-App/src/js/app.js
@@ -0,0 +1,25 @@
+const blocquoteTextEl = document.querySelector("blockquote > p");
+const btnEl = document.querySelector("main > button");
+const API_URL = "https://api.adviceslip.com/advice";
+
+async function getQuote() {
+  try {
+    const fetchQuote = await fetch(API_URL);
+    const JsonData = fetchQuote.json();
+    return JsonData;
+  } catch (error) {
+    console.error("Some network error: ", error);
+  }
+}
+
+async function showQuote() {
+  const QuoteData = await getQuote();
+  console.log(QuoteData);
+  blocquoteTextEl.innerText = QuoteData.slip.advice;
+}
+
+btnEl.addEventListener("click", () => {
+  showQuote();
+});
+
+showQuote();