better code

ms.css

@@ -28,10 +28,8 @@ body, html
 .mine_count {
   width: 35px;
   height: 25px;
-  border: 1px solid #CCC;
   padding: 10px 5px 5px 5px;
 
-  background-color: #EEE;
   color: black;
 
   font-weight: bold;
@@ -42,10 +40,8 @@ body, html
 .timer {
   width: 35px;
   height: 25px;
-  border: 1px solid #CCC;
   padding: 10px 5px 5px 5px;
 
-  background-color: #EEE;
   color: red;
 
   font-weight: bold;
@@ -56,10 +52,8 @@ body, html
 .moves_made {
   width: 35px;
   height: 25px;
-  border: 1px solid #CCC;
   padding: 10px 5px 5px 5px;
 
-  background-color: #EEE;
   color: blue;
 
   font-weight: bold;

ms.js

@@ -1,13 +1,5 @@
-/*
-  Minesweeper.js
-  Author: Brian Glaz
-
-  Desccription:
-    Javascript implementation of the classic game, Minesweeper
-*/
-
-//Minesweeper constructor to represent the game
 class Minesweeper {
+  //Minesweeper constructor to represent the game
   constructor(opts = {}) {
     let loadedData = {};
 
@@ -76,6 +68,27 @@ class Minesweeper {
     this.render();
   }
 
+  //game was lost
+  gameLost() {
+    const gameStatus = document.getElementById("game_status");
+
+    this.status_msg = "Sorry, you lost!";
+    this.playing = false;
+    stopTimer();
+    gameStatus.textContent = this.status_msg;
+    gameStatus.style.color = "#EE0000";
+  }
+
+  //game was won
+  gameWon() {
+    const gameStatus = document.getElementById("game_status");
+
+    this.status_msg = "You won!!";
+    this.playing = false;
+    gameStatus.textContent = this.status_msg;
+    gameStatus.style.color = "#00CC00";
+  }
+
   //construct the DOM representing the grid
   render() {
     const gameContainer = document.getElementById("game_container");
@@ -153,11 +166,7 @@ class Minesweeper {
 
       //end the game if user clicked a mine
       if (cell.isMine) {
-        this.status_msg = "Sorry, you lost!";
+        this.gameLost();
-        this.playing = false;
-        stopTimer()
-        document.getElementById("game_status").textContent = this.status_msg;
-        document.getElementById("game_status").style.color = "#EE0000";
       } else if (!cell.isFlagged && cell.value == 0) {
         //if the clicked cell has 0 adjacent mines, we need to recurse to clear out all adjacent 0 cells
         const adjCells = this.getAdjacentCells(cell.ypos, cell.xpos);
@@ -199,19 +208,10 @@ class Minesweeper {
 
   //check if player has won the game
   validate() {
-    const gameStatus = document.getElementById("game_status");
-
     if (this.minesFound === this.options.mines && this.falseMines === 0) {
-      this.status_msg = "You won!!";
+      this.gameWon()
-      this.playing = false;
-      gameStatus.textContent = this.status_msg;
-      gameStatus.style.color = "#00CC00";
     } else {
-      this.status_msg = "Sorry, you lost!";
+      this.gameLost();
-      this.playing = false;
-      stopTimer()
-      gameStatus.textContent = this.status_msg;
-      gameStatus.style.color = "#EE0000";
     }
   }
 
@@ -227,7 +227,7 @@ class Minesweeper {
     return result;
   }
 
-  }
+}
 
 
 //Cell constructor to represent a cell object in the grid
@@ -265,16 +265,19 @@ function newGame(opts = {}) {
   console.log(game.gridToString());
 }
 
+//stop the timer
 function stopTimer() {
   clearInterval(countdown);
 }
 
+//start the timer
 function startTimer() {
   stopTimer();
   document.getElementById('timer').textContent = 70;
   countdown = setInterval(updateTimer, 1000);
 }
 
+//update remaining time every second and at the end validate game
 function updateTimer() {
     const timerDisplay = document.getElementById('timer');
 
@@ -284,10 +287,12 @@ function updateTimer() {
         // Call your function here every second
     } else {
         stopTimer();
+        game.validate()
         alert('Time run out!');
     }
 }
 
+//create new game
 function createNewGame() {
   const opts = {
   rows: 8,
@@ -299,9 +304,7 @@ function createNewGame() {
 
 window.onload = function () {
   //attach click event to cells - left click to reveal
-  document.
+  document.getElementById("game_container").addEventListener("click", function (e) {
-  getElementById("game_container").
-  addEventListener("click", function (e) {
     const target = e.target;
 
     if (target.classList.contains("cell")) {
@@ -319,9 +322,7 @@ window.onload = function () {
   });
 
   //right click to flag
-  document.
+  document.getElementById("game_container").addEventListener("contextmenu", function (e) {
-  getElementById("game_container").
-  addEventListener("contextmenu", function (e) {
     e.preventDefault();
     const target = e.target;
 
@@ -339,9 +340,7 @@ window.onload = function () {
   });
 
   //attach click to validate button
-  document.
+  document.getElementById("validate_button").addEventListener("click", function () {
-  getElementById("validate_button").
-  addEventListener("click", function () {
     game.validate();
   });