-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
52 lines (46 loc) · 2.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@t_motooka"/>
<meta property="og:title" content="RandomPicker"/>
<meta property="og:description" content="イケてるくじ引きツール：入力した候補の中から1つを神が選んでくれるッ…！！"/>
<title>RandomPicker</title>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div id="main">
<header>
<h1>RandomPicker</h1>
<p>イケてるくじ引きツール：入力した候補の中から1つを神が選んでくれるッ…！！</p>
<p class="small">※入力内容は <code>localStorage</code> つまりお使いのブラウザの中に保存されます。インターネット上に送信されることはありません。ソースコードは<a href="https://github.com/motooka/RandomPicker" target="_blank" rel="noopener">こちら</a></p>
</header>
<hr/>
<div id="app">
<input type="text" v-model="candidate" v-on:keydown.enter="add" placeholder="くじの候補を入力"/>
<button v-on:click="add">追加</button>
<ul>
<li v-for="(item, index) in items">
<input type="checkbox" v-bind:id="'checkbox-'+index" v-model="item.use" v-on:click="writeLocalStorageAsync">
<label v-bind:for="'checkbox-'+index">{{ item.name }}</label>
<button v-on:click="deleteItem(index)">削除</button>
</li>
</ul>
<button v-on:click="deleteAll" v-bind:disabled="items.length <= 0">全消し...</button>
<button v-on:click="select" v-bind:disabled="usingItems.length <= 0" id="executeButton">くじを引く</button>
<div id="resultWrapper">
<div id="result" v-if="selected.length>0">
選ばれたのは <span>{{ selected }}</span> でした
</div>
</div>
</div><!-- end of app -->
<hr/>
<footer>
Copyright © 2021 <a href="https://www.tmotooka.com/" target="_blank" rel="noopener">T.MOTOOKA</a>. All Rights Reserved.
</footer>
</div><!-- end of main -->
</body>
</html>