teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

修正依頼いただきましたので、HTML&CSS追記致しました。

2020/11/28 07:22

投稿

AyaWeb4
AyaWeb4

スコア4

title CHANGED
File without changes
body CHANGED
@@ -67,6 +67,47 @@
67
67
  }
68
68
  ```
69
69
 
70
+ ```HTML
71
+ <!DOCTYPE html>
72
+ <html lang="ja">
73
+ <head>
74
+ <meta charset="UTF-8">
75
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
76
+ <meta name="description" content="Typing game">
77
+ <title>Typing game</title>
78
+ <link rel="stylesheet" href="css/ress.css">
79
+ <link rel="stylesheet" href="css/style.css">
80
+ </head>
81
+ <body>
82
+ <img id="js-image">
83
+ <p id="js-target">Start!</p>
84
+ <p id="js-result"></p>
85
+ <footer class="l-footer">
86
+ <div class="l-footer__inner">
87
+ <p class="p-footer__copyright"><small>&copy; 2020 *** Allrights Reserved.</small></p>
88
+ </div>
89
+ </footer>
90
+ <script src="js/main.js"></script>
91
+ </body>
92
+ </html>
93
+ ```
94
+
95
+ ```css
96
+ body {
97
+ padding-top: 40px;
98
+ font-family: 'Courier New', monospace;
99
+ text-align: center;
100
+ }
101
+
102
+ body p {
103
+ padding-bottom: 20px;
104
+ }
105
+
106
+ #js-target {
107
+ font-size: 48px;
108
+ letter-spacing: .1em;
109
+ }
110
+ ```
70
111
  ##試したこと
71
112
  quizSetのtのキーに格納されている単語を取り出して、keydownのイベントで
72
113
  タイピングの正誤判定をすればいいと思うのですが、word[loc]の記述がおかしいのでは