Handle clicking of options in menu #13

css/main.css

@@ -79,7 +79,7 @@ header a, header button {
 }
 
 #pageTitle:hover, #pageTitle:active {
-	color: #000;
+	color: #6F1F2E;
 }
 
 .aboutButton {
@@ -308,6 +308,10 @@ header a, header button {
 	margin: 1px 0px;
 }
 
+.selectOption.active {
+	background-color: #CF96A0;
+}
+
 #siteOptions {
 	width: 80%;
 	margin: 20px auto;

js/main.js

@@ -256,6 +256,22 @@ document.addEventListener("click", function(event) {
 	hideSeriesOptions()
 });
 
+//toggles checkbox and highlight for options in series menus
+$(window).on('load', function () {document.querySelectorAll('.selectOption').forEach(el => {
+	el.addEventListener("click", function(event) {
+		//toggle highlight
+		var active = this.classList.toggle('active')
+		//toggle checkbox
+		checkbox = this.firstElementChild
+		if(active) {
+			checkbox.checked = true; 
+		}
+		else {
+			checkbox.checked = false; 
+		}
+	})
+})})
+
 //if site was loaded using a permalink, modifies startDate, endDate, and whichBuildings
 function parsePermalink(){
 	permalinked = URLComponents.length==2