コーディング
とくに問題はありません。
ボタンのかたちを作ります。
#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;
/* 押すことで下にずらしたようにみせる */
}
ドットインストールの講座で一度学習したのですが、もう一度復習。
http://www.htmq.com/css3/box-shadow.shtml
影を定義する指定内容は、以下のように解釈されます。
いろいろ数値を変えてみるのですが、「ぼかし距離」と「広がり距離」の違いがよくわからないですね。もうちょっと研究してみる。
https://developer.mozilla.org/ja/docs/Web/CSS/user-select
'user strict'
{
【一つ目】
const hatena = document.getElementById('btn');
← id btnからtext抜いて、hatenaという名前をつける
// hatena.addEventListener('click',() =>{
←hatenaに「clickをしたら…」というイベントをつける
// const lucky = ['good','soso','bad'];
←この3つを表示させる。luckyと名付ける
// hatena.textContent = lucky[Math.floor(Math.random() * lucky.length)];
←hatenaをluckyの3つからランダムに選んで上書きする
// });
【二つ目】
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と表示
}
});
}