Description:
Experience the fun of creating personalized word searches with WordSearch Pro. Customize the grid size and enter your desired word list. Click "Generate Word Search" to instantly generate a challenging puzzle. Enjoy a variety of orientations and patterns for an engaging word search experience.
Word Search Generator tool with customizable grid size and word list. Write the code in HTML, CSS, and JavaScript.
project tool for free
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Search Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#word-search-container {
text-align: center;
}
#word-list-container {
margin-bottom: 20px;
}
#word-search-grid {
border-collapse: collapse;
margin: 10px;
}
#word-search-grid td {
width: 30px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="word-search-container">
<h2>Word Search Generator</h2>
<div id="word-list-container">
<label for="word-list">Word List (comma-separated):</label>
<input type="text" id="word-list" placeholder="Enter words">
</div>
<label for="grid-size">Grid Size:</label>
<input type="number" id="grid-size" min="5" value="10">
<button onclick="generateWordSearch()">Generate Word Search</button>
<table id="word-search-grid"></table>
</div>
<script>
function generateWordSearch() {
const wordListInput = document.getElementById('word-list');
const gridSizeInput = document.getElementById('grid-size');
const wordSearchGrid = document.getElementById('word-search-grid');
const wordList = wordListInput.value.split(',').map(word => word.trim());
const gridSize = parseInt(gridSizeInput.value, 10);
// Validate input
if (!wordList.every(word => word.length > 0) || isNaN(gridSize) || gridSize < 5) {
alert('Please enter a valid word list and grid size (minimum size: 5).');
return;
}
// Clear previous word search grid
wordSearchGrid.innerHTML = '';
// Create a new word search grid
const grid = generateGrid(wordList, gridSize);
// Display the word search grid
displayGrid(wordSearchGrid, grid);
}
function generateGrid(words, size) {
// Implementation of your word search generation logic goes here
// This is a placeholder implementation, replace it with your own logic
const grid = Array.from({ length: size }, () =>
Array.from({ length: size }, () => ' ')
);
// Place words in the grid
words.forEach((word, index) => {
const direction = index % 2 === 0 ? 'horizontal' : 'vertical';
const row = Math.floor(Math.random() * size);
const col = Math.floor(Math.random() * size);
placeWord(grid, word, direction, row, col);
});
return grid;
}
function placeWord(grid, word, direction, startRow, startCol) {
// Implementation of your word placement logic goes here
// This is a placeholder implementation, replace it with your own logic
const length = word.length;
if (direction === 'horizontal') {
for (let i = 0; i < length; i++) {
grid[startRow][startCol + i] = word[i];
}
} else {
for (let i = 0; i < length; i++) {
grid[startRow + i][startCol] = word[i];
}
}
}
function displayGrid(container, grid) {
// Display the grid in the HTML table
for (let row = 0; row < grid.length; row++) {
const tr = document.createElement('tr');
for (let col = 0; col < grid[row].length; col++) {
const td = document.createElement('td');
td.textContent = grid[row][col];
tr.appendChild(td);
}
container.appendChild(tr);
}
}
</script>
</body>
</html>
This code creates a simple Word Search Generator tool with customizable grid size and word list. The
generateGrid function is a placeholder for your actual word search generation logic, and placeWord is a placeholder for placing words in the grid. You should replace these placeholders with your own logic for generating and displaying word searches.
No comments:
Post a Comment