US3 - Symptoms

by sk8wt

HTML

<div class="top-bar">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Medication</a></li>
    <li><a href="#">Symptoms</a></li>
    <li><a href="#">Resources</a></li>
  </ul>
</div>
<H2>
  Medwatch Symptom Selector
</H2>
<H4>
  Please select the location of the symptoms that are you experiencing
</H4>
<div id="symptom-location-grid">
  <div id="symptom-location-check">
    <input type="checkbox" id="head" name="check-head">
    <label for="head">Head</label>
    <input type="checkbox" id="chest" name="check-chest">
    <label for="chest">Chest</label>
    <input type="checkbox" id="abdomen" name="check-abdomen">
    <label for="abdomen">Abdomen</label>
    <input type="checkbox" id="back" name="check-back">
    <label for="back">Back</label>
    <input type="checkbox" id="Arms" name="check-arms">
    <label for="arms">Arms</label>
    <input type="checkbox" id="Legs" name="check-legs">
    <label for="legs">Legs</label>
    
    <div id="symptom-location-img">
      <img src="https://i.pinimg.com/originals/ea/f4/47/eaf4473a17eb45c166231b03afef764c.jpg
" alt="body outline" width=200px>
    </div>
  </div>
</div>
<H4>
  Please select the severity of the symptoms that are you experiencing
</H4>
<select>
  <option value="High">High</option>
  <option value="Medium">Medium</option>
  <option value="Low">Low</option>
</select>

<h4>
  Did any of the following happen?
</h4>
<div>
  <input type="checkbox" id="Hosp" name="Hosp">
  <label for="Hosp">Hospitalization</label>
</div>

<div>
  <input type="checkbox" id="Help" name="Help">
  <label for="Help">Required help to prevent permanent harm</label>
</div>
<div>
  <input type="checkbox" id="Birth-def" name="Birth-def">
  <label for="Birth-def">Birth defect</label>
</div>
<div>
  <input type="checkbox" id="Sel-Other" name="Sel-Other">
  <label for="Sel-Other">Other severe medical issue</label>
</div>

<button type="button" id='submit-btn'>Next</button>

CSS

.top-bar,
#search-box,
.nav-list li,
.nav-list a {
  background-color: #002D45;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin: 0px;
  padding: 10px;
  display: flex;
  align-items: center;
}

#symptom-location-grid {
  display: grid;
  justify-content: space-evenly;
}

#symptom-location-check {
  justify-items: center;
}

#symptom-location-img {
 display: grid;
 justify-content: space-evenly;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  display: inline;
}

.nav-list li {
  float: left;
}

.nav-list a {
  display: inline;
  padding: 8px;
  text-decoration: none;
}

#search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

#toggle-search {
  position: relative;
  padding: 5px 0px;
  height: 100%;
  width: 100%;
}

#toggle-search img {
  margin-left: 94%;
}

#search-controls {
  background-color: #ffffff;
  padding: 5px 15px 15px 15px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 70%;
  display: flex;
  align-items: center;
}


#filter-parts {
  float: right;
  margin-left: auto;
  margin-right: 0;
  padding-right: 5px;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: table-cell;
  position: relative;
}

.catalog-part img {
  height: auto;
  vertical-align: middle;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

.catalog-part:hover .overlay {
  opacity: 0.75;
}

p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;
  overflow: scroll;
}

.catalog-part p {
  vertical-align: middle;
  text-align: center;
  color:...

JavaScript

$("submit-btn").click(function() {
  alert("Thank you!");
});