Scribd
Upload
7 views4 pages

Coding

The document is a template library webpage that fetches data from a Google Sheets CSV file and displays it in a categorized format. It includes a search feature to filter templates by title or topic, and highlights new templates. The layout is styled using CSS for a clean and user-friendly interface.

Uploaded by

sarairshad.2601
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views4 pages

Coding

The document is a template library webpage that fetches data from a Google Sheets CSV file and displays it in a categorized format. It includes a search feature to filter templates by title or topic, and highlights new templates. The layout is styled using CSS for a clean and user-friendly interface.

Uploaded by

sarairshad.2601
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">
<title>Template Library</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 1rem;
}
#templateContainer {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
}
.topic-section {
margin-bottom: 2rem;
border: 1px solid #c9e3db;
border-radius: 8px;
}
.topic-heading {
background-color: #c9e3db;
padding: 0.75rem 1rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.arrow {
transition: transform 0.3s;
}
.collapsed .arrow {
transform: rotate(-90deg);
}
.template-list {
list-style: none;
margin: 0;
padding: 0 1rem 1rem;
display: block;
}
.template-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.template-list a {
text-decoration: none;
color: #D2181F;
font-weight: 500;
}
.date {
margin-left: 10px;
font-size: 0.9em;
color: #666;
}
.new-badge {
background-color: #D2181F;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75em;
margin-left: 10px;
}
#searchInput {
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
max-width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>

<input type="text" id="searchInput" placeholder="Search


templates...">
<div id="templateContainer"></div>

<script>
const sheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-
1vQGpS9aBJqQpVuxCFtUi91QkjNT0r0Ic1XE8PTRIHQq3k7co9wCIA5P2thy4s
ka9IG_2aKinDYdMeIX/pub?output=csv';

fetch(sheetUrl)
.then(res => res.text())
.then(csvText => {
const rows = csvText.trim().split('\n');
const headers = rows.shift().split(',');
const data = rows.map(row => {
const values = row.split(',');
return headers.reduce((acc, header, i) => {
acc[header.trim()] = values[i] ? values[i].trim() : '';
return acc;
}, {});
});
initTemplateTable(data);
});

function initTemplateTable(data) {
const container = document.getElementById('templateContainer');

function renderTable(filteredData) {
container.innerHTML = '';
const grouped = {};
filteredData.forEach(item => {
if (!grouped[item.Topic]) grouped[item.Topic] = [];
grouped[item.Topic].push(item);
});

Object.entries(grouped).forEach(([topic, items]) => {


const section = document.createElement('div');
section.classList.add('topic-section');

const heading = document.createElement('div');


heading.className = 'topic-heading';
heading.innerHTML = `<span>${topic}</span><span
class="arrow">▼</span>`;

const list = document.createElement('ul');


list.className = 'template-list';
list.style.display = 'block';

heading.addEventListener('click', () => {
const isVisible = list.style.display !== 'none';
list.style.display = isVisible ? 'none' : 'block';
heading.classList.toggle('collapsed');
});

items.forEach(item => {
const listItem = document.createElement('li');
const dateParts = item.Date.split('/');
const fileDate = new Date(`20${dateParts[2]}`, dateParts[1] - 1,
dateParts[0]);

const now = new Date();


const isNew = now.getFullYear() === fileDate.getFullYear() &&
now.getMonth() === fileDate.getMonth();

listItem.innerHTML = `
<a href="${item.Link}" target="_blank">${item.Title}</a>
<span class="date">(${fileDate.toLocaleDateString('en-GB',
{ month: 'long', year: 'numeric' })})</span>
${isNew ? '<span class="new-badge">NEW</span>' : ''}
`;
list.appendChild(listItem);
});

section.appendChild(heading);
section.appendChild(list);
container.appendChild(section);
});
}

renderTable(data);

document.getElementById('searchInput').addEventListener('input', (e)
=> {
const value = e.target.value.toLowerCase();
const filtered = data.filter(item =>
item.Title.toLowerCase().includes(value) ||
item.Topic.toLowerCase().includes(value)
);
renderTable(filtered);
});
}
</script>

You might also like