コーディング
#ドットインストール 「javascriptでおみくじをつくろう」まとめ
html
とくに問題はありません。
css
ボタンのかたちを作ります。
#btn{
width: 200px;
height: 200px;
background: #ef454a;
border-radius: 50%;
margin: 30px auto;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: bold;
font-size: 42px;
cursor: pointer;
box-shadow: 0 10px 0 #d1483e;
user-select: none;
}
#btn:hover{
opacity: 0.9;
}
#btn:active{
box-shadow: 0 5px 0 #d1483e;
/* 押すことでbtnの影を短くする */
margin-top: 35px;
/* 押すことで下にずらしたようにみせる */
}box-shadow
ドットインストールの講座で一度学習したのですが、もう一度復習。
http://www.htmq.com/css3/box-shadow.shtml
影を定義する指定内容は、以下のように解釈されます。
- １番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
- ２番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
- ３番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
- ４番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
- 色の値を指定すると、影がその色になります。（上記サイトから引用）
いろいろ数値を変えてみるのですが、「ぼかし距離」と「広がり距離」の違いがよくわからないですね。もうちょっと研究してみる。
user-select
https://developer.mozilla.org/ja/docs/Web/CSS/user-select
javascript
'user strict'
{
【一つ目】
const hatena = document.getElementById('btn');
← id btnからtext抜いて、hatenaという名前をつける
// hatena.addEventListener('click',() =>{
←hatenaに「clickをしたら…」というイベントをつける
// const lucky = ['good','soso','bad'];
←この３つを表示させる。luckyと名付ける
// hatena.textContent = lucky[Math.floor(Math.random() * lucky.length)];
←hatenaをluckyの３つからランダムに選んで上書きする
// });
【二つ目】
hatena.addEventListener('click',() =>{
←hatenaに「clickをしたら…」というイベントをつける
const n = Math.random();
←ランダムの数値にnという名前をつける
if(n < 0.2 ){
hatena.textContent = 'good';
←nが0.2未満だったら、goodと表示
}else if(n < 0.7){
hatena.textContent = 'soso';
←nが0.2から0.7の間だったらsosoと表示
}else{
hatena.textContent = 'bad';
←それ以外だったらbadと表示
}
});
}