Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
3×3グリッドのアイデア発想ツール
<!DOCTYPE html><meta charset="utf-8"><html><body>
<!-- UIを作成 -->
<div id="g"></div>
<p style="clear:both"></p>
<p><a id="save" download="idea.txt" href="#">保存</a></p>
<!-- JavaScript -->
<script>
// 3×3のグリッドを作成 --- (*1)
const g = document.querySelector('#g')
const items = []
for (let i = 0; i < 9; i++) {
const e = document.createElement('button')
e.innerHTML = '?'
e.onclick = () => { // クリックした時の処理 --- (*2)
const msg = prompt('アイデアは?')
if (!msg) { return }
e.innerHTML = msg.replace('&', '&amp;')
.replace('>', '&gt;').replace('<', '&lt;')
}
if (i == 4) { e.className = 'center' }
g.appendChild(e)
items.push(e)
}
// 保存リンクでデータをダウンロード --- (*3)
const save = document.querySelector('#save')
save.onclick = (e) => {
const m = items.map(i => i.innerHTML)
const text = m.join('\n')
const blob = new Blob([text], {'type': 'text/plain'})
save.href = URL.createObjectURL(blob)
};
</script>
<style>
#g { width: 600px; }
button {
padding: 0px; margin: 0px;
width: 200px; height: 150px;
font-size: 1.3em; float: left;
}
.center { background-color: #fff0f0; }
</style>
</body></html>
<!DOCTYPE html><meta charset="utf-8"><html><body>
<!-- UIを作成 -->
<div id="g"></div>
<p style="clear:both"></p>
<p><a id="save" download="idea.txt" href="#">保存</a></p>
<!-- JavaScript -->
<script>
// 3×3のグリッドを作成
const g = document.querySelector('#g')
const items = []
for (let i = 0; i < 9; i++) {
const e = document.createElement('textarea')
e.innerHTML = '?'
if (i == 4) { e.className = 'center' }
g.appendChild(e)
items.push(e)
}
// 保存リンクでデータをダウンロード
const save = document.querySelector('#save')
save.onclick = (e) => {
const m = items.map(i => i.value)
const text = m.join('\n')
const blob = new Blob([text], {'type': 'text/plain'})
save.href = URL.createObjectURL(blob)
};
</script>
<style>
#g { width: 600px; }
textarea {
padding: 0px; margin: 0px;
width: 194px; height: 150px;
font-size: 1.3em; float: left;
}
.center { background-color: #fff0f0; }
</style>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment