{"id":1806,"date":"2018-01-18T07:44:50","date_gmt":"2018-01-18T07:44:50","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?p=1806"},"modified":"2020-01-20T18:20:47","modified_gmt":"2020-01-20T18:20:47","slug":"great-resource-learning-javascript","status":"publish","type":"post","link":"https:\/\/websterart.com\/wordpress\/2018\/01\/great-resource-learning-javascript\/","title":{"rendered":"Great resource for learning JavaScript"},"content":{"rendered":"

I worked through an entire JavaScript course at www.lynda.com but didn’t really feel that I had mastered the language. I did some cool stuff, Morten is always good, but I wanted more. One of his links at the end took me here<\/a>.<\/p>\n

I worked through their first tutorial and it made the classic Number Guessing Game.<\/p>\n

I think I can get it working here in wordpress…but I will probably have to run it in an iframe. That will be tomorrows task, since it’s almost midnight.<\/p>\n

Until I found this tutorial at developer.mozilla.org I was starting to get frustrated. I’d finished Morten’s course…and I didn’t feel any smarter. But once I started doing this Number Guessing Game, I realized I had actually learned a ton from Morten. The for loop was completely logical. Anyway, I’m making progress. Here is the code:<\/p>\n

Here is the HTML:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>Guessing game<\/title>\r\n    <style>\r\n      html {\r\n        font-family: sans-serif;\r\n      }\r\n      body {\r\n        width: 50%;\r\n        max-width: 800px;\r\n        min-width: 480px;\r\n        margin: 0 auto;\r\n      }\r\n      .lastResult {\r\n        color: white;\r\n        padding: 3px;\r\n      }\r\n      .guessSubmit {\r\n        background-color: rgb(238, 223, 182);\r\n      }\r\n      .guessSubmit:hover {\r\n        background-color: rgb(11, 198, 41);\r\n        color: white;\r\n      }\r\n      .guessField {\r\n        background-color: rgb(245, 242, 207)\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h1>Mark's number guessing game<\/h1>\r\n    <p>\r\n      We have selected a random number between 1 and 100. See if you can guess\r\n      it in 10 turns or fewer. We'll tell you if your guess was too high or too low.\r\n    <\/p>\r\n\r\n    <div class=\"form\">\r\n      <label for=\"guessField\">Enter a guess:<\/label>\r\n      <input type=\"text\" id=\"guessField\" class=\"guessField\">\r\n      <input type=\"submit\" value=\"Submit guess\" class=\"guessSubmit\">\r\n    <\/div><!--end class=\"form\"-->\r\n\r\n    <div class=\"resultParas\">\r\n      <p class=\"guesses\"><\/p>\r\n      <p class=\"lastResult\"><\/p>\r\n      <p class=\"lowOrHi\"><\/p>\r\n    <\/div><!--end class.resultParas-->\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
and the script:<\/p>\n
    <script>\r\n      var randomNumber = Math.floor(Math.random() * 100) +1;\r\n\r\n      var guesses = document.querySelector('.guesses');\r\n      var lastResult = document.querySelector('.lastResult');\r\n      var lowOrHi = document.querySelector('.lowOrHi');\r\n\r\n      var guessSubmit = document.querySelector('.guessSubmit');\r\n      var guessField = document.querySelector('.guessField');\r\n\r\n      var guessCount = 1;\r\n      var resetButton;\/\/creates empty variable\r\n      function checkGuess(){\r\n        var userGuess = Number(guessField.value);\r\n\/\/captures what ever they guess into userGuess, makes sure it's a number\r\n        if (guessCount === 1){\/\/is it their first guess?\r\n          guesses.textContent = 'Previous guesses: ';\r\n        }\r\n        guesses.textContent += userGuess + ', ';\r\n\/\/add latest userGuess to list of guesses.\r\n\r\n        if (userGuess === randomNumber) {\/\/they nailed it!\r\n          lastResult.textContent = 'Congratulations! You got it right!';\r\n          lastResult.style.backgroundColor = 'green';\r\n          lowOrHi.textContent = '';\/\/empty out Previous 'you are too low!'\r\n          setGameOver();\r\n        } else if (guessCount === 10) {\r\n\/\/they played it 10 times...we counted each time\r\n          lastResult.textContent = '!!!GAME OVER!!!';\r\n          setGameOver();\r\n        } else {\r\n          lastResult.textContent = 'Wrong!';\r\n          lastResult.style.backgroundColor = 'red';\r\n          if (userGuess < randomNumber) {\r\n            lowOrHi.textContent = 'Last guess was too low!';\r\n          } else if (userGuess > randomNumber){\r\n            lowOrHi.textContent = 'Last guess was too high!';\r\n          }\r\n        }\r\n        guessCount++;\/\/incrementing up the times they guessed\r\n        guessField.value = '';\r\n        guessField.focus();\/\/returns blinking cursor to guessField\r\n      }\/\/end checkGuess function\r\n      guessSubmit.addEventListener('click', checkGuess);\r\n\/\/if they click submit button, run the checkGuess()\r\n      document.addEventListener('keyup', function (event) {\r\n\/\/tell document to listen for a 'keyup event\r\n        if (event.which === 13) { \r\n\/\/ which event is it? 13 is the enter key, if so, fire the checkGuess function\r\n           checkGuess();\r\n         }\r\n       });\r\n\r\n      console.log(randomNumber);\r\n\r\n      function setGameOver(){\r\n        guessField.disabled = true;\r\n        guessSubmit.disabled = true;\r\n        resetButton = document.createElement('button');\r\n        resetButton.textContent = 'Start new game';\r\n        document.body.appendChild(resetButton);\r\n        resetButton.addEventListener('click', resetGame);\r\n      }\r\n\r\n      function resetGame(){\r\n        guessCount = 1;\r\n\r\n        var resetParas = document.querySelectorAll('.resultParas p');\r\n\/\/creates an array from the 3 <p>s\r\n\r\n        for (var i = 0; i < resetParas.length ; i++){\r\n\/\/for three loops, go thru th p's [i] and empty them\r\n          resetParas[i].textContent = '';\r\n        }\r\n\r\n        resetButton.parentNode.removeChild(resetButton);\r\n\/\/son tells the parent to remove the son, himself\r\n\r\n        guessField.disabled = false;\/\/makes the guessField active again\r\n        guessSubmit.disabled = false;\r\n        guessField.value = '';\r\n        guessField.focus();\r\n\r\n        lastResult.style.backgroundColor = 'white';\r\n        randomNumber = Math.floor(Math.random() * 100) +1;\r\n\r\n      }\r\n    <\/script><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
I worked through an entire JavaScript course at www.lynda.com but didn’t really feel that I had mastered the language. I did some cool stuff, Morten is always good, but I wanted more. One of his links at the end took me here. I worked through their first tutorial and it made the classic Number Guessing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1806","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":4,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":3501,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1806\/revisions\/3501"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}