diff --git a/README.md b/README.md index 4c6a7f2..4aef30c 100644 --- 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 + +
+

warmup

+ warmup +
a warmup project
+
+
79
+
+
+ + + +
+
+
+``` # projects.JSON diff --git a/assets/components/project-card.js b/assets/components/project-card.js index 0394d91..a4c98cc 100644 --- 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 index dba6207..ab002be 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,18 @@ + Developer Jounal - + + + + @@ -23,11 +27,10 @@
-
+
+ Add new project
-
@@ -40,7 +43,7 @@
-
+
Mon
Tue
Wed
@@ -61,9 +64,9 @@ -
+
- +