Merge pull request #5 from nomandhoni-cs/file-structure-transform

Implemented dynamically rendering to give page changing feel
nomandhoni-cs · May 10, 2023 · 47c0235 · 47c0235
2 parents e60aef9 + 5f211e6
commit 47c0235
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 15 deletions.
diff --git a/js/script.js b/js/script.js
@@ -87,3 +87,31 @@ getCurrentUrl()
     .catch(error => {
         console.error(error);
     });
+
+    const createPostBtn = document.getElementById('create-post-btn');
+    const postsListBtn = document.getElementById('posts-list-btn');
+    const settingBtn = document.getElementById('setting-btn');
+    // Dynamically render
+    function renderBlock(blockOrder){
+        const blocks = document.getElementsByClassName('block');
+        for (let i = 0; i < blocks.length; i++) {
+            if (i == blockOrder) {
+                blocks[i].style.display = 'block';
+            } else {
+                blocks[i].style.display = 'none';
+            }
+        }
+
+    }
+
+    createPostBtn.addEventListener('click', () => {
+      renderBlock(0);
+    });
+
+    postsListBtn.addEventListener('click', () => {
+      renderBlock(1);
+    });
+
+    settingBtn.addEventListener('click', () => {
+      renderBlock(2);
+    });
diff --git a/popup.html b/popup.html
@@ -9,22 +9,37 @@
 </head>
 <body>
     <div class="container">
-        <input type="text" placeholder="Post title" id="post-title">
-        <textarea placeholder="Post description" id="post-description"></textarea>
-        <button id="post-submit-btn">Post</button>
-        <button id="setting-btn">Settings</button>
+        <nav>
+            <!-- Create Posts, Posts List, Setting-->
+
+                <button><a href="#" id="create-post-btn" >Create Post</a></button>
+                <button><a href="#" id="posts-list-btn" >Posts List</a></button>
+                <button><a href="#" id="setting-btn" >Settings</a></button>
+
+        </nav>
+       <div class="block create-post-block">
+            <input type="text" placeholder="Post title" id="post-title">
+            <br>
+            <textarea placeholder="Post description" id="post-description"></textarea>
+            <br>
+            <button id="post-submit-btn">Post</button>
+       </div>
+       <div class="block posts-block">
+        <!-- Posts List  -->
+        <h3>Posts</h3>
+       </div>
+       <div class="block setting-block">
+        <!-- Modal to enter API key -->
+            <div class="modal" id="api-key-modal">
+                <div class="modal-content">
+                    <span class="close">&times;</span>
+                    <h2>Enter your Showwcase API key</h2>
+                    <input type="text" id="api-key-input" placeholder="API Key">
+                    <button id="save-api-key-btn">Save</button>
+                </div>
+            </div>
+       </div>
     </div>
-
-    <!-- Modal to enter API key -->
-    <div class="modal" id="api-key-modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <h2>Enter your Showwcase API key</h2>
-            <input type="text" id="api-key-input" placeholder="API Key">
-            <button id="save-api-key-btn">Save</button>
-        </div>
-    </div>
-
     <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -1,4 +1,16 @@
 body{
     width: 400px;
     height: 600px;
+    background: linear-gradient(0deg, #131720, #131720), linear-gradient(155.03deg, rgba(255, 255, 255, 0.06) 14.73%, rgba(255, 255, 255, 0) 64.1%);
+    background-blend-mode: normal, lighten;
+    color: aliceblue;
+}
+.create-post{
+    display: block;
+}
+.posts-block{
+    display: none;
+}
+.setting-block{
+    display: none;
 }