https://zacharysmith90.github.io/grocery-annotate/main.js

1document.addEventListener("DOMContentLoaded", function () {
2	const dots = document.querySelectorAll(".dot");
3
4	dots.forEach(function (dot) {
5		dot.addEventListener("click", function (e) {
6			e.preventDefault();
7			// for whatever element just got the click, find it's closest .dot ancestor
8			const clicked_dot = e.target.closest(".dot");
9
10			// we're going to find all dots with the same classes so let's start an empty string to put classes in
11			let alike_dots = "";
12			// .dot.pink
13
14			// now, let's capture the list of classes from the click dot and add each of them to our alike_dots string
15			clicked_dot.classList.forEach(function (className) {
16				/**
17				 * we are updating the contents of the string by taking it's current value
18				 * and adding on . and then whatever class this is
19				 */
20				alike_dots = `${alike_dots}.${className}`;
21			});
22
23			// now that we have our string of classes, we can once again update the 'alike_dots' variable to be a NodeList
24			// of the other dots on the page that match the one we clicked on
25			alike_dots = document.querySelectorAll(alike_dots);
26
27
28			// once we've built the like of alike dots, we perform the open/close actions
29
30			// if the dot we clicked on, already has the 'active' class, it needs to be removed as the
31			// user must be trying to close it
32			if (clicked_dot.classList.contains("active")) {
33				alike_dots.forEach(function (dot) { // loop through all of the dots that are like the one we clicked on and remove the 'active' clas
34					dot.classList.remove("active");
35				});
36			} else {
37				alike_dots.forEach(function (dot) { // loop through all of the dots that are like the one we clicked on and add the 'active' class
38					dot.classList.add("active");
39				})
40			}
41		});
42	});
43});