index.html

---
layout: base
title: Home
---

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<section
    class="usa-banner"
    aria-label="Official website of the United States government"
>
    <div class="usa-accordion">
        <header class="usa-banner__header">
            <div class="usa-banner__inner">
                <div class="grid-col-auto">
                    <img
                        aria-hidden="true"
                        class="usa-banner__header-flag"
                        src="{{ site.baseurl }}/assets/img/us_flag_small.png"
                        alt=""
                    />
                </div>
                <div
                    class="grid-col-fill tablet:grid-col-auto"
                    aria-hidden="true"
                >
                    <p class="usa-banner__header-text">
                        An official website of the United States government
                    </p>
                    <p class="usa-banner__header-action">Here’s how you know</p>
                </div>
                <button
                    type="button"
                    class="usa-accordion__button usa-banner__button"
                    aria-expanded="false"
                    aria-controls="gov-banner-default"
                >
                    <span class="usa-banner__button-text"
                        >Here’s how you know</span
                    >
                </button>
            </div>
        </header>
        <div
            class="usa-banner__content usa-accordion__content"
            id="gov-banner-default"
        >
            <div class="grid-row grid-gap-lg">
                <div class="usa-banner__guidance tablet:grid-col-6">
                    <img
                        class="usa-banner__icon usa-media-block__img"
                        src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg"
                        role="img"
                        alt=""
                        aria-hidden="true"
                    />
                    <div class="usa-media-block__body">
                        <p>
                            <strong>Official websites use .gov</strong><br />A
                            <strong>.gov</strong> website belongs to an official
                            government organization in the United States.
                        </p>
                    </div>
                </div>
                <div class="usa-banner__guidance tablet:grid-col-6">
                    <img
                        class="usa-banner__icon usa-media-block__img"
                        src="{{ site.baseurl }}/assets/img/icon-https.svg"
                        role="img"
                        alt=""
                        aria-hidden="true"
                    />
                    <div class="usa-media-block__body">
                        <p>
                            <strong>Secure .gov websites use HTTPS</strong
                            ><br />A <strong>lock</strong> (
                            <span class="icon-lock"
                                ><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="52"
                                    height="64"
                                    viewBox="0 0 52 64"
                                    class="usa-banner__lock-image"
                                    role="img"
                                    aria-labelledby="banner-lock-description"
                                    focusable="false"
                                >
                                    <title id="banner-lock-title">Lock</title>
                                    <desc id="banner-lock-description">
                                        Locked padlock icon
                                    </desc>
                                    <path
                                        fill="#000000"
                                        fill-rule="evenodd"
                                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                                    />
                                </svg> </span
                            >) or <strong>https://</strong> means you’ve safely
                            connected to the .gov website. Share sensitive
                            information only on official, secure websites.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<header class="usa-header usa-header--basic">
    <div class="usa-nav-container" style="align-items: center">
        <div class="usa-navbar">
            <div class="usa-logo" id="-logo">
                <a href="{{site.baseurl}}/" title="Justic 40"
                    ><img
                        src="{{ site.baseurl }}/assets/img/logo.jpg"
                        style="height: 3rem"
                /></a>
            </div>
        </div>
        <nav aria-label="Primary navigation" class="usa-nav">
            <section>
                <div style="width: 16rem; text-align: right">
                    <a href="{{ site.baseurl }}/add-event">
                        <button
                            type="link"
                            class="usa-button usa-button--accent-cool margin-bottom-1 text-white"
                        >
                            Add an event
                        </button>
                    </a>
                    <div>events can only be added by</div>
                    <div>Federal employees with a .gov email</div>
                </div>
            </section>
        </nav>
    </div>
</header>
<main id="main-content">
    <section
        class="usa-hero"
        style="background-position: top"
        aria-label="Introduction"
    >
        <div class="grid-container">
            <div class="usa-hero__callout" style="max-width: 22rem">
                <h1 class="usa-hero__heading">
                    <span class="usa-hero__heading--alt margin-bottom-05"
                        >Justice40 events:</span
                    >Find relevant events to attend
                </h1>
                <p>
                    Engage with Federal programs tasked with delivering 40% of
                    the benefits of their programs to communities as a part of
                    <a href="#" class="text-white">Executive Order 14008</a>
                </p>
            </div>
        </div>
    </section>
    <section>
        <div class="grid-container">
            <div class="grid-row grid-gap">
                <div class="tablet:grid-col-8">
                    <h3 class="site-preview-heading">Find an event</h3>
                    <div id="loading-indicator">
                        Loading event information...
                    </div>
                    <ul class="usa-collection" id="events-collection"></ul>
                </div>
                <div class="tablet:grid-col-4 order-first desktop:order-last">
                    <div class="usa-form-group">
                        <label
                            class="usa-label"
                            id="appointment-date-label"
                            for="appointment-date"
                            >Event date</label
                        >
                        <div class="usa-hint" id="appointment-date-hint">
                            mm/dd/yyyy
                        </div>
                        <div class="usa-date-picker">
                            <input
                                class="usa-input"
                                id="appointment-date"
                                name="appointment-date"
                                aria-labelledby="appointment-date-label"
                                aria-describedby="appointment-date-hint"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<template id="event-template">
    <li class="usa-collection__item">
        <div class="usa-collection__calendar-date">
            <time datetime="2020-09-30T12:00:00+01:00"
                ><span class="usa-collection__calendar-date-month event_month"
                    >SEP</span
                >
                <span class="usa-collection__calendar-date-day event_day"
                    >26</span
                ></time
            >
            <div
                class="margin-top-1"
                style="
                    width: fit-content;
                    margin-left: auto;
                    margin-right: auto;
                "
            >
                <span class="usa-tag bg-base-darkest new_tag">New</span>
            </div>
        </div>
        <div class="usa-collection__body">
            <h3 class="usa-collection__heading">
                <a class="usa-link event_name" href="#"
                    >EPA's bi-weekly Tribal Nation engagement sessions</a
                >
            </h3>
            <div class="margin-top-05 event_tags"></div>
            <p class="usa-collection__description event_description">
                Today, the Administration announces the winners of the Gears of
                Government President’s Award. This program recognizes the
                contributions of individuals and teams across the federal
                workforce who make a profound difference in the lives of the
                American people.
            </p>
            <p>
                <span class="text-bold">Who should attend:</span>
                <span class="desired_attendees"
                    >Community Members, Potential granttees, other Federal
                    program officers</span
                >
            </p>
            <p>
                <span class="text-bold">Event type:</span>
                <span class="event_type"
                    >Online (recorded and distributed post session)</span
                >
            </p>
            <p>
                <span class="text-bold">Registration link:</span>
                <a href="http://www.epa.gov/register" class="registration_link"
                    >http://www.epa.gov/register</a
                >
            </p>
            <p>
                <span class="text-bold">Translation support:</span>
                <span class="translation_support"
                    >Offered in English with Spanish translation support for all
                    materials and discussions</span
                >
            </p>
            <div class="event_files" style="display: none">
                <div class="text-bold">Event artifacts</div>
            </div>
        </div>
    </li>
</template>
<script>
    const template = document.querySelector('#event-template')
    const eventTypeDescriptions = {
        online: 'Online (recorded and distributed post session)',
        'in-person': 'In person',
    }
    const translationSupportDescriptions = {
        yes: 'Yes',
        spanish:
            'Offered in English with Spanish translation support for all materials and discussions',
        'sign-language': 'Sign language',
        no: 'No',
    }
    const pastMonth = new Date()
    pastMonth.setMonth(pastMonth.getMonth() - 1)
    fetch(
        'https://b8gfzt5c.directus.app/items/event?sort=-event_date&fields=*,event_files.directus_files_id.*'
    )
        .then((resp) => resp.json())
        .then((resp) => {
            document.querySelector('#loading-indicator').remove()
            const events = resp.data
            events
                .filter((event) => event.status === 'published')
                .forEach((event) => {
                    const eventDateParts = event.event_date.split('-')
                    const eventDate = new Date(
                        eventDateParts[0],
                        eventDateParts[1] - 1,
                        eventDateParts[2]
                    )
                    const isNew = pastMonth - eventDate < 0
                    const eventElement = template.content.cloneNode(true)
                    if (!isNew) {
                        eventElement.querySelector('.new_tag').style.display =
                            'none'
                    }
                    eventElement.querySelector('.event_day').textContent =
                        eventDate.toLocaleString('default', { day: 'numeric' })
                    eventElement.querySelector('.event_month').textContent =
                        eventDate
                            .toLocaleString('default', { month: 'short' })
                            .toUpperCase()
                    eventElement.querySelector('.event_name').textContent =
                        event.event_name
                    eventElement.querySelector(
                        '.event_description'
                    ).textContent = event.event_description
                    eventElement.querySelector(
                        '.desired_attendees'
                    ).textContent = event.desired_attendees
                    eventElement.querySelector('.event_type').textContent =
                        eventTypeDescriptions[event.event_type]
                    eventElement.querySelector(
                        '.registration_link'
                    ).textContent = event.registration_link
                    eventElement.querySelector(
                        '.translation_support'
                    ).textContent =
                        translationSupportDescriptions[
                            event.translation_support
                        ]

                    if (event.event_tags !== null) {
                        const tagElements = event.event_tags.forEach((tag) => {
                            const tagElement = document.createElement('span')
                            tagElement.className = 'usa-tag bg-base-darkest'
                            tagElement.textContent = tag
                            eventElement
                                .querySelector('.event_tags')
                                .appendChild(tagElement)
                        })
                    }

                    if (event.event_files.length !== 0) {
                        event.event_files.forEach((event_file) => {
                            const fileDownload = document.createElement('a')
                            fileDownload.className =
                                'usa-link usa-link--alt usa-link--external'
                            fileDownload.href = `https://b8gfzt5c.directus.app/assets/${event_file.directus_files_id.id}?download`
                            fileDownload.download =
                                event_file.directus_files_id.filename_download
                            fileDownload.target = '_blank'
                            fileDownload.textContent =
                                event_file.directus_files_id.filename_download
                            eventElement
                                .querySelector('.event_files')
                                .appendChild(fileDownload)
                        })
                        eventElement.querySelector(
                            '.event_files'
                        ).style.display = 'block'
                    }
                    document
                        .querySelector('#events-collection')
                        .appendChild(eventElement)
                })
        })
</script>