<h1>日用品残りHP</h1>
<itemlist></itemlist>
<script type="riot/tag">
<itemlist>
<div class="add_item">
<input type="text" name="add_item_name" placeholder="アイテム名を入力" /><button onclick={addItem}><i class="fas fa-plus"></i></button>
</div>
<!-- この中にコーデイングした内容を入れる -->
<div>
<div class="item" each={item, i in items}>
<button class="trash" onclick={removeItem}><i class="fas fa-trash"></i></button>
<div class="progres">
<p class="bar" style="width:{item.hp}%; background-color:{item.bk};"></p>
<p style="color:{item.clr}">{item.name}</p>
<p class="max-min-btn">
<button onclick={minHp}></button>
<button onclick={maxHp}></button>
</p>
</div>
<button class="plus" onclick={addHp}><i class="fas fa-plus"></i></button>
<button class="minus" onclick={defHp}><i class="fas fa-minus"></i></button>
</div>
</div>
//ここからスクリプトかく
this.items = [
/* {
'name':'洗濯洗剤',
'hp':50,
'bk':'#4072B3',
'clr':'#333',
},
{
'name':'台所洗剤',
'hp':30,
'bk':'#4072B3',
'clr':'#333',
},
*/
];
this.hp_max = 100;
this.hp_min = 1;
this.hp_spn = 5;
//読み込み時にスタイルを変更する
this.on("mount", function() {
this.readItems();
for(var i = 0; i < this.items.length; i++){
this.changeHpStyle(i);
}
});
addHp(e){
key = e.item.i;
v = this.hp_spn;
this.items[key]['hp'] += v;
this.changeHpStyle(key);
}
defHp(e){
key = e.item.i;
v = this.hp_spn * -1;
this.items[key]['hp'] += v;
this.changeHpStyle(key);
}
maxHp(e){
key = e.item.i;
this.items[key]['hp'] = this.hp_max;
this.changeHpStyle(key);
}
minHp(e){
key = e.item.i;
this.items[key]['hp'] = this.hp_min;
this.changeHpStyle(key);
}
changeHpStyle(key){
//max値の調整
if(this.items[key]['hp'] > this.hp_max){
this.items[key]['hp'] = this.hp_max;
} else if(this.items[key]['hp'] < this.hp_min) {
this.items[key]['hp'] = this.hp_min;
}
this.items[key]['bk'] = '#4072B3'; //デフォルト色
this.items[key]['clr'] = '#fff';
if(this.items[key]['hp'] <= 1){
this.items[key]['bk'] = '#EB8686';
this.items[key]['clr'] = '#CE2937';
} else if(this.items[key]['hp'] < 30) {
this.items[key]['bk'] = '#EB8686';
} else if(this.items[key]['hp'] < 50){
this.items[key]['bk'] = '#6088C6';
}
this.update();
this.saveItems();
}
addItem(e){
push_key = this.items.push({
'name':this.add_item_name.value,
'hp':100,
'bk':'#6088C6',
'clr':'#333',
});
this.add_item_name.value = '';
this.changeHpStyle((push_key - 1));
}
removeItem(e){
this.items.splice(e.item.i, 1);
this.saveItems();
}
saveItems(){
localStorage.setItem('items', JSON.stringify(this.items));
}
readItems(){
items = localStorage.getItem('items', this.items);
if(items){
this.items = JSON.parse(items);
}
}
</itemlist>
</script>
:root{
--c-blue:#4072B3;
--c-semblue:#6088C6;
--c-pink:#EB8686;
--c-gray:#C0C0C0;
--radius:0.25em;
}
body{
width:95%;
max-width:750px;
margin-right:auto;
margin-left:auto;
}
h1{
font-size:110%;
text-align:center;
}
button:focus{
outline:none;
border:none;
}
p, div{
padding:0;
margin:0;
box-sizing:border-box;
line-height:1em;
}
button{
background:var(--c-blue);
border:none;
color:#fff;
border-radius:var(--radius);
}
button.minus,
button.trash{
background:var(--c-pink);
}
div.item{
display:flex;
margin-bottom:20px;
}
div.item > button{
width:2em;
padding:0.5em;
margin-right:0.25em;
margin-left:0.25em;
}
div.item .progres{
flex:1;
position:relative;
background:var(--c-gray);
border-radius:var(--radius);
}
div.item .progres p{
border-radius:var(--radius);
padding:0.25em;
width:100%;
position:absolute;
left:0; top:0; bottom:0;
margin-top:auto; margin-bottom:auto;
line-height: 1.3em;
}
div.item .progres p.max-min-btn{
display:flex;
}
div.item .progres p.max-min-btn > button{
background:none;
width:50%;
height:100%;
}
div.add_item{
margin-bottom:20px;
text-align:center;
}
div.add_item input[type="text"]{
padding:0.5em;
}
div.add_item button{
height:2.5em;
width:2.5em;
margin-left:10px;
}
//タグの読み込み・宣言よりあとに入れること
riot.mount('itemlist');
This Pen doesn't use any external CSS resources.