Build a Mood Quiz with HTML, CSS, and JavaScript!

In this video, I’ll guide you through creating a simple mood quiz using HTML, CSS, and JavaScript. This project is perfect for beginners who want to learn how to build interactive quizzes on the web. You’ll learn how to structure your quiz with HTML, style it with CSS, and bring it to life with JavaScript. Let’s get started and find out your current mood with this fun project!

HTML:

Create an HTML file and add the following code:

	<div class="wrapper">
		<h1>What is your<br />Color Mood?</h1>
		<form id="quiz-form">
			<label>Are you feeling light or dark?</label><br>
			<input type="radio" name="lightDark" value="#eee" required>
			<div class="option" 
					 style="display:inline-block;background:#eee; width:20px;height:20px"></div>
			<input type="radio" name="lightDark" value="#000">
			<div class="option" 
					 style="display:inline-block;background:#000; width:20px;height:20px"></div>
			<br /><br /><br />
			<label>Are you feeling hot or cold?</label><br>
			<input type="radio" name="hotCold" value="#ff0000" required>
			<div class="option" 
					 style="display:inline-block;background:#ff0000; width:20px;height:20px"></div>
			<input type="radio" name="hotCold" value="#0000ff">
			<div class="option" 
					 style="display:inline-block;background:#0000ff; width:20px;height:20px"></div>
			<br /><br /><br />
			<label>Are you feeling green or purple?</label><br>
			<input type="radio" name="greenPurple" value="#00ff00" required>
			<div class="option" 
					 style="display:inline-block;background:#00ff00; width:20px;height:20px"></div>
			<input type="radio" name="greenPurple" value="#800080">
			<div class="option" 
					 style="display:inline-block;background:#800080; width:20px;height:20px"></div>
			<br /><br /><br />
			<label>Are you feeling yellow or pink?</label><br>
			<input type="radio" name="yellowPink" value="#ffff00" required>
			<div class="option" 
					 style="display:inline-block;background:#ffff00; width:20px;height:20px"></div>
			<input type="radio" name="yellowPink" value="#ff1493">
			<div class="option" 
					 style="display:inline-block;background:#ff1493; width:20px;height:20px"></div>
			<br /><br /><br />
			<label>Are you feeling vibrant or muted?</label><br>
			<input type="radio" name="vibrancy" value="#FFDD00" required>
			<div class="option" 
					 style="display:inline-block;background:#FFDD00; width:20px;height:20px"></div>
			<input type="radio" name="vibrancy" value="#B0B0B0">
			<div class="option" 
					 style="display:inline-block;background:#B0B0B0; width:20px;height:20px"></div>
			<br /><br /><br />
			<label>Are you feeling energized or calm?</label><br>
			<input type="radio" name="energyLevel" value="#FF5733" required>
			<div class="option" 
					 style="display:inline-block;background:#FF5733; width:20px;height:20px"></div>
			<input type="radio" name="energyLevel" value="#2E8B57">
			<div class="option" 
					 style="display:inline-block;background:#2E8B57; width:20px;height:20px"></div>
			<br /><br /><br />
			<button type="button" onclick="calculateHex()">Show me my mood</button>
		</form>

		<div id="modal" class="modal">
			<div class="modal-content">
				<span class="close" onclick="closeModal()">&times;</span>
				<div id="color-box" class="color-box" 
						 onclick="
								copyToClipboard(
										document.getElementById('result-text').innerText.match(/#\\w+/)[0]
								)"></div>
				<p id="result-text"></p>
			</div>
		</div>
	</div>

CSS:

Create a CSS file and add the following code:

body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin-top:5em;
	background:#EEEEFF;
	color:#fff;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:1px;
}
.wrapper{
	box-shadow:0 0 0 2px;
	width:350px;
	margin:0 auto;
	padding:2em 4em;
	background:#a6a6a6;	
	border-radius:7px;
	border:2px solid black;
	box-shadow:6px 6px 0 0px black;
}
input[type="radio" i] {
	width:22px;
	height:22px;
	cursor:crosshair;
  margin-right: 1px;
	z-index:1000000;
	border-radius:0;
	display:inline;
}
.option{
	pointer-events: none;
	z-index:-2;
	border-radius:7px;
	border:2px solid black;
	box-shadow:2px 2px 0 0px black;
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	color:#000;
}

.modal-content {
	background-color: #fefefe;
	margin: 12% auto;
	padding: 20px;
	width: 400px;
	position: relative;
	border-radius:7px;
	border:2px solid black;
	box-shadow:6px 6px 0 0px black;
}

.color-box {
	width: 320px;
	height: 320px;
	margin: 10px auto;
	cursor:pointer;
}

.close {
	color: #aaa;
	position: absolute;
	top: 4px;
	right: 10px;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

h1{
	font-size:32px;
	font-weight:bold;
	margin-bottom:1em;
}

button{
	padding:.5em 1em;
	border:0;
	cursor:pointer;
	text-transform:uppercase;
	font-size:24px;
	letter-spacing:1px;
	font-weight:bold;
	color:#fff;
	border-radius:7px;
	border:2px solid black;
	box-shadow:6px 6px 0 0px black;
	transition:all .23s ease;
	background:#a6a6a6;
}
button:hover{
	background:blue;
	color:#fff;
	animation:active .5s ease infinite;
}
@keyframes active{
	0%{
		color:#fff;
		box-shadow:inset 0 0 0 5000px purple,6px 6px 0 0px black;
	}
	50%{
		color:#fff;
		box-shadow:inset 0 0 0 1500px teal,6px 6px 0 0px black;
	}
	100%{
		color:#ccc;
		box-shadow:inset 0 0 0 0 green,6px 6px 0 0px black;
	}
}
input{
	margin:1em 0 1em 2em;
}

JavaScript:

Create a  JavaScript file and add the following code:

  function calculateHex() {
		const lightDark = document.querySelector('input[name="lightDark"]:checked').value;
		const hotCold = document.querySelector('input[name="hotCold"]:checked').value;
		const greenPurple = document.querySelector('input[name="greenPurple"]:checked').value;
		const yellowPink = document.querySelector('input[name="yellowPink"]:checked').value;
		const vibrancy = document.querySelector('input[name="vibrancy"]:checked').value;
		const energyLevel = document.querySelector('input[name="energyLevel"]:checked').value;

		// Extract RGB values from the hex codes
		const rgbValues = [lightDark, hotCold, greenPurple, yellowPink, vibrancy, energyLevel].map(hexToRgb);

		// Calculate the average RGB values
		const avgRgb = rgbValues.reduce((acc, rgb) => {
			return [
				acc[0] + rgb[0],
				acc[1] + rgb[1],
				acc[2] + rgb[2],
			];
		}, [0, 0, 0]).map(value => Math.round(value / rgbValues.length));

		// Add randomness to each RGB value
		const randomOffset = (Math.random() * 50) - 25; // Random offset between -25 and +25
		const finalRgb = avgRgb.map(value => {
			const randomValue = Math.round(value + randomOffset);
			return Math.max(0, Math.min(255, randomValue)); // Clamp to [0, 255]
		});

		// Convert the final RGB back to hex
		const combinedColor = rgbToHex(finalRgb[0], finalRgb[1], finalRgb[2]);

		// Display the modal with the result
		document.getElementById('color-box').style.backgroundColor = combinedColor;
		document.getElementById('result-text').innerHTML = `Your color is <span style="cursor: pointer; color: ${combinedColor};" onclick="copyToClipboard('${combinedColor}')">${combinedColor}</span> and we think that's cool!`;
		document.getElementById('modal').style.display = 'block';

		// Make the color box clickable
		const colorBox = document.getElementById('color-box');
		colorBox.onclick = function() {
			copyToClipboard(combinedColor);
		};
	}

function hexToRgb(hex) {
	const bigint = parseInt(hex.slice(1), 16);
	return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}

function rgbToHex(r, g, b) {
	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, '0')}`;
}

function copyToClipboard(colorText) {
	navigator.clipboard.writeText(colorText).then(() => {
		alert(`Copied ${colorText} to clipboard!`);
	}).catch(err => {
		console.error('Failed to copy: ', err);
	});
}

function closeModal() {
	document.getElementById('modal').style.display = 'none';
}

Happy coding!