Skip to content

Instantly share code, notes, and snippets.

@oshkoshbagoshh

oshkoshbagoshh/index.html

Created June 9, 2025 00:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oshkoshbagoshh/fac9f408a57ec30b5d62b85db8f15677 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oshkoshbagoshh/fac9f408a57ec30b5d62b85db8f15677 to your computer and use it in GitHub Desktop.
Download ZIP
OJ Group Personality Test Sign Up
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OJ Group Personality Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<h1 id="title">OJ Group Personality Test Sign-Up</h1>
<p id="description">Join the OJ Group and discover your personality traits through our test!</p>
</header>
<br>
<hr>
<!-- SIGN-UP FORM -->
<form id="sign-up-form" action="/submit-signup" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full Name:</label>
<input id="name" name="name" type="text" required placeholder="Enter your full name">
<br><br>
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" required placeholder="Enter your email">
<br><br>
<label for="password">Create Password:</label>
<input id="password" name="password" type="password" required pattern=".{8,}" placeholder="Minimum 8 characters">
<br><br>
<label for="age">Age (Optional):</label>
<input id="age" name="age" type="number" min="0" max="120" placeholder="Enter your age">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="">Select an option</option>
<option value="social-media">Social Media</option>
<option value="word-of-mouth">Word of Mouth</option>
<option value="email">Email</option>
<option value="other">Other</option>
</select>
<br><br>
<label for="interests">What are you interested in?</label><br>
<input type="checkbox" id="personality-test" name="interests" value="personality-test" checked>
<label for="personality-test">Personality Test</label><br>
<input type="checkbox" id="group-events" name="interests" value="group-events">
<label for="group-events">OJ Group Events</label><br>
<input type="checkbox" id="news-updates" name="interests" value="news-updates">
<label for="news-updates">News and Updates</label>
</fieldset>
<fieldset>
<legend>Terms and Submission</legend>
<label for="terms">
<input type="checkbox" id="terms" name="terms" required>
I agree to the <a href="/terms-and-conditions" target="_blank">terms and conditions</a>.
</label>
<br><br>
<input type="submit" value="Sign Up">
</fieldset>
</form>
<!-- FOOTER -->
<footer>
<p>&copy; 2025 OJ Group. All rights reserved.</p>
</footer>
</body>
</html>
Raw
script.js
// Wait for DOM to fully load
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("sign-up-form");
const passwordInput = document.getElementById("password");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
// Add password strength indicator div after password input
const strengthIndicator = document.createElement("div");
strengthIndicator.id = "password-strength";
strengthIndicator.style.marginTop = "5px";
passwordInput.parentNode.insertBefore(
strengthIndicator,
passwordInput.nextSibling
);
// Password strength checker
passwordInput.addEventListener("input", function () {
const password = this.value;
let strength = 0;
let feedback = "";
// Check password length
if (password.length >= 8) strength += 1;
if (password.length >= 12) strength += 1;
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength += 1;
// Check for numbers
if (password.match(/\d/)) strength += 1;
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) strength += 1;
// Update strength indicator
switch (strength) {
case 0:
case 1:
feedback = '<span style="color: red">Weak password</span>';
break;
case 2:
case 3:
feedback = '<span style="color: orange">Moderate password</span>';
break;
case 4:
case 5:
feedback = '<span style="color: green">Strong password</span>';
break;
}
strengthIndicator.innerHTML = feedback;
});
// Real-time email validation
emailInput.addEventListener("input", function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(this.value)) {
this.style.borderColor = "red";
this.setCustomValidity("Please enter a valid email address");
} else {
this.style.borderColor = "green";
this.setCustomValidity("");
}
});
// Name field validation
nameInput.addEventListener("input", function () {
if (this.value.length < 2) {
this.style.borderColor = "red";
this.setCustomValidity("Name must be at least 2 characters long");
} else {
this.style.borderColor = "green";
this.setCustomValidity("");
}
});
// Form submission handling
form.addEventListener("submit", function (e) {
e.preventDefault();
// Validate terms checkbox
const termsCheckbox = document.getElementById("terms");
if (!termsCheckbox.checked) {
alert("Please accept the terms and conditions");
return;
}
// Collect form data
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Simulate form submission
alert(
"Form submitted successfully!\n" +
"Name: " +
data.name +
"\n" +
"Email: " +
data.email
);
// Optional: Reset form after submission
form.reset();
// Reset styling
nameInput.style.borderColor = "";
emailInput.style.borderColor = "";
strengthIndicator.innerHTML = "";
});
// Add hover effect to submit button
const submitButton = form.querySelector('input[type="submit"]');
submitButton.addEventListener("mouseover", function () {
this.style.backgroundColor = "#45a049";
});
submitButton.addEventListener("mouseout", function () {
this.style.backgroundColor = "";
});
// Add animation for checkbox selections
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
if (this.checked) {
this.style.transform = "scale(1.1)";
setTimeout(() => (this.style.transform = "scale(1)"), 200);
}
});
});
});
Raw
style.css
/* General Styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
/* Header Styles */
header {
text-align: center;
background-color: #4caf50;
color: white;
padding: 20px 10px;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
header p {
margin: 10px 0 0;
font-size: 1.2em;
}
/* Form Styles */
form {
max-width: 600px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
fieldset {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
font-size: 1.2em;
color: #4caf50;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
}
input[type="checkbox"] {
margin-right: 10px;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
a {
color: #4caf50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Footer Styles */
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: white;
margin-top: 20px;
font-size: 0.9em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment