自分を励ますアプリ

# 自分を励ますアプリ

ひたすらポジティブな言葉をかけてくれる励ましアプリ。
HTML5、CSS3、Javascriptにて製作。

## HTML

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>励ましてくれるアプリ</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<meta name="robots" content="noindex,nofollow,noarchive">
</head>
<body>

<div id = "container">

  <header>
    <h1>励ましアプリ</h1>
  </header>
  
  <div id = "message"><strong>悩みや不安を書き出してみよう！</strong></div>
  
  <div id = "commentBox">
    <form action="" method="post">
      <input id="comment" type="text" value="">
    </form>
  </div>
  
  <div id ="button"><strong>悩みを聞いてもらおう</strong></div>
  
  <div id ="result"></div>
  
  <div id ="buttonClear"><strong>参考になったよありがとう</strong></div>
  
</div>

<script src="encouragement.js"></script>

</body>

</html>

```

## Javascript

```javascript
//メッセージを用意
let encouragement = [
	"十分睡眠を取ろう", "海を見に行こう", "陽の光を浴びよう",
	"明日は今よりいい日", "自分を信じろ", "努力は裏切らない",
	"諦めちゃダメだよ", "人事を尽くして天命を待て", "神は見捨てない"
	,"君ならできる"
];

//表示領域保持
let resultBox =  document.getElementById("result");

//クリアボタンの表示領域を隠す
document.getElementById('buttonClear').style.display="none";

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//ボタンを押したらの動き
document.getElementById("button").onclick = function(){

	//入力値保持
	let commentBox = document.getElementById("comment").value;

	//もしもコメントボックスに何か入力されていたら
	if (commentBox != "") {

		//あらかじめ用意したメッセージから.lengthで配列の要素数取得、その要素数だけループ処理、この場合条件を満たしている限りずっとループ
		while (0 < encouragement.length) {
			//クリアボタン表示
			document.getElementById('buttonClear').style.display="block";
			//配列の要素数に乱数を発生させてそれを整数に直す。
			let eNumber = Math.floor(Math.random()*encouragement.length);
			//配列の中身の文字[ランダムに取得したインデックスナンバー]、つまりランダムでメッセージを取得しそれを表示領域に表示
			resultBox.innerHTML = encouragement[eNumber];
			//処理終わり
			break;
		}
		
	}
	//そうでない場合、つまりコメントが何も入力されていなかったら。
	else {

		//結果を空に
		resultBox.innerHTML = "";
		//クリアボタン削除
		document.getElementById('buttonClear').style.display="none";
		//警告文表示
		alert("本当に悩みはありませんか?");

	}
	
}

//ボタンを押したらの動き
document.getElementById("buttonClear").onclick = function(){

	//コメントを空に
	document.getElementById("comment").value = "";
	//結果を空に
	resultBox.innerHTML = "";
	//クリアボタン削除
	document.getElementById('buttonClear').style.display="none";
	
}
```

## css

```css
* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height:100vh;
}

#container {
	margin:0 auto;
	width: 80vw;
	min-width: 300px;
	min-height: 50vh;
	border-radius: 5px;
	font-size: 1.2rem;
	text-align:center;
	overflow: auto;
	-webkit-box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
	-moz-box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
	box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
}

#container h1 {
	margin: 0;
	font-size: 1.3rem;
	padding:2vh 0vh;
	letter-spacing: 5px;
}

header {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	background: #27e0b7;
	width:100%;
	color:#333;
	background: repeating-linear-gradient(45deg, #2affd0, #2affd0 10px, #27e0b7 0, #27e0b7 20px);
	text-shadow: white 3px 0px, white -3px 0px, white 0px -3px, white -3px 0px, white 3px 3px, white -3px 3px, white 3px -3px, white -3px -3px, white 1px 3px, white -1px 3px, white 1px -3px, white -1px -3px, white 3px 1px, white -3px 1px, white 3px -1px, white -3px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px;
}

#message {
	padding:5vh 0vh;
	color:#333;
	font-weight:500;
}

#comment {
	width: 80%;
	height: 5vh;
	font-size: 1.15rem;
}

#button {
	background: #27e0b7;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	width: 50vw;
	padding: 2vh;
	margin-top: 7vh;
	margin-bottom: 7vh;
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	color: #FFF;
	border-bottom: solid 4px rgb(201, 201, 201);
	border-radius: 5px;
}

#button:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
}

#result {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #ffeb3b;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 5px;
	text-shadow: #806b20 3px 0px, #806b20 -3px 0px, #806b20 0px -3px, #806b20 -3px 0px, #806b20 3px 3px, #806b20 -3px 3px, #806b20 3px -3px, #806b20 -3px -3px, #806b20 1px 3px, #806b20 -1px 3px, #806b20 1px -3px, #806b20 -1px -3px, #806b20 3px 1px, #806b20 -3px 1px, #806b20 3px -1px, #806b20 -3px -1px, #806b20 1px 1px, #806b20 -1px 1px, #806b20 1px -1px, #806b20 -1px -1px;
}

#buttonClear {
	background: #27e0b7;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
	width: 50vw;
	padding: 2vh;
	margin-top: 5vh;
	margin-bottom: 7vh;
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	color: #FFF;
	border-bottom: solid 4px rgb(201, 201, 201);
	border-radius: 5px;
}

#buttonClear:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
}
```

[デモなどGithubはこちら。](https://github.com/boiledshRimp/encouragement)