<html>

<head>
	<link rel="stylesheet" href="index.css">
	<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
</head>

<body>
	<form id="myForm">
		<h3>Join our spooky newsletter</h3>
		<input type="email" placeholder="skeleton@halloweentown.com" id="email-input">
		<button>Subscribe</button>
		<span>💀 if you dare 💀</span>
	</form>

	<div id="submitted">
		<h1>Boo!</h1>
		<p>There's thrilling content coming your way</p>
		<iframe class="giphy-embed" src="https://giphy.com/embed/5oWpOD8Thsmo8" ; frameBorder="0"></iframe>
	</div>

	<audio id="torture">
		<source src="http://soundbible.com/grab.php?id=1548&type=mp3" type="audio/mpeg">
		Your browser does not support the audio effect
	</audio>

	<script src="index.js"></script>
</body>

</html>
/* Submitted by Colin Myers :) */

body {
	margin: 0;
	background: #000;
	font-size: 20px;
	font-family: "Metal Mania", cursive;
	letter-spacing: 2px;
	color: #fff;
}

form {
	padding-top: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h3 {
	color: #ff7518;
	margin-bottom: 0.5em;
}

span {
	font-size: 12px;
	margin-top: 0.5em;
}

input {
	width: 15rem;
	height: 1.5em;
	border: none;
	padding: 2px 5px 2px 5px;
	font-family: "Metal Mania", cursive;
	font-size: inherit;
}

input:focus {
	outline: none;
}

button {
	display: block;
	background-color: #ff7518;
	font-size: 15px;
	cursor: pointer;
	border: none;
	padding: 0.5em 2em;
	margin-top: 1em;
	font-family: "Metal Mania", cursive;
	letter-spacing: 3px;
}

button:hover,
button:focus {
	background-image: linear-gradient(to right, #ff7518 0%, #000 100%);
	color: #fff;
	outline: 1px solid #ff7518;
}

button:active {
	animation: shake 0.5s;
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}
	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

#submitted {
	padding-top: 2em;
	text-align: center;
	display: none;
}

const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const email = document.getElementById("email-input");
const form = document.getElementById("myForm");
const submittedMessage = document.getElementById("submitted");
const audio = document.getElementById("torture");
const error = document.getElementById("error");

form.addEventListener("submit", function (e) {
	e.preventDefault();
	if (!emailRegex.test(email.value)) {
		document.getElementById("error").style.display = "block";
		return;
	} else {
		form.style.display = "none";
		audio.play();
		submittedMessage.style.display = "block";
		console.log("email: ", email.value);
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.