index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript practice</title>
        <style>
            body{
                display: flex;
                flex-wrap: wrap;
            }
            
            .box{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                cursor: pointer;
                transition: 0.8s;
                margin: 0 8px 8px 0;
                text-align: center;
                line-height: 100px;
            }

            .win{
                background: pink;
                border-radius: 50%;
                transform: rotate(360deg);
            }

            .lose{
                transform: scale(0.9) ;
            }

            

        </style>
    </head>
    <body>
        
        <script>
            'use strict';

            const num = 5;
            const winner = Math.floor(Math.random() * num);
            for(var i=0; i<num; i++){
                const div = document.createElement('div');
                div.classList.add('box');
                
                div.addEventListener('click', () => {
                    if(i === winner){
                        div.textContent = 'win!';
                        div.classList.add('win');
                    }else{
                        div.textContent = 'lose';
                        div.classList.add('lose');
                    }
                });

            document.body.appendChild(div);   

            }

        </script>
    </body>
</html>

ドットインストール - 3分動画でマスターできるプログラミング学習サービス

サービスメニュー

ご利用にあたって

プログラミング勉強会

ソーシャルメディア

更新情報