単語帳

表と裏をdocument.getElementByIdで、divタグのidから呼び出しています。CSS3でカードflipはtransform: rotateY(180deg);と表現します。

リフェレンス
KeyCode:The KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.

keyup:Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>単語帳</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
        margin: 0;
        background: #e0e0e0;
        text-align: center;
        font-family: Verdana, sans-serif;
        color: #fff;
    }
    #btn {
        width: 200px;
        margin: 0 auto;
        padding: 7px;
        border-radius: 5px;
        background: #00aaff;
        box-shadow: 0 4px 0 #0088cc;
        cursor: pointer;
    }
    #btn:hover{
        opacity: 0.8;
    }
    #card {
        margin: 60px auto 20px;
        width: 400px;
        height: 100px;
        cursor: pointer;
        font-size: 38px;
        line-height: 100px;
        perspective: 100px;
        transform-style: preserve-3d;
        transition: transform .8s;
    }
    #card-front, #card-back {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        position: absolute;
        backface-visibility: hidden;
    }
    #card-front {
        background: #fff;
        color: #333;
    }
    #card-back {
        background: #00aaff;
        transform: rotateY(180deg);
    }
    .open {
        transform: rotateY(180deg);
    }
    </style>
</head>
<body>
    <div id="card">
        <div id="card-front"></div>
        <div id="card-back"></div>
    </div>
    <div id="btn">NEXT</div>
    <script>
    (function(){
        'use strict'
 
        var words = [
            {'en': 'read', 'ja':'読む'},
            {'en': 'write', 'ja':'書く'},
            {'en': 'eat', 'ja':'食べる'},
            {'en': 'run', 'ja':'走る'},
            {'en': 'walk', 'ja':'歩く'}
        ];
 
        var card = document.getElementById('card');
        var cardFront = document.getElementById('card-front');
        var cardBack = document.getElementById('card-back');
        var btn = document.getElementById('btn');
 
        card.addEventListener('click', function(){
            flip();
        });
        btn.addEventListener('click', function(){
            next();
        });
 
        function next(){
            if (card.className === 'open') {
                card.addEventListener('transitioned', setCard);
                flip();
            } else {
                setCard();
            }
 
        }
 
        function setCard(){
            var num = Math.floor(Math.random() * words.length);
            cardFront.innerHTML = words[num]['en'];
            cardBack.innerHTML = words[num]['ja'];
            card.removeEventListener('transitioned', setCard);
        }
 
        setCard();
 
        window.addEventListener('keyup', function(e){
            if (e.keyCode === 70){
                flip();
            } else if (e.keyCode === 78){
                next();
            }
        });
 
        function flip(){
            card.className = card.className === '' ? 'open' : '';
        }
     
    })();
    </script>
</body>
</html>