Great resource for learning JavaScript

Posted by on January 18th, 2018  •  0 Comments  •  Full Article

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 Game.

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.

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:

Here is the HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Guessing game</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
      .guessSubmit {
        background-color: rgb(238, 223, 182);
      }
      .guessSubmit:hover {
        background-color: rgb(11, 198, 41);
        color: white;
      }
      .guessField {
        background-color: rgb(245, 242, 207)
      }
    </style>
  </head>
  <body>
    <h1>Mark's number guessing game</h1>
    <p>
      We have selected a random number between 1 and 100. See if you can guess
      it in 10 turns or fewer. We'll tell you if your guess was too high or too low.
    </p>

    <div class="form">
      <label for="guessField">Enter a guess:</label>
      <input type="text" id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div><!--end class="form"-->

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div><!--end class.resultParas-->

 

 

and the script:

    <script>
      var randomNumber = Math.floor(Math.random() * 100) +1;

      var guesses = document.querySelector('.guesses');
      var lastResult = document.querySelector('.lastResult');
      var lowOrHi = document.querySelector('.lowOrHi');

      var guessSubmit = document.querySelector('.guessSubmit');
      var guessField = document.querySelector('.guessField');

      var guessCount = 1;
      var resetButton;//creates empty variable
      function checkGuess(){
        var userGuess = Number(guessField.value);
//captures what ever they guess into userGuess, makes sure it's a number
        if (guessCount === 1){//is it their first guess?
          guesses.textContent = 'Previous guesses: ';
        }
        guesses.textContent += userGuess + ', ';
//add latest userGuess to list of guesses.

        if (userGuess === randomNumber) {//they nailed it!
          lastResult.textContent = 'Congratulations! You got it right!';
          lastResult.style.backgroundColor = 'green';
          lowOrHi.textContent = '';//empty out Previous 'you are too low!'
          setGameOver();
        } else if (guessCount === 10) {
//they played it 10 times...we counted each time
          lastResult.textContent = '!!!GAME OVER!!!';
          setGameOver();
        } else {
          lastResult.textContent = 'Wrong!';
          lastResult.style.backgroundColor = 'red';
          if (userGuess < randomNumber) {
            lowOrHi.textContent = 'Last guess was too low!';
          } else if (userGuess > randomNumber){
            lowOrHi.textContent = 'Last guess was too high!';
          }
        }
        guessCount++;//incrementing up the times they guessed
        guessField.value = '';
        guessField.focus();//returns blinking cursor to guessField
      }//end checkGuess function
      guessSubmit.addEventListener('click', checkGuess);
//if they click submit button, run the checkGuess()
      document.addEventListener('keyup', function (event) {
//tell document to listen for a 'keyup event
        if (event.which === 13) { 
// which event is it? 13 is the enter key, if so, fire the checkGuess function
           checkGuess();
         }
       });

      console.log(randomNumber);

      function setGameOver(){
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement('button');
        resetButton.textContent = 'Start new game';
        document.body.appendChild(resetButton);
        resetButton.addEventListener('click', resetGame);
      }

      function resetGame(){
        guessCount = 1;

        var resetParas = document.querySelectorAll('.resultParas p');
//creates an array from the 3 <p>s

        for (var i = 0; i < resetParas.length ; i++){
//for three loops, go thru th p's [i] and empty them
          resetParas[i].textContent = '';
        }

        resetButton.parentNode.removeChild(resetButton);
//son tells the parent to remove the son, himself

        guessField.disabled = false;//makes the guessField active again
        guessSubmit.disabled = false;
        guessField.value = '';
        guessField.focus();

        lastResult.style.backgroundColor = 'white';
        randomNumber = Math.floor(Math.random() * 100) +1;

      }
    </script>

 

Unlocked my 1997 online journal

Posted by on January 12th, 2018  •  0 Comments  •  Full Article

Back in 2002 my dean asked me to lock my online journal. I’d been writing it since 1997. She thought it made me look unprofessional and she was probably right, though it wasn’t anything bizarre or salacious. It was/is just a bunch of daily writing about working as a printer and raising two teenagers. Last century an online journal was a new thing. WordPress hadn’t been invented, so you had to know how to build a website from scratch. Required skills were html, css, ftp and Photoshop…or at least some kind of image editor.

I used that online journal to learn all that stuff as soon as I bought my first computer in ’97. Anyway, since I’m between jobs right now and not working at the college, I’ve decided to unlock it. Here is the link into the old journal website. The navigation is in Flash…but if you don’t have Flash, you can use the links at the bottom of each post to navigate. It’s not responsive. They hadn’t invented smartphones in ’97, so that was not a concern.

I also have paper journals going back to when I first started drawing in 1971. My sketch pads double as my journals. I find that writing clears the mind. Putting my thoughts down on paper makes them easier to understand. Sort of like emptying out my backpack to see why its so heavy.  Once I can see everything in the clear light of day I can move forward.

I’ve been having a lot of fun studying Javascript at www.lynda.com. They have a guy working there called Morton Rand Hendrickson. He teaches a lot of stuff for Lynda. I’ve taken several WordPress classes from him and he’s always great. In the Javascript class he’s taught me how to build an online clock. I used to teach a clock in Flash Actionscript, so it was interesting to see how similar the Javascript programing was to the old Actionscript. He’s also taught me how to build a typing application that measures the speed and accuracy of your typing. I’ve not put that one online yet, but it was some very interesting programming.

PETZL Sirocco broken buckle fix

Posted by on January 12th, 2018  •  0 Comments  •  Full Article

I’ve had a PETZL Sirocco helmet for a year and I like it a lot. But my buckle just broke during my yearly Christmas trip to Joshua Tree. Before the Sirocco I had been wearing a 1993 Joe Brown helmet. It blew a rivet, so this Sirocco looked very attractive. It’s super light, and as long as I stuff something inside it (to protect it from crushing), I can pack my pack normally and it survived until last week. The buckle Petzl uses is very fragile. The plastic snap tabs are ultra small. There is a magnet inside the buckle that helps pull it closed. Unfortunately, the magnet also attracts iron ore, of which there is a lot in Jtree. I was constantly having to scrape and blow out the sand stuck to the magnet before it would snap.

Finally, up on the “Heart of Darkness” route, one side of the buckle broke completely. I had to borrow a helmet that day. When I got back to camp I replaced the buckle with one I bought at the jtree climbing store. To get the old buckles off, I shaved down the plastic with a razor knife until I could slide the nylon out of the old buckles. Then I prusiked on the new buckle, extended the strap with some tubular nylon using a water knot and had a helmet again. The repair job is stronger than the original. Here are the photos:

PETZL Sirocco broken buckle fix

PETZL Sirocco broken buckle fix

~

PETZL Sirocco broken buckle

PETZL Sirocco broken buckle