added components.json

README.md

@@ -81,6 +81,15 @@ Open source in frontend development is a gateway to growth. Here's why:
 
  **4. Make changes and commit:**
 - Make your desired changes to the files in your local repository.
+- New component should be added in this manner only : *`components/<Name of the Component>`* with having index.html file inside it. Do some required changes in **components.json** file and add Name , URL (*Same as folder name of the component*) , Author name and Image-URL .  Your changes should be like this :
+  ```
+  {
+        "name" : "Name of the component",
+        "url" : "Component's folder name",
+        "authorName" : "My Name",
+        "imgUrl" : "./images/example.jpg"
+  }
+  ```
 - Use the following commands to stage and commit your changes:
 -  `git add.`
 -  `git commit -m "Your message"`

components.html

@@ -38,26 +38,10 @@
         </div>
     </nav>
 
-    <div class="wrapper">
-        <!-- card-1 -->
-        <div class="card">
-            <div class="poster"><a href="components/Login_page/login.html"><img
-                        src="images/pexels-bich-tran-2481177.jpg" alt="" /></a></div>
-            <div class="details">
-                <h1>Login Page</h1>
-                <h2>By : 12Kishan</h2>
-            </div>
-        </div>
+    <div class="wrapper" id="component-items">
+
+        <!-- components will be fetched here -->
 
-        <!-- card-2 -->
-        <div class="card">
-            <div class="poster"><a href="components/contact_form/index.html"><img src="images/contact.png" alt="" /></a>
-            </div>
-            <div class="details">
-                <h1>Contact Form</h1>
-                <h2>By : NaitikPatel-325</h2>
-            </div>
-        </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

components.json

@@ -0,0 +1,15 @@
+[
+    {
+        "name" : "Login Page",
+        "url" :"Login_page"  ,
+        "authorName" : "12Kishan",
+        "imgUrl" : "./images/view.jpg"
+    },
+    {
+        "name" : "Contact Form",
+        "url" :"contact_form"  ,
+        "authorName" : "NaitikPatel-325",
+        "imgUrl" : "./images/contact.png " 
+    }
+
+]

components/Login_page/login.html → components/Login_page/index.html

@@ -55,4 +55,4 @@
 
 </body>
 
-</html>
+</html>

script.js

@@ -1,3 +1,27 @@
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const parentDiv = document.getElementById("component-items");
+
+    fetch("./components.json")
+        .then(response => response.json())
+        .then(data => {
+            data.forEach(component => {
+                const newElement = document.createElement('div');
+                newElement.innerHTML = ` <div class="card">
+                <div class="poster"><a href="components/${component.url}"><img
+                            src="${component.imgUrl}" alt="${component.name}" /></a></div>
+                <div class="details">
+                    <h1>${component.name}</h1>
+                    <h2> By : ${component.authorName}</h2>
+                </div>
+            </div>`
+
+            parentDiv.appendChild(newElement);
+            });
+        })    
+})
+
 function searchComponents() {
     const searchInput = document.getElementById("searchInput").value.toLowerCase();
     const cards = document.querySelectorAll(".card");