stanwmusic · May 26, 2025 02:56 · stanwmusic · May 26, 2025 · stanwmusic · May 26, 2025
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Motivational Words</title>
 	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
 	<table id="motivational-table">
 		<thead>
 			<tr>
 				<th>Motivational Words</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
 				<td>Achieve</td>
 				<td>Believe</td>
 				<td>Courage</td>
 				<td>Dream</td>
 				<td>Empower</td>
 				<td>Focus</td>
 				<td>Gratitude</td>
 				<td>Happiness</td>
 				<td>Inspire</td>
 				<td>Joy</td>
 			</tr>
 			<tr>
 				<td>Kindness</td>
 				<td>Learn</td>
 				<td>Motivate</td>
 				<td>Never</td>
 				<td>Optimism</td>
 				<td>Persist</td>
 				<td>Quality</td>
 				<td>Resilience</td>
 				<td>Success</td>
 				<td>Thrive</td>
 			</tr>
 			<tr>
 				<td>Unite</td>
 				<td>Vision</td>
 				<td>Wisdom</td>
 				<td>Excel</td>
 				<td>Ambition</td>
 				<td>Balance</td>
 				<td>Change</td>
 				<td>Dedication</td>
 				<td>Effort</td>
 				<td>Faith</td>
 			</tr>
 			<tr>
 				<td>Growth</td>
 				<td>Hope</td>
 				<td>Imagine</td>
 				<td>Justice</td>
 				<td>Knowledge</td>
 				<td>Love</td>
 				<td>Motivation</td>
 				<td>Opportunity</td>
 				<td>Power</td>
 				<td>Quest</td>
 			</tr>
 			<!-- Repeat similar rows until 1000 words are included -->
 			<!-- This is just a preview; JavaScript will automate the 1000-word process -->
 		</tbody>
 	</table>
 	<script src="script.js"></script>
 </body>

 </html>
diff --git a/motivational-words.markdown b/motivational-words.markdown
diff --git a/script.js b/script.js
 // Array of Motivational Words
 const motivationalWords = [
 	"Achieve",
 	"Believe",
 	"Courage",
 	"Dream",
 	"Empower",
 	"Focus",
 	"Gratitude",
 	"Happiness",
 	"Inspire",
 	"Joy",
 	"Kindness",
 	"Learn",
 	"Motivate",
 	"Never",
 	"Optimism",
 	"Persist",
 	"Quality",
 	"Resilience",
 	"Success",
 	"Thrive",
 	"Unite",
 	"Vision",
 	"Wisdom",
 	"Excel",
 	"Ambition",
 	"Balance",
 	"Change",
 	"Dedication",
 	"Effort",
 	"Faith",
 	"Growth",
 	"Hope",
 	"Imagine",
 	"Justice",
 	"Knowledge",
 	"Love",
 	"Motivation",
 	"Opportunity",
 	"Power",
 	"Quest",
 	"Radiate",
 	"Shine",
 	"Trust",
 	"Understand",
 	"Victory",
 	"Work",
 	"Yearn",
 	"Zen",
 	"Awaken",
 	"Be",
 	"Champion",
 	"Develop",
 	"Energize",
 	"Flourish",
 	"Glow",
 	"Harmony",
 	"Ignite",
 	"Joyful",
 	"Keen",
 	"Limitless"
 	// Add more words up to 1000
 ];

 // Target Table
 const tableBody = document
 	.getElementById("motivational-table")
 	.querySelector("tbody");

 // Dynamically Populate Table
 let row;
 motivationalWords.forEach((word, index) => {
 	// Create a new row every 10 words
 	if (index % 10 === 0) {
 		row = document.createElement("tr");
 		tableBody.appendChild(row);
 	}

 	// Create a new cell for each word
 	const cell = document.createElement("td");
 	cell.textContent = word;

 	// Add Random Animation Class
 	const animations = [
 		"bounce",
 		"pulse",
 		"fade-in",
 		"jello",
 		"rotate",
 		"flip",
 		"wobble",
 		"vibrate"
 	];
 	const randomAnimation =
 		animations[Math.floor(Math.random() * animations.length)];
 	cell.classList.add(randomAnimation);

 	row.appendChild(cell);
 });
diff --git a/style.css b/style.css
 /* Define 20 Unique Colors */
 :root {
 	--color-1: #ff5733;
 	--color-2: #33ff57;
 	--color-3: #5733ff;
 	--color-4: #ff33a1;
 	--color-5: #33fff2;
 	--color-6: #a133ff;
 	--color-7: #ffe733;
 	--color-8: #e733ff;
 	--color-9: #33a8ff;
 	--color-10: #a8ff33;
 	--color-11: #ff3347;
 	--color-12: #47ff33;
 	--color-13: #3347ff;
 	--color-14: #ff8233;
 	--color-15: #33ff82;
 	--color-16: #8233ff;
 	--color-17: #ffb833;
 	--color-18: #33ffb8;
 	--color-19: #b833ff;
 	--color-20: #33a1ff;
 }

 /* Color Transition */
 .color-change {
 	animation: change-color 1s infinite;
 }

 /* Animation for Color Change */
 @keyframes change-color {
 	0% {
 		color: var(--color-1);
 	}
 	5% {
 		color: var(--color-2);
 	}
 	10% {
 		color: var(--color-3);
 	}
 	15% {
 		color: var(--color-4);
 	}
 	20% {
 		color: var(--color-5);
 	}
 	25% {
 		color: var(--color-6);
 	}
 	30% {
 		color: var(--color-7);
 	}
 	35% {
 		color: var(--color-8);
 	}
 	40% {
 		color: var(--color-9);
 	}
 	45% {
 		color: var(--color-10);
 	}
 	50% {
 		color: var(--color-11);
 	}
 	55% {
 		color: var(--color-12);
 	}
 	60% {
 		color: var(--color-13);
 	}
 	65% {
 		color: var(--color-14);
 	}
 	70% {
 		color: var(--color-15);
 	}
 	75% {
 		color: var(--color-16);
 	}
 	80% {
 		color: var(--color-17);
 	}
 	85% {
 		color: var(--color-18);
 	}
 	90% {
 		color: var(--color-19);
 	}
 	95% {
 		color: var(--color-20);
 	}
 	100% {
 		color: var(--color-1);
 	}
 }

 /* General Reset */
 body {
 	margin: 0;
 	padding: 0;
 	font-family: Arial, sans-serif;
 	background-color: #121212;
 	color: #fff;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	min-height: 100vh;
 	overflow-x: hidden;
 }

 .container {
 	text-align: center;
 }

 h1 {
 	font-size: 2.5rem;
 	color: #f3f3f3;
 	text-shadow: 2px 2px 5px #333;
 	margin-bottom: 20px;
 }

 /* Table Styling */
 table {
 	margin: 0 auto;
 	border-collapse: collapse;
 	width: 90%;
 }

 td {
 	text-align: center;
 	padding: 10px;
 	font-size: 1.2rem;
 	font-weight: bold;
 	border: 1px solid #444;
 	cursor: pointer;
 	animation: glow 2s infinite ease-in-out;
 	transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
 }

 /* Animation Effects */
 @keyframes glow {
 	0% {
 		box-shadow: 0 0 5px #333;
 	}
 	50% {
 		box-shadow: 0 0 15px #fff, 0 0 25px #f39c12, 0 0 35px #e74c3c;
 	}
 	100% {
 		box-shadow: 0 0 5px #333;
 	}
 }

 td:hover {
 	transform: scale(1.2) rotate(5deg);
 	background-color: #f39c12;
 	color: #000;
 	box-shadow: 0 0 20px #e67e22, 0 0 25px #f1c40f;
 }
 /* Bounce */
 @keyframes bounce {
 	0%,
 	100% {
 		transform: translateY(0);
 	}
 	50% {
 		transform: translateY(-10px);
 	}
 }

 .bounce {
 	animation: bounce 1.5s infinite;
 }

 /* Pulse */
 @keyframes pulse {
 	0%,
 	100% {
 		transform: scale(1);
 	}
 	50% {
 		transform: scale(1.1);
 	}
 }

 .pulse {
 	animation: pulse 2s infinite;
 }

 /* Fade-in */
 @keyframes fade-in {
 	0% {
 		opacity: 0;
 	}
 	100% {
 		opacity: 1;
 	}
 }

 .fade-in {
 	animation: fade-in 3s infinite;
 }

 /* Jello */
 @keyframes jello {
 	0%,
 	100% {
 		transform: scale(1);
 	}
 	25% {
 		transform: scale(1.1) skewX(5deg);
 	}
 	50% {
 		transform: scale(1.2) skewX(-5deg);
 	}
 }

 .jello {
 	animation: jello 1.5s infinite;
 }

 /* Rotate */
 @keyframes rotate {
 	0% {
 		transform: rotate(0deg);
 	}
 	100% {
 		transform: rotate(360deg);
 	}
 }

 .rotate {
 	animation: rotate 3s infinite linear;
 }

 /* Flip */
 @keyframes flip {
 	0% {
 		transform: rotateY(0);
 	}
 	100% {
 		transform: rotateY(360deg);
 	}
 }

 .flip {
 	animation: flip 2s infinite;
 }

 /* Wobble */
 @keyframes wobble {
 	0% {
 		transform: rotate(0deg);
 	}
 	50% {
 		transform: rotate(5deg);
 	}
 	100% {
 		transform: rotate(-5deg);
 	}
 }

 .wobble {
 	animation: wobble 2s infinite;
 }

 /* Vibrate */
 @keyframes vibrate {
 	0%,
 	100% {
 		transform: translateX(0);
 	}
 	25% {
 		transform: translateX(-2px);
 	}
 	75% {
 		transform: translateX(2px);
 	}
 }

 .vibrate {
 	animation: vibrate 0.3s infinite;
 }

 /* Unique Animations for First Words */
 @keyframes scale-up {
 	0%,
 	100% {
 		transform: scale(1);
 	}
 	50% {
 		transform: scale(1.5);
 	}
 }

 .scale-up {
 	animation: scale-up 1.5s infinite;
 }

 @keyframes rotate-scale {
 	0%,
 	100% {
 		transform: rotate(0deg) scale(1);
 	}
 	50% {
 		transform: rotate(360deg) scale(1.2);
 	}
 }

 .rotate-scale {
 	animation: rotate-scale 2s infinite;
 }

 @keyframes skew-slide {
 	0%,
 	100% {
 		transform: skew(0deg, 0deg) translateX(0);
 	}
 	50% {
 		transform: skew(15deg, 10deg) translateX(20px);
 	}
 }

 .skew-slide {
 	animation: skew-slide 1.8s infinite;
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Motivational Words</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<table id="motivational-table">
	<thead>
	<tr>
	<th>Motivational Words</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Achieve</td>
	<td>Believe</td>
	<td>Courage</td>
	<td>Dream</td>
	<td>Empower</td>
	<td>Focus</td>
	<td>Gratitude</td>
	<td>Happiness</td>
	<td>Inspire</td>
	<td>Joy</td>
	</tr>
	<tr>
	<td>Kindness</td>
	<td>Learn</td>
	<td>Motivate</td>
	<td>Never</td>
	<td>Optimism</td>
	<td>Persist</td>
	<td>Quality</td>
	<td>Resilience</td>
	<td>Success</td>
	<td>Thrive</td>
	</tr>
	<tr>
	<td>Unite</td>
	<td>Vision</td>
	<td>Wisdom</td>
	<td>Excel</td>
	<td>Ambition</td>
	<td>Balance</td>
	<td>Change</td>
	<td>Dedication</td>
	<td>Effort</td>
	<td>Faith</td>
	</tr>
	<tr>
	<td>Growth</td>
	<td>Hope</td>
	<td>Imagine</td>
	<td>Justice</td>
	<td>Knowledge</td>
	<td>Love</td>
	<td>Motivation</td>
	<td>Opportunity</td>
	<td>Power</td>
	<td>Quest</td>
	</tr>
	<!-- Repeat similar rows until 1000 words are included -->
	<!-- This is just a preview; JavaScript will automate the 1000-word process -->
	</tbody>
	</table>
	<script src="script.js"></script>
	</body>

	</html>
	// Array of Motivational Words
	const motivationalWords = [
	"Achieve",
	"Believe",
	"Courage",
	"Dream",
	"Empower",
	"Focus",
	"Gratitude",
	"Happiness",
	"Inspire",
	"Joy",
	"Kindness",
	"Learn",
	"Motivate",
	"Never",
	"Optimism",
	"Persist",
	"Quality",
	"Resilience",
	"Success",
	"Thrive",
	"Unite",
	"Vision",
	"Wisdom",
	"Excel",
	"Ambition",
	"Balance",
	"Change",
	"Dedication",
	"Effort",
	"Faith",
	"Growth",
	"Hope",
	"Imagine",
	"Justice",
	"Knowledge",
	"Love",
	"Motivation",
	"Opportunity",
	"Power",
	"Quest",
	"Radiate",
	"Shine",
	"Trust",
	"Understand",
	"Victory",
	"Work",
	"Yearn",
	"Zen",
	"Awaken",
	"Be",
	"Champion",
	"Develop",
	"Energize",
	"Flourish",
	"Glow",
	"Harmony",
	"Ignite",
	"Joyful",
	"Keen",
	"Limitless"
	// Add more words up to 1000
	];

	// Target Table
	const tableBody = document
	.getElementById("motivational-table")
	.querySelector("tbody");

	// Dynamically Populate Table
	let row;
	motivationalWords.forEach((word, index) => {
	// Create a new row every 10 words
	if (index % 10 === 0) {
	row = document.createElement("tr");
	tableBody.appendChild(row);
	}

	// Create a new cell for each word
	const cell = document.createElement("td");
	cell.textContent = word;

	// Add Random Animation Class
	const animations = [
	"bounce",
	"pulse",
	"fade-in",
	"jello",
	"rotate",
	"flip",
	"wobble",
	"vibrate"
	];
	const randomAnimation =
	animations[Math.floor(Math.random() * animations.length)];
	cell.classList.add(randomAnimation);

	row.appendChild(cell);
	});
	/* Define 20 Unique Colors */
	:root {
	--color-1: #ff5733;
	--color-2: #33ff57;
	--color-3: #5733ff;
	--color-4: #ff33a1;
	--color-5: #33fff2;
	--color-6: #a133ff;
	--color-7: #ffe733;
	--color-8: #e733ff;
	--color-9: #33a8ff;
	--color-10: #a8ff33;
	--color-11: #ff3347;
	--color-12: #47ff33;
	--color-13: #3347ff;
	--color-14: #ff8233;
	--color-15: #33ff82;
	--color-16: #8233ff;
	--color-17: #ffb833;
	--color-18: #33ffb8;
	--color-19: #b833ff;
	--color-20: #33a1ff;
	}

	/* Color Transition */
	.color-change {
	animation: change-color 1s infinite;
	}

	/* Animation for Color Change */
	@keyframes change-color {
	0% {
	color: var(--color-1);
	}
	5% {
	color: var(--color-2);
	}
	10% {
	color: var(--color-3);
	}
	15% {
	color: var(--color-4);
	}
	20% {
	color: var(--color-5);
	}
	25% {
	color: var(--color-6);
	}
	30% {
	color: var(--color-7);
	}
	35% {
	color: var(--color-8);
	}
	40% {
	color: var(--color-9);
	}
	45% {
	color: var(--color-10);
	}
	50% {
	color: var(--color-11);
	}
	55% {
	color: var(--color-12);
	}
	60% {
	color: var(--color-13);
	}
	65% {
	color: var(--color-14);
	}
	70% {
	color: var(--color-15);
	}
	75% {
	color: var(--color-16);
	}
	80% {
	color: var(--color-17);
	}
	85% {
	color: var(--color-18);
	}
	90% {
	color: var(--color-19);
	}
	95% {
	color: var(--color-20);
	}
	100% {
	color: var(--color-1);
	}
	}

	/* General Reset */
	body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: #121212;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow-x: hidden;
	}

	.container {
	text-align: center;
	}

	h1 {
	font-size: 2.5rem;
	color: #f3f3f3;
	text-shadow: 2px 2px 5px #333;
	margin-bottom: 20px;
	}

	/* Table Styling */
	table {
	margin: 0 auto;
	border-collapse: collapse;
	width: 90%;
	}

	td {
	text-align: center;
	padding: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	border: 1px solid #444;
	cursor: pointer;
	animation: glow 2s infinite ease-in-out;
	transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
	}

	/* Animation Effects */
	@keyframes glow {
	0% {
	box-shadow: 0 0 5px #333;
	}
	50% {
	box-shadow: 0 0 15px #fff, 0 0 25px #f39c12, 0 0 35px #e74c3c;
	}
	100% {
	box-shadow: 0 0 5px #333;
	}
	}

	td:hover {
	transform: scale(1.2) rotate(5deg);
	background-color: #f39c12;
	color: #000;
	box-shadow: 0 0 20px #e67e22, 0 0 25px #f1c40f;
	}
	/* Bounce */
	@keyframes bounce {
	0%,
	100% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-10px);
	}
	}

	.bounce {
	animation: bounce 1.5s infinite;
	}

	/* Pulse */
	@keyframes pulse {
	0%,
	100% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.1);
	}
	}

	.pulse {
	animation: pulse 2s infinite;
	}

	/* Fade-in */
	@keyframes fade-in {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	.fade-in {
	animation: fade-in 3s infinite;
	}

	/* Jello */
	@keyframes jello {
	0%,
	100% {
	transform: scale(1);
	}
	25% {
	transform: scale(1.1) skewX(5deg);
	}
	50% {
	transform: scale(1.2) skewX(-5deg);
	}
	}

	.jello {
	animation: jello 1.5s infinite;
	}

	/* Rotate */
	@keyframes rotate {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}

	.rotate {
	animation: rotate 3s infinite linear;
	}

	/* Flip */
	@keyframes flip {
	0% {
	transform: rotateY(0);
	}
	100% {
	transform: rotateY(360deg);
	}
	}

	.flip {
	animation: flip 2s infinite;
	}

	/* Wobble */
	@keyframes wobble {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(5deg);
	}
	100% {
	transform: rotate(-5deg);
	}
	}

	.wobble {
	animation: wobble 2s infinite;
	}

	/* Vibrate */
	@keyframes vibrate {
	0%,
	100% {
	transform: translateX(0);
	}
	25% {
	transform: translateX(-2px);
	}
	75% {
	transform: translateX(2px);
	}
	}

	.vibrate {
	animation: vibrate 0.3s infinite;
	}

	/* Unique Animations for First Words */
	@keyframes scale-up {
	0%,
	100% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.5);
	}
	}

	.scale-up {
	animation: scale-up 1.5s infinite;
	}

	@keyframes rotate-scale {
	0%,
	100% {
	transform: rotate(0deg) scale(1);
	}
	50% {
	transform: rotate(360deg) scale(1.2);
	}
	}

	.rotate-scale {
	animation: rotate-scale 2s infinite;
	}

	@keyframes skew-slide {
	0%,
	100% {
	transform: skew(0deg, 0deg) translateX(0);
	}
	50% {
	transform: skew(15deg, 10deg) translateX(20px);
	}
	}

	.skew-slide {
	animation: skew-slide 1.8s infinite;
	}