J Term - Individual Coding Assignment

Alli

by sk8wt

HTML

<div class="header">
    <h1><em>CHARLOTTESVILLE RESOURCES</em></h1>
  </div>
  <div class="subheader">
    <h2 id=counseling>
      <strong>COUNSELING</strong> - Make an appointment
    </h2>
    <img id=counsel-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

  <div class=list id=counsel-list>
    <ul>
      <li> 434-295-7273 - Sexual Assault Resource Agency (SARA) </li>
      <li> Ipsum </li>
    </ul>
    </div>

  <div class="subheader">
    <h2>
      <strong>HOTLINES</strong> - Talk to someone now
    </h2>
    <img id=hotline-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

 <div class=list id=hotline-list>
    <ul>
      <li> 434-293-8509 - The Shelter for Help in Emergency</li>
      <li> 434-977-7273 - Sexual Assault Resource Agency (SARA) </li>
      <li> 800-838-8238 - Virginia Family Violence and Sexual Assault Hotline</li>
    </ul>
    </div>

  <div class="subheader">
    <h2>
      <strong>SHELTER</strong> - A safe place, today
    </h2>
    <img id=shelter-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

 <div class=list id=shelter-list>
    <ul>
      <li> <a href="https://www.shelterforhelpinemergency.org/shelter-tour"><strong>Shelter for Help in Emergency</strong></a> </li>
      <li> Ipsum </li>
    </ul>
    </div>

CSS

.header {
  text-align: center;
  color: black;
  font-size: 18px;
  font-family: helvetica, sans-serif;
  margin-bottom: 50px;
}

.subheader {
  text-align: left;
  color: White;
  font-size: 14px;
  border-style: Solid;
  border-color: black;
  margin: 20px;
  margin-bottom: -3px;
  background: grey;
  font-family: helvetica, sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}

.chevron {
  height: 30px;
}

.list {
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 15px;
  border-style: solid;
  border-color: black;
  display: none;
  background-color: grey;
  font-family: helvetica, sans-serif;
  font-style: bold;
  color: white;
}

body {
   
background-image: url("http://thehealingcottage.com.au/wp-content/uploads/2018/10/AdobeStock_201314841.jpeg");
background-size: 900px;
}

JavaScript

/*
Specify number of degrees to rotate image by. In the beginning, the
image should not be rotated. 

Try changing this value to see what the initial orientation of the arrow 
becomes as you click on the option. 

We create different variables because we have different IDs for the chevrons. If we used the same variable, then theoretically I could have an arrow facing upwards for a box that's closed purely because another box is also open. So this is good for separating the behavior. 
*/
var counsel_deg = 0
var hotline_deg = 0

$("#counsel-chev").click(function() {
  $("#counsel-list").toggle(400);
  console.log("It clicked");
  
  /*
  Quick logic to change the orientation of the arrow depending on the current orientation. If we started at 0 degrees and someone clicked the box, it makes sense to flip it by 180 degrees (and vice-versa)
  */
  if (counsel_deg == 180) counsel_deg = 0
  else counsel_deg = 180
  
 	/*
  We directly edit the HTML using Javascript by applying the rotation function to the HTML. 
  */
	document.getElementById("counsel-chev").style = 'transform: rotate(' + counsel_deg + 'deg)';
});

$("#hotline-chev").click(function() {
  $("#hotline-list").toggle(400);
  console.log("It clicked");
  
  if (hotline_deg == 180) hotline_deg = 0
  else hotline_deg = 180
  
	document.getElementById("hotline-chev").style = 'transform: rotate(' + hotline_deg + 'deg)';
});

$("#shelter-chev").click(function() {
  $("#shelter-list").toggle(400);
  console.log("It clicked");
});