{"id":9247,"date":"2022-10-21T15:50:35","date_gmt":"2022-10-21T14:50:35","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9247"},"modified":"2023-10-28T20:08:23","modified_gmt":"2023-10-28T19:08:23","slug":"javascript-guess-number-game","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/javascript-guess-number-game\/","title":{"rendered":"JavaScript: Guess Number Game"},"content":{"rendered":"
<\/div>\n

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

<\/div>\n
https:\/\/www.udemy.com\/course\/the-complete-javascript-course\/<\/a><\/div>\n
jonas schmedtmann (Udemy):<\/div>\n
<\/div>\n

\"\"<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\r\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\r\n    <title>Guess My Number!<\/title>\r\n    <script src=\"script.js\" defer><\/script>\r\n  <\/head>\r\n  <body>\r\n    <header>\r\n      <h1>Guess My Number!<\/h1>\r\n      <p class=\"between\">(Between 1 and 20)<\/p>\r\n      <button class=\"btn again\">Play Again!<\/button>\r\n      <div class=\"number\">?<\/div>\r\n    <\/header>\r\n    <main>\r\n      <section class=\"left\">\r\n        <input class=\"guess\" type=\"number\">\r\n        <button class=\"btn check\">Check!<\/button>\r\n      <\/section>\r\n      <section class=\"right\">\r\n        <p class=\"message\">Start guessing...<\/p>\r\n        <p class=\"label-score\">? Score: <span class=\"score\">20<\/span><\/p>\r\n        <p class=\"label-highscore\">\r\n          ? Highscore: <span class=\"highscore\">0<\/span>\r\n        <\/p>\r\n      <\/section>\r\n    <\/main>\r\n    \r\n  <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
let 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    \/\/ Guess too high\r\n  } else if (guess > secretNumber) {\r\n    if (score > 1) {\r\n      document.querySelector('.message').textContent = 'Too high';\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';\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  }\r\n});\r\n\r\n\/\/ \"Again\" button reset game - 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\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});<\/pre>\n
@import url('https:\/\/fonts.googleapis.com\/css?family=Press+Start+2P&display=swap');\r\n\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: inherit;\r\n}\r\n\r\nhtml {\r\n  font-size: 62.5%;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: 'Press Start 2P', sans-serif;\r\n  color: #eee;\r\n  background-color: #222;\r\n  \/* background-color: #60b347; *\/\r\n}\r\n\r\n\/* LAYOUT *\/\r\nheader {\r\n  position: relative;\r\n  height: 35vh;\r\n  border-bottom: 7px solid #eee;\r\n}\r\n\r\nmain {\r\n  height: 65vh;\r\n  color: #eee;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n}\r\n\r\n.left {\r\n  width: 52rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.right {\r\n  width: 52rem;\r\n  font-size: 2rem;\r\n}\r\n\r\n\/* ELEMENTS STYLE *\/\r\nh1 {\r\n  font-size: 4rem;\r\n  text-align: center;\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 52%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.number {\r\n  background: #eee;\r\n  color: #333;\r\n  font-size: 6rem;\r\n  width: 15rem;\r\n  padding: 3rem 0rem;\r\n  text-align: center;\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translate(-50%, 50%);\r\n}\r\n\r\n.between {\r\n  font-size: 1.4rem;\r\n  position: absolute;\r\n  top: 2rem;\r\n  right: 2rem;\r\n  color: greenyellow;\r\n}\r\n\r\n.again {\r\n  position: absolute;\r\n  top: 2rem;\r\n  left: 2rem;\r\n}\r\n\r\n.guess {\r\n  background: none;\r\n  border: 4px solid #eee;\r\n  font-family: inherit;\r\n  color: inherit;\r\n  font-size: 5rem;\r\n  padding: 2.5rem;\r\n  width: 25rem;\r\n  text-align: center;\r\n  display: block;\r\n  margin-bottom: 3rem;\r\n}\r\n\r\n.btn {\r\n  border: none;\r\n  background-color: greenyellow;\r\n  color: #222;\r\n  font-size: 2rem;\r\n  font-family: inherit;\r\n  padding: 2rem 3rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.btn:hover {\r\n  background-color: #ccc;\r\n}\r\n\r\n.message {\r\n  margin-bottom: 8rem;\r\n  height: 3rem;\r\n}\r\n\r\n.label-score {\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.label-highscore {\r\n  color: greenyellow;\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
https:\/\/www.udemy.com\/course\/the-complete-javascript-course\/ jonas schmedtmann (Udemy): <!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\" \/> <link rel=\"stylesheet\" href=\"style.css\" \/> <title>Guess My Number!<\/title> <script src=\"script.js\" defer><\/script> <\/head> <body> <header> <h1>Guess My Number!<\/h1> <p class=\"between\">(Between 1 and 20)<\/p> <button class=\"btn again\">Play Again!<\/button> <div class=\"number\">?<\/div> <\/header> <main> <section class=\"left\"> <input class=\"guess\" type=\"number\"> ...\u00a0 JavaScript: Guess Number Game<\/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-9247","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":6,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9247","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=9247"}],"version-history":[{"count":4,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9247\/revisions"}],"predecessor-version":[{"id":9955,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9247\/revisions\/9955"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}