The Compliment Machine

by Ayyub Abdulrezak

HTML

<!DOCTYPE html>
<title>The Compliment Machine</title>
<body>
<h2 class="heading">The Compliment Machine</h2>
<p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. Pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" onmouseenter="startingFunction(), startingFunction2()" onmouseleave="endFunction()"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>

<script>
	var userName = prompt("What is your name?");
	var generatedUserName = userName === null || userName === "";
	var compliment = [
		"Have a nice day",
		"you contribute to society",
		"Always be yourself",
		"you are a wonderful person",
		"Keep up the good work",
		"never stop believing in yourself",
		"you have a great sense of humor",
		"You should feel proud of yourself",
		"Never stop trying",
		"you are a winner"
	];
</script>

<script>
	function timedFunction() {		
		document.getElementsByTagName("DIV")[0].style.display = "none";
		document.getElementsByTagName("DIV")[1].style.display = "none";
		document.getElementsByTagName("IMG")[0].style.display = "none";
		document.getElementsByTagName("IMG")[1].style.display = "none";
		var repeater = setInterval(inspiration, 1000);
	}
	var inspiration = function inspire() {
		var result = Math.random();
		
		//This code block checks for null, undefined, and other falsy values in the prompt.
		if (generatedUserName) {
			if (0 <= result && result < 0.11) {
				userName = "my friend";
			}
			if (0.21 <= result && result < 0.31) {
				userName = "my friend";
			}
			if (0.41 <= result && result < 0.51) {
				userName = "my friend";
			}
			if (0.71 <= result && result < 0.81) {
				userName = "my friend";
			}
			if (0.81...

CSS

body {
	margin:0px;
}
.heading {
	text-align:center;
	font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
	color:green;
	font-weight:bold;
	font-size:30px;
	margin-top:0px;
}
.text {
	color:red;
	font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
	font-size:21px;
	text-align:justify;
	margin-top:-15px;
}
br {
	line-height:500%;
}
.container {
	position:relative;
	width:350px;
	height:350px;
	margin-top:42px;
	margin-left:auto;
	margin-right:auto;
}
.star {
	width:40px;
	height:40px;
	position:absolute;
}
#starOne {
	top:0px;
	left:0px;
}
#starTwo {
	top:310px;
	left:310px;
}
.button {
	width:250px;
	height:250px;
	border-style:solid;
	border-color:red;
	border-width:5px;
	border-radius:60px;
	text-align:center;
	position:absolute;
	bottom:50px;
	left:50px;
}
.button:hover {
	background-color: #7CFC00;
	cursor:pointer
}
.button-text {
	font-family:'Righteous', Courier New;
	color:#9400D3;
	font-size:76px;
	line-height:125%;
}
#compliment {
	text-align:center;
	font-family:'VT323', Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
	color:#ffd400;
	font-size:50px;
}