はじめに
こんにちは！@70days_jsです。
今日はオブジェクト指向で手紙を作りました。(gif)↓
クリックすると次の手紙が表示されます。
今日は67日目。(2019/12/24)
よろしくお願いします。
サイトURL
やったこと
オブジェクト指向で手紙を作りました。
html↓
<body>
<h2>Letters</h2>
</body>
css↓
body {
font-family: Helvetica, YuGothic, "游ゴシック", sans-serif;
}
.letter {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px;
height: 200px;
width: 300px;
border: solid 1px black;
position: absolute;
top: 50%;
left: 50%;
background-color: white;
transform: translateX(-50%) translateY(-50%);
}
.pageShift {
display: none;
}
JavaScript↓
let letters = [],
name = [
"太郎",
"二郎",
"三郎",
"四郎",
"五郎",
"六郎",
"七郎",
"八郎",
"九郎",
"十郎"
],
event = [
"ラグビー",
"サッカー",
"ゲーム",
"サバイバル",
"ナルト",
"ドラゴンボール",
"宇宙",
"犬",
"鳥",
"ニンジン"
],
numberOfSheet = 10;
function Letter(name) {
this.name = name;
}
Letter.prototype.head = function() {
this.head = "拝啓<br>";
};
Letter.prototype.main = function(event) {
this.main =
"お久しぶりです。" +
this.name +
"です。<br>実は最近" +
event +
"をしまして、その結果を報告しようと思った次第でございます。<br>";
};
Letter.prototype.foot = function() {
this.foot = "敬具";
};
for (var i = 0; i < numberOfSheet; i++) {
let letter = new Letter(name[i]);
letters.push(letter);
let div = document.createElement("div");
div.classList.add("letter");
div.setAttribute("id", i);
let color = randomRGB();
div.style.backgroundColor = color;
letter.head();
letter.main(event[i]);
letter.foot();
div.innerHTML = letter.head + letter.main + letter.foot;
document.body.appendChild(div);
let eveLis = document.getElementById(i);
eveLis.addEventListener("click", function() {
eveLis.classList.add("pageShift");
});
}
function randomRGB() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let rgb = "rgba(" + r + ", " + g + "," + b + ", 1)";
return rgb;
}
今回手紙で内容が変わっている部分は、名前とイベントの2つです。
これはあらかじめ配列に用意しておきました。
LetterオブジェクトはLetterコンストラクターを使って作ります。
メソッドはhead, main, footです。
それぞれ手紙の冒頭、内容、締めの言葉を担当しています。
手紙の変更はイベントリスナーでclickをつけて実現しています。↓
eveLis.addEventListener("click", function() {
eveLis.classList.add("pageShift");
});
.pageShiftクラスはdisplayを消すクラスです。↓
.pageShift {
display: none;
}
これで一番上にある手紙はクリックされると消えたように見えます。
感想
うまい具合の文章を考えてくれるプログラムを組んでみたい・・・。
機械学習の方向を勉強するしかないんだろうか・・・？
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。