1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { Hono } from "npm:hono";
const app = new Hono();
app.get("/", (c) => {
return c.html(`<!DOCTYPE html>
<html>
<head>
<title>Wordle Game</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(45deg, #ff6ec4, #7873f5);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#word-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
max-width: 300px;
margin-bottom: 20px;
}
.letter {
border: 2px solid white;
padding: 15px;
font-size: 2em;
text-align: center;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.correct {
background-color: #00e676;
transform: rotate(10deg);
}
.present {
background-color: #ffeb3b;
transform: rotate(-10deg);
}
.missing {
background-color: #f44336;
}
</style>
</head>
<body>
<h1>Crazy Wordle Game</h1>
<div id="word-container"></div>
<input type="text" id="word-input" maxlength="5" style="text-align: center; font-size: 2em; padding: 10px;">
<button onclick="submitWord()" style="font-size: 2em; margin-top: 20px; cursor: pointer;">Submit</button>
<div id="message" style="margin-top: 20px; font-size: 1.5em;"></div>
<script>
const targetWord = 'CRAZY';
let attempts = 0;
function submitWord() {
const input = document.getElementById('word-input').value.toUpperCase();
if (input.length !== 5) {
alert("Word must be 5 letters long!");
return;
}
attempts++;
const container = document.getElementById('word-container');
container.innerHTML = '';
for (let i = 0; i < 5; i++) {
const letterDiv = document.createElement('div');
letterDiv.className = 'letter';
letterDiv.textContent = input[i];
if (input[i] === targetWord[i]) {
letterDiv.classList.add('correct');
} else if (targetWord.includes(input[i])) {
letterDiv.classList.add('present');
} else {
letterDiv.classList.add('missing');
}
container.appendChild(letterDiv);
}
if (input === targetWord) {
document.getElementById('message').textContent = "Congratulations! You guessed it in " + attempts + " attempts.";
} else if (attempts >= 6) {
document.getElementById('message').textContent = "Game Over! The word was " + targetWord + ".";
}
}
</script>
</body>
</html>`);
});
export default app.fetch;
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
July 15, 2024