JQuery and More

The goal of this assignment is to practice using external libraries.

We'll start with a library that once was the most popular JS library there was, JQuery. To this day, JQuery is a preferred tool of many to build small web applications. Larger applications scale more gracefully with React which we'll get into more later (mostly in Term 2).

One of the major challenges with this assignment will be reading programming documentation. In order to discover how an external library works, we'll need to read through that libraries documentation or browse StackOverflow for answers. For better or for worse, this is a major part of building software.

JQuery

For any questions check out the JQuery documentation, StackOverflow, or just Google it.

All changes in this assignment should be done using JQuery. Don't use document, .innerText, or .innerHTML in this assignment.

Begin by creating an index.html and a main.js file. Add a script tag to your HTML file that imports JQuery from a CDN (Content Delivery Network).

In your main.js...

  • Start out by creating a <div> with JQuery
  • Add the <div> to the body of your document
  • Set the text of the <div> to be Hello World
  • Add a click listener on the <div> that makes it so that the browser displays an alert() with the text Hello world

Extras

Experiment with more external libraries. Here are a few of the most popular ones:

  • Bootstrap - gives you a nice CSS theme and layout helpers
  • Moment.js - used for working with and formatting dates
  • Lodash.js - every helper function you could possibly dream of