{"id":9252,"date":"2022-10-21T16:16:53","date_gmt":"2022-10-21T15:16:53","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9252"},"modified":"2023-10-28T20:08:27","modified_gmt":"2023-10-28T19:08:27","slug":"js-refactoring-the-guess-number-game-code","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/js-refactoring-the-guess-number-game-code\/","title":{"rendered":"JS: Refactoring the Guess Number Game Code"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

To work toward the DRY principle (Don't Repeat Yourself), the code in the previous learning Post comprised 2 almost equal blocks for two differnet conditions - one guess too high, the other too low.<\/p>\n

A ternary operator can be used to replace those code blocks so massively decrease the code quantity, while doing the same job. This is called code refactoring<\/em>.<\/p>\n

The original similar blocks are:<\/p>\n

} else if (guess > secretNumber) {\r\n    if (score > 1) {\r\n      document.querySelector('.message').textContent = 'Too high';<\/span>\r\n      document.querySelector('.message').style.color = 'red';\r\n      score--;\r\n      document.querySelector('.score').textContent = score;\r\n    } else {\r\n      document.querySelector('.message').textContent = 'You lost the game!';\r\n      document.querySelector('.score').textContent = 0;\r\n    }\r\n\r\n    \/\/ Guess too low\r\n  } else if (guess < secretNumber) {\r\n    if (score > 1) {\r\n      document.querySelector('.message').textContent = 'Too low';<\/span>\r\n      document.querySelector('.message').style.color = 'yellow';\r\n      score--;\r\n      document.querySelector('.score').textContent = score;\r\n    } else {\r\n      document.querySelector('.message').textContent = 'You lost the game!';\r\n      document.querySelector('.score').textContent = 0;\r\n    }\r\n  }<\/pre>\n
The key logic for replacement are :<\/p>\n
if (guess > secretNumber)<\/span> and if (guess < secretNumber)<\/span><\/p>\n
with the main block differences being the screen messages \"too high\" and \"too low\"<\/p>\n
The logic that differentiates these \"if\" blocks asks if the guess is either higher or lower than the secret number to be guessed, which can be replaced by the logic that the guessed number is just \"different from\" or not equal to the secret number to be guessed.<\/p>\n
This original method can be replaced with an \"else if\" block placed above the prior two blocks and only ONE code block segment placed in it::<\/p>\n
\n
else if (guess !== secretNumber) {\u00a0\r\n      if (score > 1) {\r\n            document.querySelector('.message').textContent = \r\n            guess > secretNumber ? 'Too high!' : 'Too low!'\r\n            score--;\r\n            document.querySelector('.score').textContent = score;\r\n          } else {\r\n            document.querySelector('.message').textContent = 'You lost the game!';\r\n            document.querySelector('.score').textContent = 0;\r\n          }\r\n      }<\/pre>\n
The ternary operator can be placed so:<\/p>\n<\/div>\n
'use strict';\r\n\r\n\/\/ -----------------------------GAME------------------------------\r\n\r\n\/\/ -----------------pre Play Again button code\r\n\r\nlet secretNumber = Math.trunc(Math.random() * 20 + 1);\r\n\/\/ state variable - part of the state of the code - not in the DOM\r\nlet score = 20;\r\nlet highscore = 0;\r\n\r\ndocument.querySelector('.check').addEventListener('click', function () {\r\n  const guess = Number(document.querySelector('.guess').value);\r\n\r\n  \/\/ When no input\r\n  if (!guess) {\r\n    document.querySelector('.message').textContent =\r\n      'No Number Entered! Try Again!';\r\n\r\n    \/\/ When player wins\r\n  } else if (guess === secretNumber) {\r\n    document.querySelector('.message').textContent = 'Correct Number! You Win!';\r\n    document.querySelector('.number').textContent = secretNumber;\r\n\r\n    \/\/ change bg on win\r\n    document.querySelector('body').style.backgroundColor = '#60b347';\r\n    \/\/ change text width\r\n    document.querySelector('.number').style.width = '30rem';\r\n\r\n    if (score > highscore) {\r\n      highscore = score;\r\n      document.querySelector('.highscore').textContent = highscore;\r\n    }\r\n\r\n    \/\/ when guess is different from secret number:\r\n      } else if (guess !== secretNumber) {\r\n      if (score > 1) {\r\n        document.querySelector('.message').textContent =\r\n          guess > secretNumber ? 'Too high!' : 'Too low!';<\/span>\r\n        score--;\r\n        document.querySelector('.score').textContent = score;\r\n      } else {\r\n        document.querySelector('.message').textContent = 'You lost the game!';\r\n        document.querySelector('.score').textContent = 0;\r\n      }\r\n     }\r\n});\r\n\/\/ \"Again\" reset button - really simple method of reloading from server i window.location.reload() so cache is released - so whole page! Would incur traffic and lose highscore value. Now do long version...\r\ndocument.querySelector('.again').addEventListener('click', function () {\r\n  console.log(document.querySelector('.again').value);\r\n  \/\/ window.location.reload()\r\n  score = 20;\r\n  secretNumber = Math.trunc(Math.random() * 20 + 1);\r\n  document.querySelector('.message').textContent = 'Start guessing...';\r\n  document.querySelector('.score').textContent = '20';\r\n  document.querySelector('.number').textContent = '?';\r\n  document.querySelector('.guess').value = '';\r\n  document.querySelector('body').style.backgroundColor = '#222';\r\n  document.querySelector('.number').style.width = '15rem';\r\n});\r\n<\/pre>\n
A next refactoring step would be to replace all the duplicate code line with functions where possible. If a code block is highlighted in VS Code it shows in all the other places the same text exists, so the example of code lines for the (\".message\") class HTML lines shows 5 code lines the same that could be replaced with functions:<\/p>\n
 <\/p>\n
\"\"<\/p>\n
The function for this code that creates a generic displayMessage function:<\/p>\n
\/\/ document.querySelector('.message').textContent = 'Correct Number! You Win!'<\/span>;\r\n   const displayMessage = function (message<\/span>) {\r\n     document.querySelector('.message').textContent = message;<\/pre>\n
Once that function is created, the original code can be commented out, copied from then\/or deleted, then the function can be used in all the other places with the original text of that code entered as it's message argument.<\/p>\n
It's definition needs to be placed outside the main game container code with the other declared variables. The complete replacement code:<\/p>\n
'use strict';\r\n\r\n\/\/ -----------------------------GAME------------------------------\r\n\r\n\/\/ -----------------pre Play Again button code\r\n\r\nlet secretNumber = Math.trunc(Math.random() * 20 + 1);\r\n\/\/ state variable - part of the state of the code - not in the DOM\r\nlet score = 20;\r\nlet highscore = 0;\r\nconst displayMessage = function (message) {\r\n  document.querySelector('.message').textContent = message;\r\n};\r\n\r\n\/\/ Main game container {} start\r\ndocument.querySelector('.check').addEventListener('click', function () {\r\n  const guess = Number(document.querySelector('.guess').value);\r\n\r\n  \/\/ When no input\r\n  if (!guess) {\r\n    \/\/ document.querySelector('.message').textContent =\r\n    \/\/   'No Number Entered! Try Again!';\r\n    \/\/ const displayMessage = function (message) {\r\n    \/\/   document.querySelector('.message').textContent = message;\r\n    \/\/ };\r\n    displayMessage('No Number Entered!');\r\n\r\n    \/\/ When player wins\r\n  } else if (guess === secretNumber) {\r\n    displayMessage('Correct Number! You Win!');\r\n\r\n    document.querySelector('.number').textContent = secretNumber;\r\n\r\n    \/\/ change bg on win\r\n    document.querySelector('body').style.backgroundColor = '#60b347';\r\n    \/\/ change text width\r\n    document.querySelector('.number').style.width = '30rem';\r\n\r\n    if (score > highscore) {\r\n      highscore = score;\r\n      document.querySelector('.highscore').textContent = highscore;\r\n    }\r\n\r\n    \/\/ when guess is different from secret number:\r\n  } else if (guess !== secretNumber) {\r\n    if (score > 1) {\r\n      \/\/ guess > secretNumber ? 'Too high!' : 'Too low!';\r\n      \/\/ document.querySelector('.message').textContent = guess > secretNumber ? 'Too high!' : 'Too low!'\r\n      displayMessage(guess > secretNumber ? 'Too high!' : 'Too low!');\r\n      score--;\r\n      document.querySelector('.score').textContent = score;\r\n    } else {\r\n      \/\/ document.querySelector('.message').textContent = 'You lost the game!';\r\n      displayMessage('You lost the game!!');\r\n      document.querySelector('.score').textContent = 0;\r\n    }\r\n  }\r\n});\r\n\/\/ \"Again\" reset button - really simple method of reloading from server i window.location.reload() so cache is released - so whole page! Would incur traffic and lose highscore value. Now do long version...\r\ndocument.querySelector('.again').addEventListener('click', function () {\r\n  console.log(document.querySelector('.again').value);\r\n  \/\/ window.location.reload()\r\n  score = 20;\r\n  secretNumber = Math.trunc(Math.random() * 20 + 1);\r\n  \/\/ document.querySelector('.message').textContent = 'Start guessing...';\r\n  displayMessage('Start guessing...');\r\n  document.querySelector('.score').textContent = '20';\r\n  document.querySelector('.number').textContent = '?';\r\n  document.querySelector('.guess').value = '';\r\n  document.querySelector('body').style.backgroundColor = '#222';\r\n  document.querySelector('.number').style.width = '15rem';\r\n});\r\n<\/pre>\n
 <\/p>\n
The same can even be done with the ternary operator :<\/p>\n
\n
\/\/ guess > secretNumber ? 'Too high!' : 'Too low!';<\/span><\/div>\n
\n
\n
\/\/ document.querySelector('.message').textContent = guess > secretNumber ? 'Too high!' : 'Too low!'<\/span><\/div>\n<\/div>\n<\/div>\n
\n
\n
displayMessage(guess > secretNumber ? 'Too high!' : 'Too low!')<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
To work toward the DRY principle (Don't Repeat Yourself), the code in the previous learning Post comprised 2 almost equal blocks for two differnet conditions - one guess too high, the other too low. A ternary operator can be used to replace those code blocks so massively decrease the code quantity, while doing the same ...\u00a0 JS: Refactoring the Guess Number Game Code<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9252","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":3,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9252"}],"version-history":[{"count":14,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9252\/revisions"}],"predecessor-version":[{"id":9957,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9252\/revisions\/9957"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}