added feature for tags

Author: khajatakreemulla

assets/css/index.css

@@ -861,7 +861,7 @@ li.timer span {
 	#schedule-date {
 		top: 0px !important;
 	}
-	#jun27 {
+	#past-talk-details {
 		top: 0px !important;
 	}
 }
@@ -875,47 +875,29 @@ li.timer span {
 	/* text-align: center; */
 	padding-left: 10px;
 }
-#jun27 {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-webkit-box-orient: horizontal;
-	-webkit-box-direction: normal;
-	-ms-flex-direction: row;
-	flex-direction: row;
-	-ms-flex-wrap: wrap;
-	flex-wrap: wrap;
-	-ms-flex-pack: distribute;
-	justify-content: space-around;
+#past-talk-details {
 	position: relative;
-	top: -30px;
-}
-
-.jun27-items {
-	display: -webkit-box;
-	display: -ms-flexbox;
+	top: -30px; 
 	display: flex;
-	-ms-flex-wrap: wrap;
 	flex-wrap: wrap;
-	-webkit-box-flex: 0;
-	-ms-flex: 0 1 525px;
-	flex: 0 1 525px;
 }
 
-.jun27-child {
-	display: -webkit-box;
-	display: -ms-flexbox;
+.past-talk-details-list {
 	display: flex;
-	-webkit-box-orient: horizontal;
-	-webkit-box-direction: normal;
-	-ms-flex-direction: row;
-	flex-direction: row;
-	-ms-flex-pack: distribute;
-	justify-content: space-around;
+	flex-basis: 50%;
 	padding: 20px;
 	padding-top: 45px !important;
 }
 
+@media all and (max-width: 850px){
+	#past-talk-details {
+		justify-content: center;
+	}
+	.past-talk-details-list{
+		flex-basis: 100%;
+	}
+}
+
 .jun27-hr {
 	width: 100px;
 	height: 0px;

assets/js/filters.js

@@ -0,0 +1,67 @@
+var pastTalkDetailsElement = document.querySelector("#past-talk-details")
+var masterTalk = document.querySelector("#masterTalk")
+var showTalk = document.querySelector("#showTalk")
+var careerTalk = document.querySelector("#careerTalk")
+var allTalks = document.querySelector("#allTalks")
+
+allTalks.classList.add("badge-dark")
+
+masterTalk.addEventListener("click", ()=>{
+    var speakersData = pastTalkDetailsElement.querySelectorAll('.speakers-data-2')
+    var speakerClassFilter = masterTalk.getAttribute("data-talk")
+    speakersData.forEach(data => {
+        var jun27ChildElement = data.parentElement.parentElement;
+        jun27ChildElement.style.display = "none"
+        if(data.innerText.toLowerCase() === speakerClassFilter.toLowerCase()){
+            data.parentElement.parentElement.style.display = "flex"
+            masterTalk.classList.add("badge-dark")
+            allTalks.classList.remove("badge-dark")
+            showTalk.classList.remove("badge-dark")
+            careerTalk.classList.remove("badge-dark")
+        }
+    })
+})
+
+showTalk.addEventListener("click", ()=>{
+    var speakersData = pastTalkDetailsElement.querySelectorAll('.speakers-data-2')
+    var speakerClassFilter = showTalk.getAttribute("data-talk")
+    speakersData.forEach(data => {
+        var jun27ChildElement = data.parentElement.parentElement;
+        jun27ChildElement.style.display = "none"
+        if(data.innerText.toLowerCase() === speakerClassFilter.toLowerCase()){
+            data.parentElement.parentElement.style.display = "flex"
+            masterTalk.classList.remove("badge-dark")
+            allTalks.classList.remove("badge-dark")
+            showTalk.classList.add("badge-dark")
+            careerTalk.classList.remove("badge-dark")
+        }
+    })
+})
+
+careerTalk.addEventListener("click", ()=>{
+    var speakersData = pastTalkDetailsElement.querySelectorAll('.speakers-data-2')
+    var speakerClassFilter = careerTalk.getAttribute("data-talk")
+    speakersData.forEach(data => {
+        var jun27ChildElement = data.parentElement.parentElement;
+        jun27ChildElement.style.display = "none"
+        if(data.innerText.toLowerCase() === speakerClassFilter.toLowerCase()){
+            data.parentElement.parentElement.style.display = "flex"
+            masterTalk.classList.remove("badge-dark")
+            allTalks.classList.remove("badge-dark")
+            showTalk.classList.remove("badge-dark")
+            careerTalk.classList.add("badge-dark")
+        }
+    })
+})
+
+allTalks.addEventListener("click", ()=>{
+    var speakersData = pastTalkDetailsElement.querySelectorAll('.speakers-data-2')
+    speakersData.forEach(data => {
+        var jun27ChildElement = data.parentElement.parentElement;
+        jun27ChildElement.style.display = "flex"
+        allTalks.classList.add("badge-dark")
+        masterTalk.classList.remove("badge-dark")
+        showTalk.classList.remove("badge-dark")
+        careerTalk.classList.remove("badge-dark")
+    })
+})