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.

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

In the next part of this assignment, your goal is to display a chart on the webpage using an external library, Chart.js.

Follow the Chart.js getting-started guide to do the following:

• Add a <div> and <canvas> element to your HTML
• Add a <script> tag to your HTML that imports Chart.js from a CDN
• In your JS, define a config, labels, and data object
• Finally, again in your JS write code to render a chart (Note: in the guide this is shown inside of a <script> tag. You can disregard this and instead put the code inside the <script> tag at the bottom of your JS)

Your final challenge is to create one additional chart on the page that is not of the same type as the one youu just added. To do this, go to the Chart.js documentation and browse the Chart Types section on the left

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