Merge pull request #2 from ZaheerAhmedkhan65/main

added a javasript file to create elements and give classes to them
epicbuzz · Sep 16, 2024 · bc0bb03 · bc0bb03
2 parents 12d92b8 + c741e92
commit bc0bb03
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 311 deletions.
diff --git a/index.html b/index.html
@@ -1,12 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link rel="shortcut icon" href="./resources/images/favicon_io/site.webmanifest" type="image/x-icon">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel="stylesheet" href="./resources/css/styles.css">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Development</title>
 </head>
+<style>
+
+
+  .class-box{
+    width: 18rem;
+    align-self: normal;
+
+  }
+
+  .class-box a{
+    margin-top: auto;
+  }
+</style>
 <body>
   <header class="d-flex align-items-center border-primary bg-primary">
     <div class="logo-wrapper ms-3">
@@ -17,79 +32,24 @@ <h2 class="text-white">LIVE SECTION</h2>
     </div>
   </header>
   <div class="container">
-    <script>
-        const weeksCount = 10;
-    </script>
-
-<ul  class="d-flex align-items-center justify-content-between flex-wrap gap-3 mt-4">
-  <li class="list-group-item">
-    <a href="week-1/intro.html">
-      <button type="button" class="btn btn-outline-primary">Week 1</button>
-    </a>
-  </li>
-
-  <li class="list-group-item">
-    <a href="week-2/ludo.html">
-      <button type="button" class="btn btn-outline-primary">Week 2</button>
-    </a>
-  </li>
-  <li class="list-group-item">
-    <a href="week-3/form.html">
-      <button type="button" class="btn btn-outline-primary">Week 3</button>
-    </a>
-  </li>
+    <div id="classList"></div>
+  </div>
 
-  <li class="list-group-item">
-    <a href="week-4/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 4</button>
-    </a>
-  </li>
 
-  <li class="list-group-item">
-    <a href="week-5/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 5</button>
-    </a>
-  </li>
+  <template id="classtemplate">
+    <div class="card">
+     <div class="card-title">
+       <h2> {{heading}}</h2>
+     </div>
 
-  <li class="list-group-item">
-    <a href="week-6/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 6</button>
-    </a>
-  </li>
+     <div class="card-body">
 
-  <li class="list-group-item">
-    <a href="week-7/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 7</button>
-    </a>
-  </li>
-
-  <li class="list-group-item">
-    <a href="week-8/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 8</button>
-    </a>
-  </li>
-
-  <li class="list-group-item">
-    <a href="week-9/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 9</button>
-    </a>
-  </li>
-
-
-  <li class="list-group-item">
-    <a href="week-10/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 10</button>
-    </a>
-  </li>
-
-  <li class="list-group-item">
-    <a href="week-11/index.html">
-      <button type="button" class="btn btn-outline-primary">Week 11</button>
-    </a>
-  </li>
-</li>
-</ul>
-</div>
+     </div>
 
+     <div class="card-footer">
+     </div>
+    </div>
+  </template>
+  <script src="./resources/js/script.js"></script>
 </body>
 </html>
diff --git a/resources/images/favicon_io/android-chrome-192x192.png b/resources/images/favicon_io/android-chrome-192x192.png
diff --git a/resources/images/favicon_io/android-chrome-512x512.png b/resources/images/favicon_io/android-chrome-512x512.png
diff --git a/resources/images/favicon_io/apple-touch-icon.png b/resources/images/favicon_io/apple-touch-icon.png
diff --git a/resources/images/favicon_io/favicon-16x16.png b/resources/images/favicon_io/favicon-16x16.png
diff --git a/resources/images/favicon_io/favicon-32x32.png b/resources/images/favicon_io/favicon-32x32.png
diff --git a/resources/images/favicon_io/favicon.ico b/resources/images/favicon_io/favicon.ico
diff --git a/resources/images/favicon_io/site.webmanifest b/resources/images/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/resources/images/infiniti-dev_logo.png b/resources/images/infiniti-dev_logo.png
diff --git a/resources/js/script.js b/resources/js/script.js
@@ -0,0 +1,54 @@
+let classList = document.getElementById("classList");
+const weekCount = 10;
+
+classList.classList.add("d-flex" ,"align-items-center", "flex-wrap" ,"gap-3" ,"my-5")
+
+const data = {
+            ytLinks : ["https://youtu.be/YK1xR1TmnIY?si=n1hnTi_uMBPeGgFm","https://youtu.be/Uj36nI2J7Ac?si=Ddgqer9lSKBDhDG3",
+                    "https://youtu.be/fi5E3RFRf_k?si=_HKGi-AP_oHsJMGL","https://youtu.be/HnaOek-PqSY?si=ReGlPy0Uj-vO4kye",
+                    "https://youtu.be/tcMvxFGvcfs?si=bsy6_Ge8As1ZSjCr","week-8/index.html",
+                    "week-9/index.html","week-10/index.html"
+                   ],
+            topic : [
+                    "Introduction to HTML and CSS","CSS Box Model and Ludo Layout",
+                    "Form and Input types" , "Flex , Float and Margin",
+                    "CSS Sudo classes and Page Responsivness","Introduction to Javascript",
+                    "Javacript variables","Operators and Conditions",
+                    "Functions and Recape of previous lectures","Loop,Javascript Events and Bootstrap"
+                    ]
+};
+
+onload = ()=>{
+for(var i = 0 ; i< weekCount ; i++){
+        let classDom = document.createElement("div");
+        classList.appendChild(classDom);
+        classDom.classList.add("card","class-box");
+    let cardbody= document.createElement("div");
+    classDom.appendChild(cardbody);
+    cardbody.classList.add("card-body", "d-flex", "flex-column")
+    let title = document.createElement("h4");
+    cardbody.appendChild(title);
+    title.textContent = `Week ${i+1}`;
+    title.classList.add("mb-2")
+    let description = document.createElement("p");
+    cardbody.appendChild(description);
+    description.textContent = data.topic[i];
+    let cardFooter = document.createElement("div");
+    cardbody.appendChild(cardFooter);
+    let a = document.createElement("a");
+    cardFooter.appendChild(a);
+    cardFooter.classList.add("d-flex","justify-content-between")
+    a.href = `./week-${i+1}/index.html`;
+    let button = document.createElement("button");
+    a.appendChild(button);
+    button.classList.add("btn","btn-outline-primary");
+    button.textContent = "Read it!";
+    let ytBtn = document.createElement("a"); 
+    cardFooter.appendChild(ytBtn);
+    let videoButton = document.createElement("i");
+    videoButton.classList.add("ri-youtube-fill" ,"btn" ,"text-danger" , "fs-5");
+    ytBtn.href = data.ytLinks[i];
+    ytBtn.appendChild(videoButton);
+
+}
+}
diff --git a/week-1/intro.html → week-1/index.html b/week-1/intro.html → week-1/index.html
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}