以下が実際のHTML、CSS、JavaScriptのコードです。JavaScriptにevalを使ったり、他のサイトに遷移させたりするような悪意のあるコードは含まれていません。また、alertは使用していません。
HTML:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button Maker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Button Maker</h1>
<div>
<label for="text-input">Text: </label>
<input type="text" id="text-input">
<button id="create-button">Create</button>
</div>
<div id="button-container"></div>
<script src="app.js"></script>
</body>
</html>
```
CSS:
```
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
label {
font-weight: bold;
}
#button-container {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #3E8E41;
}
```
JavaScript:
```
const textInput = document.getElementById('text-input');
const createButton = document.getElementById('create-button');
const buttonContainer = document.getElementById('button-container');
function createNewButton(event) {
event.preventDefault();
const buttonText = textInput.value.trim();
if (buttonText === '') {
return;
}
const newButton = document.createElement('button');
newButton.classList.add('button');
newButton.textContent = buttonText;
newButton.addEventListener('click', () => {
copyToClipboard(buttonText, newButton);
});
newButton.addEventListener('contextmenu', (event) => {
event.preventDefault();
buttonContainer.removeChild(newButton);
});
buttonContainer.appendChild(newButton);
textInput.value = '';
}
function copyToClipboard(text, button) {
const dummyInput = document.createElement('input');
dummyInput.style.opacity = '0';
dummyInput.style.position = 'absolute';
dummyInput.value = text;
document.body.appendChild(dummyInput);
dummyInput.select();
document.execCommand('copy');
document.body.removeChild(dummyInput);
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = text;
}, 2000);
}
createButton.addEventListener('click', createNewButton);
```
ジョーク要素を加えたい場合は、例えば以下のような形で実装することができます。
```
const jokes = [
'Why did the web developer drown? Because he didn’t know how to float:left!',
'Why was the JavaScript developer sad? He didn’t know how to “null” his feelings.',
'Why do programmers prefer dark mode? Because light attracts bugs.',
'Why don’t scientists trust atoms? Because they make up everything.',
'Why couldn’t the bicycle stand up by itself? It was two tired.',
];
function getRandomJoke() {
return jokes[Math.floor(Math.random() * jokes.length)];
}
function createNewButton(event) {
event.preventDefault();
let buttonText = textInput.value.trim();
if (buttonText === '') {
buttonText = getRandomJoke();
}
// (以下省略)
}
```
