HTMLify
index.html
Views: 352 | Author: cody
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>WordBeater</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body class="bg-dark text-white "> <header class="bg-secondary text-center p-3 mb-5"> <h1>WordBeater</h1> </header> <div class="container text-center"> <!-- Word & Input --> <div class="row"> <div class="col-md-6 mx-auto"> <p class="lead">Type The Given Word Within <span class="text-success" id="seconds">5</span> Seconds:</p> <h2 class="display-2 mb-5" id="current-word">hello</h2> <input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus> <h4 class="mt-3" id="message"></h4> <!-- Time & Score Columns --> <div class="row mt-5"> <div class="col-md-6"> <h3>Time Left: <span id="time">0</span> </h3> </div> <div class="col-md-6"> <h3>Score: <span id="score">0</span> </h3> </div> <br><br> <div class="col"> <h3>High Score: <span id="highscore">0</span> </h3> </div> </div> <!-- Instructions --> <div class="row mt-5"> <div class="col-md-12"> <div class="card card-body bg-secondary text-white"> <h5>Instructions</h5> <p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score will reset</p> </div> </div> </div> </div> </div> </div> <script src="js/main.js"></script> </body> </html> |