Help, using HTML to make full card a clickable link vs just a button

1

Hello!

I'm working with a Hype doc that generates a list of cards from a Google sheet. I've figured out how to make a button on each card linkable and clickable, but I can't work out how to make the entire individual card clickable and linked instead.

I've tried to reposition the <a href="${row.programLink}"> around card divs per other forum tips but it doesn't work. Any advice is appreciated!

This is the code -

fetch('https://opensheet.vercel.app/1ITaHyD5rtdTt5iPPKU6R0p25ww_om7Z-PpFDbXwdPw4/Reco1')
	.then(res => res.json())
	.then(data => {
		data.forEach(row => {
			let orgCard = document.createElement('div');
			let bookmarkStatus = '';
			if (row.isBookmarked === 'FALSE') {
				bookmarkStatus = '';
			} else {
				bookmarkStatus = 'checked';
			}
			
			orgCard.classList.add('card-org');
			orgCard.innerHTML = `
				<div class="card-header">
					<h2>${row.orgProgram}</h2>
					<label class="bookmark-container"><input type="checkbox" class="bookmark-status" ${bookmarkStatus}></input><svg class="bookmark-icon"><use xlink:href="#icn-bookmark" /></svg></label>
					<img class="org-logo" src="${row.orgLogoURL}" alt="${row.orgName}" />
					<div class="program-metadata">
						<span class="metadata program-type">${row.programType}</span>
						<span class="metadata program-secondary">${row.programSecondary}</span>
					</div>
					
				</div>
				
				<div class="card-body">
					<ul class="program-facts">
						<li>${row.tuitionCoverage}% tuition covered</li>
						<li>In-person and online</li>
						<li>Coaching support</li>
					</ul>
									</div>
				<div class="card-footer">
					<span class="card-chip">Employee favorite</span>
					<a href="${row.programLink}"> <button class="card-btn">Learn More</button> </a>
				</div>`
		;
		
			programsList.appendChild(orgCard);
	    })
});
2

I suspect the problem you are running into is that the label and svg is taking up a lot of the card, and the label is probably getting the clicks. Regardless, there's a good chance you might not even want to use an <a> tag for this anyhow, as that's a bit more for text and makes it blue/underlined all throughout.

I'd probably just add an onclick handler to the orgCard element (along with changing the cursor type). Something like:

orgCard.onclick = function() { 
	location.href = row.programLink;
};
orgCard.style.cursor = "pointer";

But realistically you may need better styling to make it more obvious. IMHO the button works pretty well :slight_smile:.

1 Like
3

Awesome thank you!! Where in the code should I add this? Thanks! Appreciate your help

4

place it just before:

programsList.appendChild(orgCard);

Also note it needs to be orgCard.style.cursor = "pointer" not orgCard.cursor = "pointer"

( now corrected in above posts :smiley: )

4 Likes
5

Amazing, thanks so much! :pray: Saved me so much time figuring this out. It works!

2 Likes