Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
57 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure! Here's an example of a simple interactive crossword puzzle using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Interactive Crossword Puzzle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="puzzle-container">
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"><input type="text" maxlength="1"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
<div class="crossword-cell"></div>
</div>
<button id="reset-button">Reset</button>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}
#puzzle-container {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 2px;
max-width: 400px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
}
.crossword-cell {
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
.crossword-cell input {
width: 100%;
height: 100%;
text-transform: uppercase;
text-align: center;
font-size: 18px;
border: none;
outline: none;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
button:focus {
outline: none;
}
```
JavaScript (script.js):
```javascript
// Get all crossword input elements
const crosswordInputs = document.querySelectorAll('.crossword-cell input');
// Add event listener to each input
crosswordInputs.forEach(input => {
input.addEventListener('input', () => {
// Adjust the input value to uppercase
input.value = input.value.toUpperCase();
});
});
// Reset button click event
const resetButton = document.getElementById('reset-button');
resetButton.addEventListener('click', () => {
// Clear all input values
crosswordInputs.forEach(input => {
input.value = '';
});
});
```
This code creates a simple crossword puzzle grid using CSS Grid. Each grid cell is represented by a `<div>` element with the class "crossword-cell". The crossword inputs are represented by `<input>` elements placed inside the corresponding cells.
The JavaScript code attaches an event listener to each input element, converting the input value to uppercase as the user types. It also adds a click event listener to the "Reset" button, which clears all input values when clicked.
Remember to save the HTML, CSS, and JavaScript code in separate files (`index.html`, `style.css`, and `script.js`, respectively) in the same directory and link them correctly in the HTML file.
This is a basic implementation of an interactive crossword puzzle. You can modify and enhance the code according to your specific requirements and design preferences.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
5.0
1 review
49
Views
GPT-3.5-TURBO
🔥 Create the website of your dreams Including your own customizable and functional crossword puzzles at any time!
💥 You will have everything you need to create it, such as your own html, css and javascript code.
✨ Workable for any design, GET IT NOW!
...more
Added over 1 month ago
- Reviews for this prompt (1)