First, open the index.html file from our CSS3 card matching game.

Replace the HTML markup with the last score, with the following HTML (it shows both scores and the date time in the game over popup):

<p>
  <small>Last Score: <span class='last-score'>0</span><br>
    Saved on: <span class='saved-time'></span>
  </small>
</p>

The HTML markup is now ready. We will move on to the game logic. Open the html5games.matchgame.js file in a text editor.

We will modify the gameover function. Add the following highlighted code to the gameover function. It gets the current date and time when the game ends and packs a formatted date and time with elapsed time together in the local storage:

function gameover() {
   // stop the timer
   clearInterval(matchingGame.timer);

   // display the elapsed time in the game over popup
   $(".score").html($("#elapsed-time"));

   // load...