💄Project carousel #71

index.html

@@ -16,9 +16,12 @@ <h1>Welcome</h1>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 <!-- google fonts end -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Manrope:wght@200&family=Monoton&family=Roboto:wght@300&family=Tilt+Prism&family=Ysabeau+SC:wght@1;100&display=swap" rel="stylesheet">
   <title>Collaboration and Contribution</title>
   <link rel="stylesheet" href="./src/css/style.css">
+  <!-- Script to link to the ts file -->
+  <script defer type="module" src="dist\out-tsc\index.js"></script>
 
 
 </head>
@@ -85,7 +88,14 @@ <h1 id="about">Learning design</h1>
         <!--  -->
     </div>       
       <!-- end of education solutions -->
-
+      <div id="project-section">
+      <h1 class="projects-header">Projects</h1>
+      <div id="projects-display"></div>
+      <div id="arrow" >
+        <i id="left-arrow" class="fas fa-chevron-left"></i>
+        <i id="right-arrow" class="fas fa-chevron-right"></i>
+      </div>
+    </div>
 
 
       <!--news section-->

src/css/style.css

@@ -897,3 +897,69 @@ hr{
     }
 }
 
+/* Style for the Project section */
+#project-section{
+  background-color: white;
+}
+.projects-header{
+padding-bottom: 30px;
+font-size: 50px;
+}
+#projects-display{
+  display: flex;
+  gap: 20px;
+  overflow: hidden;
+
+}
+.project{
+  background-color: #F9F8F4;
+}
+
+
+.project img {
+  width: 300px;
+  height: 300px;
+}
+
+.tag {
+  background-color: #fff ;
+  padding: 5px 10px;
+
+  border-radius: 5px;
+  display: inline-block;
+  margin-top: 5px;
+  cursor: pointer;
+}
+
+/* Style for the project title */
+.project h2 {
+  font-size: 18px;
+  margin: 10px 0;
+}
+
+/* Style for the project description */
+.project p {
+  font-size: 14px;
+  margin: 10px 0;
+}
+#arrow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  float: right;
+  font-size: 30px;
+  margin-right: 20px;
+  cursor: pointer;
+
+}
+
+/* Style for the left and right arrows */
+#left-arrow{
+  padding-right: 10px;
+}
+
+#left-arrow:hover, #right-arrow:hover {
+  color: darkblue; 
+}
+
+/* End of Style for the project section */

src/ts/index.ts

@@ -18,5 +18,134 @@ document.addEventListener("DOMContentLoaded", () => {
         iconTwo.style.display = "none";
       });
     }
-  });
-
+    //structure for the mock data
+    interface ProjectItem{
+      title:string
+      descriptions:string
+      tag:string
+      imgSrc:string
+    }
+
+    //Constant description to cut out repetition
+    const description="Eos qui ratione voluptatem suqui nesciunt.Neque porro quisquam dolorem ipsum quia"
+
+    //The actual Mock data
+    const mockProject:ProjectItem[]=[
+      {
+        imgSrc:"https://rb.gy/5ygcu",
+        tag:"Education",
+        title:"Introducting Coversational learning ipsum dolar",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Environment",
+        title:"Content development for a sustainable future",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Health care",
+        title:"Large scale trainin for healthcare professionals",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://rb.gy/5ygcu",
+        tag:"Education",
+        title:"Introducting Coversational learning ipsum dolar",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Environment",
+        title:"Content development for a sustainable future",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Health care",
+        title:"Large scale training for healthcare professionals",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://rb.gy/5ygcu",
+        tag:"Education",
+        title:"Introducting Coversational learning ipsum dolar",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Environment",
+        title:"Content development for a sustainable future",
+        descriptions:description
+      },
+      {
+        imgSrc:"https://cdn.pixabay.com/photo/2015/03/21/10/26/environmental-protection-683437_1280.jpg",
+        tag:"Health care",
+        title:"Large scale training for healthcare professionals",
+        descriptions:description
+      },
+    ]
+    //Get the div element from the html
+    const projectsDisplay=document.getElementById("projects-display") as HTMLDivElement
+    console.log(projectsDisplay)
+    //iterate over the mock data to display them in cards
+    mockProject.forEach((project)=>{
+      const card = document.createElement("div");
+        card.className = "project";
+      //image for mock data
+        const img = document.createElement("img");
+        img.src = project.imgSrc;
+        img.alt = project.title;
+        //title for mock data
+        const h2 = document.createElement("h2");
+        h2.textContent = project.title;
+        //paragraph for mock data
+        const p = document.createElement("p");
+        p.textContent = project.descriptions;
+        //span for mock data
+        const span = document.createElement("span");
+        span.className = "tag";
+        span.textContent = project.tag;
+        card.append(img,span, h2, p);
+        projectsDisplay.appendChild(card);
+    })
+    //Grab the arrows from the html
+    const leftArrow=document.getElementById("left-arrow")
+    const rightArrow=document.getElementById("right-arrow")
+    //Initial scroll position set to 0
+    let scrollPosition=0;
+    //My image width initial being 300px 
+    const imageWidth=300;
+
+    //Event listener to handle the left arrow click
+    leftArrow?.addEventListener('click',()=>{
+     scrollPosition-=imageWidth
+     //Condition of reaching far left end of the page
+     if(scrollPosition<0){
+      scrollPosition=0
+     }
+     //Apply the scroll method on the project to scroll items to the left
+     projectsDisplay.scroll({
+      left:scrollPosition,
+      behavior:"smooth"
+     })
+    })
+
+    //Event listener to handle right arrow click
+    rightArrow?.addEventListener("click", () => {
+      //Scroll position set as equal to image width
+      scrollPosition += imageWidth;
+      //Condition checking whether we have reached the end of our page
+      if (scrollPosition > projectsDisplay.scrollWidth - projectsDisplay.clientWidth) {
+        scrollPosition = projectsDisplay.scrollWidth - projectsDisplay.clientWidth;
+      }
+      //Apply the scroll method on the project to scroll items to the right
+      projectsDisplay.scroll({
+        left: scrollPosition,
+        behavior: "smooth",
+      });
+    });
+
+
+    })