<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>/* 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;
}
// 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);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.