Funding Opps Cards

This is a svelte project that creates cards to display information from organizations about a specific opportunity. Information is pulled from firebase to generate these cards. These cards display with information like so, with '{}' indicating dynamically generated information:

{organization}: {name}

Deadline: {date}
{BE}
{CEE}
{ECE}
{organization} Grant Site

{summary}

The summary is automatically truncated to be 100 words, with 'Continue Reading' triggering a JavaScript function that toggles between the full summary and the truncated one.

Attributes

  • data-orientation - this attribute takes a string as a parameter (not case sensitive) and puts the main body of text in the corresponding area of the card. The current options we have for orientation are:
    • top - puts the main body of text in the top of the card, with other information below it
    • bottom - puts the main body of text in the bottom of the card, with other information above it
  • data-source - this attribute takes a string as a parameter (case sensitive) and finds a file with that name for data that can be used in place of firebase data. The current options for this are:
    • "{dependency tag of test data}" - uses development data: for testing purposes, not to be used on client end
    • "" - uses firebase data: for client end

Implementation

							
<div  
id="funding-cards"
class="row"
data-orientation="top"
data-source="" > 
</div>
<script defer="" src="path to build javascript file"></script>

Example