728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Word Picker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
p {
font-size: 1.2em;
margin-bottom: 20px;
}
button {
padding: 12px 25px;
font-size: 1.2em;
cursor: pointer;
background: #ff7f50;
color: white;
border: none;
border-radius: 8px;
transition: transform 0.2s, background-color 0.3s;
}
button:hover {
background: #ff5722;
transform: scale(1.05);
}
#random-words {
margin-top: 30px;
font-size: 2em;
color: #f5f5f5;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<h1>Random Word Picker</h1>
<p>Click the button to pick one random word from the list:</p>
<button onclick="pickRandomWords()">Pick a Word</button>
<div id="random-words"></div>
<script>
const words = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
function pickRandomWords() {
const shuffled = [...words].sort(() => 0.5 - Math.random());
const randomWords = shuffled.slice(0, 1); // how much words I wanna
const outputDiv = document.getElementById('random-words');
outputDiv.innerText = `Random Word: ${randomWords.join(', ')}`;
outputDiv.style.animation = 'none';
setTimeout(() => {
outputDiv.style.animation = '';
}, 10);
}
</script>
</body>
</html>
728x90
'호그와트' 카테고리의 다른 글
| 수학을 한다는 거 (0) | 2024.11.26 |
|---|---|
| crazy attack !!!!!!!!!!! (0) | 2024.11.22 |
| crazy attack !!!!!!!!!!!!!!!!!!!!!!!!!! (0) | 2024.11.22 |
| Food Is Therapy F I T 앱 맛보기 3 (0) | 2024.11.18 |
| Food Is Therapy F I T 앱 맛보기 2 (0) | 2024.11.18 |
