nettika/projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create a Project Card web component

Browse source
This commit is contained in:
Nettika 2026-01-25 14:35:44 -08:00
parent f33746a274
commit ac64fd8ebe
No known key found for this signature in database
2 changed files with 91 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/project-card.js Normal file
View file

@ -0,0 +1,90 @@
class ProjectCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
static get observedAttributes() {
return ['title', 'percentage', 'archived'];
}
attributeChangedCallback() {
this.render();
}
render() {
const title = this.getAttribute('title') || 'Untitled Project';
const percentage = parseInt(this.getAttribute('percentage')) || 0;
const archived = this.getAttribute('archived') === 'true';
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
.card {
border: 1px solid var(--color-bg-secondary, #e9e9e9);
border-radius: var(--border-radius, 5px);
box-shadow: var(--box-shadow, 2px 2px 10px) var(--color-shadow, #f4f4f4);
padding: 1.25rem;
margin: 1rem;
width: var(--width-card, 285px);
background: var(--color-bg, #fff);
}
.card:hover {
box-shadow: var(--box-shadow, 2px 2px 10px) var(--color-bg-secondary, #e9e9e9);
}
.card.archived {
opacity: 0.6;
}
.title {
font-weight: bold;
margin-bottom: 0.5rem;
color: var(--color-text, #000);
}
.progress-bar {
width: 100%;
height: 20px;
background-color: var(--color-bg-secondary, #e9e9e9);
border-radius: var(--border-radius, 5px);
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
height: 100%;
background-color: var(--color-link, #118bee);
transition: width 0.3s ease;
}
.percentage {
font-size: 0.9rem;
color: var(--color-text-secondary, #999);
}
.archived-badge {
display: inline-block;
background-color: var(--color-text-secondary, #999);
color: white;
padding: 0.2rem 0.5rem;
border-radius: var(--border-radius, 5px);
font-size: 0.8rem;
margin-left: 0.5rem;
}
</style>
<div class="card ${archived ? 'archived' : ''}">
<div class="title">
${title}
${archived ? '<span class="archived-badge">Archived</span>' : ''}
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: ${percentage}%"></div>
</div>
<div class="percentage">${percentage}% complete</div>
</div>
`;
}
}
customElements.define('project-card', ProjectCard);