The button element on the index.html currently has an event listener—not sure if anyone connected Javascript to this? but I don't think so—if I remember correctly, I included that as a placeholder, thinking it would be a pop-up. But now, for displaying this content, the emergency phone numbers, I'm planning to go about it similar to the About page and use an anchor tag:
I wrote the HTML below for the small screen and to draw this from Airtable, I plan to create a column called Emergency Crisis Lines, and add these numbers. Then the Emergency Crisis Lines page would have handlebars added. But first I'll write a crisis-lines.html and add the data to Airtable.
<main class="content-container">
<p class="how-to-call">Touch blue text to call.</p>
<div class="emergency-container">
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:911">911</a></h2>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:541-682-5111">CAHOOTS – Eugene only – 541-682-5111</a></h2>
<div class="divider-line"></div>
<h2 class="emergency-number h123-reset"><a href="tel:541-726-3714">CAHOOTS – Springfield only – 541-726-3714</a></h2>
<p class="emergency-description">Provides on-site care for mental health or substance abuse emergencies, conflict resolution/mediation, transport to other agencies, deals with housing crises and first aid. Dispatched by police non-emergency line. Hours: all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:1-800-422-4453">National Child Abuse Hotline – 1-800-422-4453</a></h2>
<p class="emergency-description">Available all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:541-485-6513">Womenspace – 541-485-6513</a></h2>
<p class="emergency-description">For all victims and survivors of domestic violence, intimate partner violence, sexual assault and stalking in Lane County. Available all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:1-888-989-9990">Looking Glass – 1-888-989-9990</a></h2>
<p class="emergency-description">Crisis prevention helpline for families with children or homeless youth ages 17 and under. Available all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:1-800-273-8255">Thoughts of Suicide – 1-800-273-8255</a></h2>
<p class="emergency-description">National Suicide Prevention Lifeline. Available all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:1-877-565-8860">Trans Lifeline – 1-877-565-8860</a></h2>
<p class="emergency-description">Provides peer counseling for transgender individuals in crisis. Available every day, beginning 7:00am and through the day to past midnight, closing at 1:00am.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:1-866-488-7386">Trevor Lifeline – 1-866-488-7386</a></h2>
<p class="emergency-description">A crisis intervention and suicide prevention phone service for LGBTQIA. Or, text “START” to 678678 (standard text messaging rates apply). Available all day, every day.</p>
</div>
<div class="emergency-line">
<h2 class="emergency-number h123-reset"><a href="tel:541-687-4000">White Bird 24/7 Crisis Line – 541-687-4000</a></h2>
<div class="divider-line"></div>
<h2 class="emergency-number h123-reset"><a href="tel:1-800-422-7558">White Bird 24/7 Crisis Line – 1-800-422-7558</a></h2>
<p class="emergency-description">Crisis intervention, mental health referral and transportation assistance for people with mental health needs in Eugene or Springfield without homes. Available all day, every day.</p>
</div>
</div>
</main>
The button element on the index.html currently has an event listener—not sure if anyone connected Javascript to this? but I don't think so—if I remember correctly, I included that as a placeholder, thinking it would be a pop-up. But now, for displaying this content, the emergency phone numbers, I'm planning to go about it similar to the About page and use an anchor tag:
<button onclick="emergencyCrisis()" class="emergency-button"> <span class="emergency-text">Emergency Crisis Lines</span></button>
I wrote the HTML below for the small screen and to draw this from Airtable, I plan to create a column called Emergency Crisis Lines, and add these numbers. Then the Emergency Crisis Lines page would have handlebars added. But first I'll write a crisis-lines.html and add the data to Airtable.