自分を励ますアプリ
ひたすらポジティブな言葉をかけてくれる励ましアプリ。
HTML5、CSS3、Javascriptにて製作。
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
//メッセージを用意
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
* {
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;
}