Merge pull request boradesanket13#105 from Abhijeet-2003/navbar

Added author profile
mlscgescoe · Mar 3, 2023 · 6812042 · 6812042
2 parents 66165a9 + e148b19
commit 6812042
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -121,6 +121,7 @@ body {
     color: rgb(2, 4, 53);
     font-size: 1.5rem;
     margin-top: 20px;
+    cursor: pointer;
     /* text-transform: uppercase; */
 }
 
@@ -216,6 +217,31 @@ button:active {
     background-color: #fff;
     outline-color: #000;
 }
+.auth-profile{
+    display: none;
+    background-color: rgba(255, 255, 255, 0.514);
+    color: black;
+    font-size: 19px;
+    backdrop-filter: blur(30px);
+    padding: 10px 30px;
+    border-radius: 15px;
+    width: 600px;
+    align-items: center;
+    box-shadow: 0 0 10px;
+}
+.num-cont{
+    margin-top: 20px;
+}
+
+.back{
+    cursor: pointer;
+    margin-top: 50px;
+    padding: 9px 15px;
+    background-color: #fff;
+    border-radius: 5px;
+    width: fit-content;
+    outline: 1.5px solid black;
+}
 
 @media (max-width: 600px) {
     .container {

diff --git a/index.html b/index.html
@@ -120,6 +120,17 @@ <h2>QuoteBuzz</h2>
         </div>
 
     </div>
+
+    <div class="auth-profile" id="auth-profile">
+        <h2 class="auth-name" id="auth-name"></h2><br/>
+        <p class="auth-bio" id="auth-bio"></p><br/>
+        <a class="auth-link" id="auth-link" href="" target="_blank"></a><br/>
+        <div class="num-cont">Total Quotes: <span class="auth-quote" id="auth-quote"></span></div>
+
+        <div class="back" id="back" onclick="back()">Go Back</div>
+
+    </div>
+
     <div class="topics-cont" id="container3">
         <h2 class="all-tags">All Tags !!</h2>
         <div class="tags-cont" id="tags-cont">

diff --git a/js/script.js b/js/script.js
@@ -2,17 +2,25 @@ let btn = document.querySelector('#new-quote');
 let quote = document.querySelector('.quote');
 let person = document.querySelector('.person');
 let soundBtn = document.querySelector('.sound');
+const backBtn = document.getElementById('back')
 const twitterBtn = document.getElementById('twitter');
 const copyBtn = document.getElementById('copy');
 const quoteText = document.getElementById('quote');
 const authorText = document.getElementById('person');
 const cont1 = document.getElementById('container1');
+const cont2 = document.getElementById('auth-profile');
 const cont3 = document.getElementById('container3');
 const topic = document.getElementById('3');
 const tag_cont = document.getElementById('tags-cont')
 const body = document.body;
 
 
+//go back 
+const back = () => {
+  cont1.style.display = 'block';
+  cont2.style.display = 'none';
+} 
+
 
 // Tweet Quote
 function tweetQuote() {
@@ -52,6 +60,7 @@ const backgroundImages = [
 const queryText = ["motivation", "success", "hardwork", "inspiration"];
 
 btn.addEventListener("click", async () => {
+  let slug = '';
   let url = "";
   let flag = true;
   let pgNum = Math.floor(Math.random() * (4 - 1) + 1);
@@ -84,8 +93,33 @@ btn.addEventListener("click", async () => {
   console.log(quoteData);
   quote.innerText = quoteData.data.content;
   person.innerText = quoteData.data.author;
+  slug = quoteData.data.authorSlug;
+  console.log(slug);
+  const authdata = await axios.get(`https://api.quotable.io/authors?slug=${slug}`);
+  const data = authdata.data.results[0];
+  console.log(data);
+
+  person.addEventListener('click', async () => {
+    cont1.style.display = 'none';
+    cont2.style.display = 'block';
+
+    const name = document.getElementById('auth-name');
+    const bio = document.getElementById('auth-bio');
+    const link = document.getElementById('auth-link');
+    const quote = document.getElementById('auth-quote');
+
+    name.innerText = data.name;
+    bio.innerText = data.bio;
+    link.innerText = data.link;
+    link.href = data.link;
+    quote.innerText = data.quoteCount
+  })
 });
 
+// const authProfile = (id) => {
+//   console.log(id);
+// }
+
 // Tweetquote
 
 twitterBtn.addEventListener('click', tweetQuote);
@@ -108,9 +142,11 @@ function linkClick(id){
     if(id === 3){
       cont3.style.display = 'block';
       cont1.style.display = 'none';
+      cont2.style.display = 'none';
     }
     else if(id === 1){
       cont1.style.display = 'block';
+      cont2.style.display = 'none';
       cont3.style.display = 'none';
     }
   }