--- title: JavaScriptで勉強時間を伸ばすボタン作ってみた! tags: JavaScript author: engineer_kazuki slide: false --- **休憩したくなったら押すだけです!** 永遠と「休憩」がでなければ、ひたすら勉強できますよ笑 ![Screen Recording 2020-11-22 at 03.46 PM.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896901/28e70daa-01ea-56b6-fe5f-d3cafad000ae.gif) ```index.html GAME

押してね!

?
``` ```styles.css h1 { text-align: center; } body { background: #efefef; } #btn { width: 200px; height: 200px; background: #ef454a; border-radius: 30%; margin: 30px auto; text-align: center; line-height: 200px; color: white; 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; margin-top: 40px; } ``` ```main.js 'use strict'; { const btn = document.getElementById('btn');   btn.addEventListener('click', () => { const n = Math.floor(Math.random() * 3); switch (n) { case 0: btn.textContent = '休憩'; break; case 1: btn.textContent = 'もう10分'; break; case 2: btn.textContent = 'もう15分'; break; } }) } ``` JavaScriptほんと楽しい(^^) ###参考 [JavaScriptでおみくじを作ろう](https://dotinstall.com/lessons/omikuji_js_v5)