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 analert()
with the textHello 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
, anddata
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: