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

Added topics page
AaryaaRam · Jan 5, 2023 · 51e8e56 · 51e8e56
2 parents c7d7e19 + e50779c
commit 51e8e56
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 2 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -174,6 +174,49 @@ button:active {
   color: #08273f;
 }
 
+.topics-cont{
+    display: none;
+}
+.all-tags{
+    background-color: rgba(255, 255, 255, 0.514);
+    color: black;
+    backdrop-filter: blur(30px);
+    padding: 10px 0px;
+    border-radius: 15px;
+    box-shadow: 0 0 10px;
+
+}
+.tags-cont{
+    margin-top: 30px;
+    height: 500px;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    display: flex;
+    flex-direction: column;
+    /* gap: 10px; */
+    background-color: rgba(255, 255, 255, 0.514);
+    color: black;
+    font-size: 19px;
+    backdrop-filter: blur(30px);
+    padding: 10px 30px;
+    border-radius: 15px;
+    width: 400px;
+    align-items: center;
+    box-shadow: 0 0 10px;
+
+}
+.tags-cont div{
+    width: 100%;
+    padding: 8px 0px;
+    cursor: pointer;
+    border-radius: 10px;
+    /* transition: .2s ease-out; */
+}
+.tags-cont div:hover{
+    background-color: #fff;
+    outline-color: #000;
+}
+
 @media (max-width: 600px) {
     .container {
         width: 80%;

diff --git a/index.html b/index.html
@@ -79,7 +79,7 @@
 <body>
 
     <!-- Random Quote Generator -->
-    <div class="container">
+    <div class="container" id="container1">
         <div class="heading">
             <h2>QuoteBuzz</h2>
         </div>
@@ -112,6 +112,12 @@ <h2>QuoteBuzz</h2>
         </div>
 
     </div>
+    <div class="topics-cont" id="container3">
+        <h2 class="all-tags">All Tags !!</h2>
+        <div class="tags-cont" id="tags-cont">
+
+        </div>
+    </div>
 
 
     <!-- FontAwesome -->

diff --git a/js/script.js b/js/script.js
@@ -6,6 +6,10 @@ 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 cont3 = document.getElementById('container3');
+const topic = document.getElementById('3');
+const tag_cont = document.getElementById('tags-cont')
 const body = document.body;
 
 
@@ -99,5 +103,33 @@ function linkClick(id){
     clicked.classList.add('active');
     clicked.style.transitionTimingFunction="ease-out";
     clicked.style.transitionDuration=".3s"
+
+
+    if(id === 3){
+      cont3.style.display = 'block';
+      cont1.style.display = 'none';
+    }
+    else if(id === 1){
+      cont1.style.display = 'block';
+      cont3.style.display = 'none';
+    }
   }
-}
+}
+
+topic.addEventListener('click', async () => {
+  const tagsdata = await axios.get("https://api.quotable.io/tags");
+  console.log(tagsdata);
+  tag_cont.innerHTML = '';
+
+  adder='';
+  tagsdata.data.forEach(tag => {
+    adder+=`
+    <div className="tag">
+      <div className="tagName">${tag.name}</div>
+    </div>
+    `
+  })
+  tag_cont.innerHTML = adder;
+
+
+});