Keyword Permutation Generator
Generated Permutations
Visited 1 times, 1 visit(s) today
Keyword Permutation Generator
body {
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4; /* Softer background for better contrast */
margin: 0;
padding: 20px;
}
h1 {
color: #ff3d00; /* Bright red for the title */
text-align: center;
margin-bottom: 30px;
font-size: 2.5em; /* Larger font size for prominence */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
.container {
background-color: #ffffff; /* White background for the form */
padding: 40px;
border-radius: 15px; /* Rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* More pronounced shadow for depth */
max-width: 600px;
margin: 0 auto; /* Centering the container */
transition: transform 0.2s; /* Smooth scaling effect */
}
.container:hover {
transform: scale(1.02); /* Slightly enlarge on hover */
}
.form-group {
margin-bottom: 20px; /* Reduced space for a tighter layout */
}
label {
font-weight: bold;
color: #333;
display: block;
margin-bottom: 8px;
text-align: left; /* Align label to the left */
}
input[type=”text”] {
width: calc(100% – 22px); /* Full width minus padding/borders */
padding: 15px;
border: 2px solid #ddd; /* Slightly thicker border */
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for input fields */
}
input[type=”text”]:focus {
border-color: #ff3d00; /* Highlight border on focus */
outline: none;
box-shadow: 0 0 8px rgba(255, 61, 0, 0.5); /* Glow effect on focus */
}
button {
background-color: #ff3d00; /* Button color matches theme */
color: white;
padding: 15px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 18px; /* Increased font size for better readability */
transition: background-color 0.3s, transform 0.2s;
width: 100%; /* Full width for the button */
margin-top: 10px; /* Space above the button */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for button */
}
button:hover {
background-color: darkred; /* Darker red on hover */
transform: translateY(-2px); /* Subtle lift effect */
}
h2 {
margin-top: 20px;
color: #333;
text-align: center;
font-size: 1.8em; /* Slightly larger font for the output title */
}
pre {
background-color: #f0f0f0; /* Light grey background for output */
padding: 15px;
border: 2px solid #ddd; /* Solid border for separation */
border-radius: 8px;
overflow-x: auto; /* Allow horizontal scroll for long outputs */
margin-top: 10px;
white-space: pre-wrap; /* Wrap long lines */
word-wrap: break-word; /* Break words if necessary */
font-size: 16px; /* Slightly larger font for output readability */
}
document.getElementById(‘generate’).addEventListener(‘click’, function () {
const keyword1 = document.getElementById(‘keyword1’).value.trim().split(‘,’).map(k => k.trim());
const keyword2 = document.getElementById(‘keyword2’).value.trim().split(‘,’).map(k => k.trim());
const keyword3 = document.getElementById(‘keyword3’).value.trim().split(‘,’).map(k => k.trim());const results = [];
const allKeywords = [keyword1, keyword2, keyword3];const permute = (arr, tempArr) => {
if (tempArr.length === arr.length) {
results.push(tempArr.join(‘ ‘));
return;
}for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
if (!tempArr.includes(arr[i][j])) {
tempArr.push(arr[i][j]);
permute(arr, tempArr);
tempArr.pop();
}
}
}
};permute(allKeywords, []);
document.getElementById('output').textContent = results.join('n');
});
