trendplays/resources/js/main.js

let toggle = document.querySelector(".nav-toggle")
let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
let registerToggles = document.querySelectorAll(".register-btn, .register-area\
	.cancel-button, .services-cards button")
 let form = new FormData( document.getElementById("register-form") )  
const passInput = document.getElementById("password")
const passInput2 = document.getElementById("confirm_password")

function register(event) {
	console.log("register triggered")
	event.preventDefault();
	fetch("/register", {
		method: 'POST',
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify(form)
	}).then(console.log(response => console.log(response.json())))
}

function checkPasswords() {
	if (passInput.value != passInput2.value) {
		passInput2.setCustomValidity('Passwords must be matching')
	} else {
		console.log("pass checks work")
		passInput2.setCustomValidity('');
	}
}

toggle.addEventListener("click", function() {
	heroText.forEach(item => {
		item.classList.toggle("hidden")
	})
	document.querySelector("nav form.login").classList.toggle("active")
	this.classList.toggle("toggled")
	// this.src = "/images/close.svg"
})

//Triggers for registration menu
for (i = 0; i < registerToggles.length; i++) {
	registerToggles[i].addEventListener("click", function() {
	document.querySelector(".register-area").classList.toggle("active")
	});
}


//FAQ code
let cols = document.getElementsByClassName("collapsible");
// let ;

for (i = 0; i < cols.length; i++) {
	cols[i].addEventListener("click", function() {
		this.classList.toggle("active");
	});
}

document.getElementById('register-form').addEventListener('submit', register)
passInput2.oninput = checkPasswords
passInput.oninput = checkPasswords