Start Your Search Engines

[Week 1 - TAAQUI GIPHY] · Lesson 1 · 10 minutes


Welcome to Javascript! We dive right in with creating a website that will interact with APIs using Javascript in the most relevant way we can think of: a panda .gif search engine.

Welcome to Javascript! This week, we're going to dive right into learning this most flexible of programming languages by creating a search engine, specifically for these guys -

Panda1

That's right. We're creating the four most magical words in the English language: Panda Gif Search Engine.

This project is going to require some HTML knowledge - and if you haven't already downloaded Sublime, or a similar text editor, do so now. You'll also need the starter code for each of this month's projects, and to set your default browser to Chrome

The first step in our project is creating a javascript page and associating it with our HTML index file. For that, we need to right click on the javascript folder, create a new file, and save it as main.js. Then, add a script tag in your index.html file, which will instruct the html to load all our javascript code. 

javascript1

Always be sure to put it right above your </body> tag, so that the HTML and CSS load first. 

Now, just to get our feet wet, we're going to create an alert in our main.js file - all this does is create a little pop-up window when we open our page - which pops up (no pun intended) when we click the go button. It should look like this: 

javascript2

It's going to take a little bit to get used to the syntax of javascript, but you can sort of pick out what this code is doing from some of the key words. Basically, you're asking javascript to search the document, or our HTML code, and focus on a specific facet of it, our friend .jsgo. This is utilizing a query selector. By the by, in the event you're wondering why it's written as querySelector, that's just camel casing

Then we add an event listener, or an instruction to do something on a certain user-generated event. Here, that event is a click on .jsgo, and what javascript does is the function onGoBtnClicked. Functions are simply blocks of code designed to perform a given action. So our onGoBtnClicked function gives additional steps for javascript to do.  

With us so far? Stay alert, we'll dive in deeper in the next video. 

Ask A Question

Having trouble? Don't worry, you're probably not the only one. Check out the questions other students have or ask yours.