Let’s Learn: Meteor Pt 2
T-minus 30 seconds
Not hip with part 1 yet? We got you here
Now where were we?
We have ‘boxes’ (variables) and we have ‘instructions’ (functions) for our little workers to interact with. Now how do we turn that into us actually having the data we need in the places we need it? Or as I like to call it “the fun part.”
The files that Meteor created for us has the instructions on what to do when we click the button! Let’s start there and see what we can build.
We go inside of the ‘events’ block of code (the pieces between the ({ and }); ) and tell the employee “Every time I ‘click’ an element with the class ‘test’, I want you to read these instructions between the { and }. Inside of those curly brackets, we are simply telling the computer to ‘log’ to the ‘console’ whatever is between the ( and ); , which in this case is a String of text, and it knows it’s a String because it’s inside of “ “. Make sense? Let’s go to the HTML and connect the data!
In your html file, you should see the block of code above. Yours won’t have class=”test” so why don’t you add it yourself! If you look above, you’ll notice that we told our employee to look for something with the class test to be clicked so we need to actually give something that class. I decided to go with the button, you can make it a link though, with <a href=”#” class=”test”> or some text with <p class=”test”>this is some dummy text</p> or literally any other element with the class test attributed to it. Remember how we said our employees are stupid? They need specific instructions or they are going to generalize it to the utmost. Now that we’ve the class test added to something we can click, let’s see what our first set of instructions do!
Start up Meteor ( cd into your appName directory and in the terminal/cmd type ‘meteor’ ) and when it loads, click the element with the class test. See the string you were expecting? Did the employee listen to you? No? Try it again. Still nothing? Huh.
Try getting into the Inspect Element menu in your browser. I usually right-click the page and it brings up a menu with Inspect Element being one of the options. Something like the below should pop up, either on the side of the window, the bottom, or as a stand-alone window.
Now if you look at the top of that window, it should have a console tab. It is denoted on my screen with the “ > C…” label. Click that and you should get a new screen and probably some errors. Don’t worry about them yet. Now with both screens open, click the test element again and see what happens.
Our code is talking to us! We have our click giving information to an employee, that employee finding the instructions that corresponds with that information and does exactly what I wanted him to do. What else can we do? I bet you we could make it tell us cooler stuff than just that it ran. How about how old I am? How would I tell my stupid employee how to do that without him ever able to get it wrong? What is the data flow that we need to worry about?
No Magic Numbers, Please
Since console.log() will print out a String , we could just have it tell us “27” and be done with it. But what if I run this code a year from now? Or if I wrote it a year ago? Let’s start thinking about how we could have our employee take some information, some data and with that data tell me something that he doesn’t know. A good place to start is figuring out how you would do it.
Well, I was born in 1988 and it’s 2015 right now. I would subtract 1988 from 2015 and it would give me the difference, or age for us humans.
console.log(2015–1988);
It does return 27 like we wanted, which is good. But we are using hard-coded numbers to solve an issue. What happens when Steve wants to use this to find out how old he is? If he wasn’t born in 1988, our instructions would cause an error and our employee would have no idea. So what can we do? Enter more boxes!
var currentYear = 2015;
var birthYear = 1988;
console.log(currentYear — birthYear);
27 again? Alright! We’ve added more complexity and still haven’t broke anything! But again, we are hard coding our numbers into the variables. I wish there was a way we could have the user input a number and we use that as the birth year. At least then our friends could use it and we could look like we’re geniuses. I wonder how.
I bet you we could set up an HTML form, have when we click the submit button, it passes some value or data to those set of instructions. Ya know, I think the code would look something like this:
<form class=”test”>
<label>Let me guess your age!</label>
<input type=”number” name=”year” placeholder=”You were born in….?”>
<input type=”submit” value=”Let me think!”>
</form>
So we have the user putting some value into a box that we have given the name “year” to. Now how do I get that information to that other set of instructions that we were calling before? I already have class=”test” on my input submit, why not just change the instructions to work?! Add the class to form so we can grab the form’s data and we’re off!
‘submit .test’: function(event) {
We added the variable event to the instructions we are using. Just like with .set() or .get(), we are giving our batch of instructions a specific box of data to deal with and changed the event it is going to listen for from ‘click’ to ‘submit’. The event happens to be the form data that we are sending, which makes our life easy. Sometimes clicking submit causes a refresh so for our testing purposes, we are going to add event.preventDefault(); which is computer for “There’s a box called ‘event’ that I want you to do the instructions preventDefault(); on.” But you knew that.
Now let’s make a box called birthYear and make it have the value of 1988. It is a magic number which is bad but we’re just want to make sure everything is working, which we do by console.log(birthYear); after we declare the variable or box. Confusing yet?
var birthYear = 1988;
console.log(“I just created a variable named birthYear and gave it the value of: “ + birthYear);
I like my console.log’s to tell me what it is doing in plain English. If I have to learn its stupid language, it should at least learn mine. We are telling it to log the String that is enclosed in “ “ and add to it birthYear. We aren’t adding birthYear to the String because that makes no sense. We instead are telling the employee “Since you are at the end of a String and I put a ‘+’ after, you need to also log the value of the next box I’m giving you.” Make sure that your ‘submit .test’: function() { has a } to go with it, save your work, and see what it does! You’ll notice that no matter what we enter into the year input, we always have birthYear logging at 1988. Which, right now, is exactly what we told it to do! But how do we know we’re getting the number from the input? Can we just console.log(theDataFromTheForm)? Almost:
birthYear = event.target.year.value;
console.log(“I tried to set birthYear to equal to the year entered in the input. What I got was: “ + birthYear );
Let’s use our box/instructions analogy and like JavaScript work top down to figure out what’s going on here. We’re telling our employee “Ya know that box labelled ‘birthYear’ that we just set to 1988? Well now I want you to set it to whatever you get when you look at the box ‘event’, then in its box named ‘target’, then its box named ‘year’, then its box named ‘value’. I want to check that by you sending me a message with what box ‘birthYear’ is equal to now.”
Our employee should tell us that first he created box birthYear and gave it the value 1988, like is hard coded in our list of instructions. Then he should take the box birthYear and set it equal to whatever the user entered. Once he has done that, we want him to tell us that he tried to do what we wanted and give us the value of birthYear which should now be changed into what our user put in. Simple, right?
Now we want our employee to take that year and subtract it from the current year, which we have at 2015. Can you guess how we’re gonna do it? Probably with more console.log’s than anyone needs.
var currentYear = 2015;
console.log(“I created currentYear and set it as: “ +currentYear);
var age = currentYear — birthYear;
console.log(“I tried to create a new box called ‘age’ and set it to currentYear minus birthYear. Here is what I actually set it to: “ + age);
And there we go! Now we can have any of our friends go here, enter their age, and our code will take that data, do some instructions with it, and return us the information we needed. But we still have a magic number and we all know how evil they can be later on in production. Can you figure out how to fix it? I bet a Google search or Stacked Overflow browsing could help you figure it out. Let me know how you did it on Twitter or Facebook or here on Medium. Don’t forget that all of my code will be on GitHub and you can fork it and make it better!
Ready for part 3? I’ve got it hot and ready for ya!
