<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');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js
  2. https://kit.fontawesome.com/b6ad2a1f1b.js