For this phase of our project we are going to use a great Open Source application for this project- JSBin. JSBin is configured in a way that is in keeping with real-world web development. Let's look at some of the specifics of JSBin:

• Panels: JSBin has multiple panels which can be hidden or displayed by clicking on the buttons at the top. Each panel is for a different language, plus the preview. For our purposes, that means three panels: HTML, JS & preview. Think of the separate panels as separate files- which is how all of these components are most often arranged in the real world. Getting used to working with these separately is a good practice.
• Versioning: In JSBin all of your versions are saved and numbered each time you choose to save. This can get confusing if you forget that you need to remember to get the URL of the most recent project. However, you can substitute the word 'latest' for the version number in the URL and you will be taken to the latest version.
• All sorts of cool stuff: To be honest, I really like JSBin and it has all sorts of great features that we don't need to get into here, but if you are interested, check out their Features page.

We will be using JSBin with some code snippets below- if your screen size is too small to see the embedded JSBin exercises, click on the JSBin logo (Dave, the Bin-bot, who looks like a little can) to go straight to the full version. We will also be using JSBin for our project- the link at the bottom of the page will take you to the JSBin site to complete it.

We're all familiar with search boxes, especially this one:

Francisco Tosete / Foter / CC BY-NC-SA

But have you ever wondered how to create your own? Well, with query strings and HTML forms, we can do this fairly easily. The code is actually pretty straight-forward: we'll grab the user's input and save that in our queryString variable which we'll then manipulate into our URL. If this isn't making any sense- don't panic! Read on...

We aren't going to get into too much detail for this exercise, but for you to fully understand what we're talking about, we'll need to discuss a couple of things:

1. HTML Element: HTML (HyperText Markup Language) is the coding language that web pages are built with. Think of it as the skeleton of a webpage- it provides the basic structure of the page and organization of the content. HTML on its own is just text- without any formatting or styles and without any action. Just as a skeleton can't move without muscles (it's basically just a pile of bones), HTML is inactive on its own- it's just a bunch of text.
   
   CSS (Cascading Style Sheets) is used to style HTML- kind of like the skin and clothes. If you're not yet rolling your eyes at this Frankenstein-ian analogy, JavaScript is therefore the muscle and the web developer and the user are both the brain.
   
   Each 'bone' in the skeleton of an HTML page is called an element- these are written out using opening and closing tags, enclosed in angle brackets, like so:

   <h3>This is a heading</h3>

   The <h3> element is a third level heading. The heading content begins after the <h3> tag, and ends with the closing tag, which has a backslash, like so: </h3>.
   
   We can also nest elements like so:

   <p>This is a paragraph with a <a>link</a> inside it</p>

   [Note: The <p> tag is for a paragraph and the <a> tag is for a link.]
2. JS Variable: In computer programming, variables are similar to those used in Algebra- except that we can use variables to represent any type of data, not just numbers. A variable can be thought of as a shorthand- instead of having to type out "schipperke" a bunch of times and risk misspelling things, we can store the text inside of a variable, such as term like so:

   var term = "schipperke";

   [Note: We type out var to signify that we are about to define a variable. Also, when we assign a value that is not a number, it needs to be inside quotation marks.]
   Now, if I were to write the following script:

   "Let's search for " + term + " photos in Flickr."

   The output would be:

   Let's search for schipperke photos in Flickr.

   The real beauty of variables is that we can change them later, like so:

   term = term + " puppy";

   Our variable term is now equal to: "schipperke puppy" and the output of our script above would now be:

   Let's search for schipperke puppy photos in Flickr.

   Try it out:

   JS Bin
3. jQuery selector: jQuery is a JS library that makes it easier for us to manipulate HTML & CSS. Simply put, jQuery gives us some shortcuts to work with our webpages. In order to target specific elements on a page, we will use jQuery selectors. Using jQuery to do this can be very complicated with most real-world webpages and I highly recommend taking the jQuery tutorial at Code School (try.jquery.com) if you want to learn more, but the basic idea is this:

   $('a').text("Schipperke");

   [Note: The dollar sign is a cue that we're using jQuery- whenever you use jQuery, you'll need to be sure to include that dollar sign!]
   This line of code will insert the text "Schipperke" into every <a> element on the page. We accomplish this by using the a selector.
   If we wanted to change the text in a paragraph, we could use a p selector to write:

   $('p').text('This is the new paragraph text.');

   Try it out:

   JS Bin
   A more clever way to acheive this using our variable above would be:

   $('a').text(term);

   Try it out:

   JS Bin
4. jQuery id selector: Instead of simply targeting a type of element (which might affect all sorts of content on a page- sometimes we don't want to change every single paragraph, for instance), jQuery allows us to get much more specific. There are many ways to do this, but we are going to use the id selector. We can select an element based on its id like so:

   $('#textInput').text("We are targeting just the element with the textInput id.");

   The symbol for selecting the id is the #. Therefore, the script above is targeting the element with id="textInput" and is then grabbing the value of that input. Simply put: that script is grabbing the text the user types into the search box.
   

   Try it out:

   JS Bin
   
   

For the purposes of this exercise, we'll have to talk a bit about HTML forms, but I'm going to keep it simple and stick to only those pieces we'll be using.

• Text Input: every form has different ways for users to enter their own input (that's what a form is for, right?!). We are going to want our users to be able to type any text that they want, so we will be using a text input which looks like this:

  <input type='text' name='searchTerm' id='searchTerm'>

  Notice that we have some attributes here- the type attribute specifies that we are asking for text and the name and id attributes are used to manipulate the element. In our script, we'll use the id to specifiy where we will grab the input value. The value of a text input field is what the user types in. We can insert a value by specifying that attribute and value pair if we want to have a suggestion already loaded in the field, but for now, we'll just leave it blank. For an example of a pre-loaded value in a search form, look back at the example in Part A (the value for that form input is "URL Query String Exercise").
• Submit button:The second type of input we are going to use is submit. Once the user has entered her search terms into the text box, she will need a way to signal that she is ready to search for those terms. By clicking on the submit button, our script will be run and her search will be under way.

Now it is time to work on our project and finally get our hands dirty! You will be creating a search box that will allow your viewers to search for Creative Commons photos in Flickr right from your site. To do this, you will:

1. grab the term(s) that the user inputs into the search box
2. convert the terms into a query string
3. insert the query string into a URL
4. and then open that URL in a new tab

Got it? Let's go! Click the button below to open the project.