Merge pull request #8 from cse110-sp24-group31/7-integrate-project-ca…

…rd-with-modal 7 integrate project card with modal
cse110-sp24-group31 · May 12, 2024 · 87b43a5 · 87b43a5
2 parents 79b0588 + 38f70bb
commit 87b43a5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,35 @@
 
 Main project for CSE 110. Includes calendar, journal entries, contact pages, progression meter, a task list, all within a polish UI
 
-# Project cards
+# preview
 
+### home page
+
+# Documentation
+
+## project-card
+
+- HTML element name: `project-card`
+- JS element class: `ProductCard`
+- sample project card HTML:
+
+```HTML
+<project-card>
+  <div class="project-card">
+    <p class="name">warmup</p>
+    <img src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" alt="warmup" class="project-image">
+    <div class="desc">a warmup project</div>
+    <div class="progress-bar">
+      <div class="progress-bar-fill" style="width: 79%;">79</div>
+    </div>
+    <div class="actions">
+      <button>progress + random</button>
+      <button>open</button>
+      <button>options</button>
+    </div>
+  </div>
+</project-card>
+```
 
 # projects.JSON
 

diff --git a/assets/components/project-card.js b/assets/components/project-card.js
@@ -25,13 +25,11 @@ class ProjectCard extends HTMLElement {
                             'progress-bar'
                             'actions';
                           grid-template-rows: 10% 40% 35% 5% 10%;
-                          height: 100%;
-                          max-height: 600px;
+                          height: 600px;
                           min-height: 300px;
                           filter: drop-shadow(0px 0px 10px rgb(0, 0, 0, 0.2));
                           padding: 0px 20px;
-                          width: 100%;
-                          max-width: 400px;
+                          width: 360px;
                           min-width: 200px;
                         }
                         .project-card .name {
@@ -153,9 +151,7 @@ class ProjectCard extends HTMLElement {
     });
     debugAddProgress.innerText = 'progress + random';
     const open = document.createElement('button');
-    open.addEventListener('click', _ => {
-      alert('open');
-    });
+    open.addEventListener('click', e => showModal_projectCard(e, open, data));
     open.innerText = 'open';
     const options = document.createElement('button');
     options.addEventListener('click', _ => {
@@ -179,3 +175,13 @@ class ProjectCard extends HTMLElement {
 }
 
 customElements.define('project-card', ProjectCard);
+
+// Function to show the modal
+function showModal_projectCard(e, btn, data) {
+  e.preventDefault();
+  console.log(btn);
+  const modal = document.getElementById('projectView');
+  const modalContent = modal.querySelector('.modal-content p');
+  modalContent.textContent = 'Content for ' + data.desc; // Set the content dynamically
+  modal.style.display = 'block'; // Show the modal
+}
diff --git a/index.html b/index.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Developer Jounal</title>
     <!-- FONTS -->
 
-
     <!-- SCRIPS -->
     <script src="assets/scripts/main.js"></script>
+    <script rel="module" src="assets/scripts/homepage.js"></script>
+
+    <!-- COMPONENTS -->
+    <script rel="module" src="assets/components/project-card.js"></script>
 
     <!-- STYLESHEETS -->
     <link rel="stylesheet" href="assets/styles/homepage.css">
@@ -23,11 +27,10 @@
 
     <div class="main">
         <!-- PROJECT CARDS SECTION -->
-        <div class="project-cards" id="project-cards">
+        <div class="project-cards" id="project-cards-parent">
             <div class="card new-card">
                 <div class="add-icon">+ Add new project</div>
             </div>
-            <div class="card"></div>
         </div>
 
         <!-- SIDEBAR -->
@@ -40,7 +43,7 @@
                     <button id="cal-next"></button>
                 </div>
 
-                <div class="days"> 
+                <div class="days">
                     <div class="day">Mon</div>
                     <div class="day">Tue</div>
                     <div class="day">Wed</div>
@@ -61,9 +64,9 @@
 
 
     <!-- BOTTOM FOOTER -->
-    <div class="bottom-tab">   
+    <div class="bottom-tab">
     </div>
-    
+
 
     <div id="projectView" class="modal">
         <div class="modal-content">
@@ -74,4 +77,5 @@
 
     <script src="assets/scripts/calendar.js"></script>
 </body>
+
 </html>