Week 6 Labs: JavaScript Libraries

• Local storage : on browsers


• JavaScript: Import & Export : Demonstrates importing and exporting modules in JS. Use npx http-server to see working example after installing node.js.


• HTML Canvas
  • Canvas template : Drawing rectangle/square template on a canvas - filled and outline
  • Hello canvas : Drawing rectangles on a canvas - filled box and outline box
  • Fill vs. Stroke : drawing squares examples
  • Gradients : horizontal, vertical, diagonal, & radial gradients
  • Drawing in intervals : setInterval(nameOfFunction, timeBetweenCallingFunctionInMs)
  • Drawing on canvas
    • Rectangles & Squares : filled & outlined box
    • Lines
    • Circles : circles & circle segments
    • Text : filled & outlined text
    • Draw image on a canvas : drawImage(image, destination x, destination y)
    • Draw text on a picture : drawing an image on a canvas with text writing input features
  • Canvas events
    • Coordinates : finding x, y coordinates on the canvas
    • Mouse events : example of a mouse click event on canvas
    • Mouse drag
      • Draws squares : template/starter file for Lab 6
      • Lab 6: Draws circles : with color and range inputs for circle radius
      • Draws circles : randomly generated colors
      • Draw & Undo : saveHistory() & undoHistory()


• Leaflet JS: v1.9.4 - used for maps
  • Leaflet template : starter file
  • MN metro area map : for 3 individually listed colleges in the MN metro area using Mapbox tiles
  • MN college campuses map : for an array of colleges in the MN metro area using Mapbox tiles along with a loop
  • Other map tile providers
    • Thunderforest Map Tiles : 'Atlas' map style used to show the location of the Minnesota Zoo
    • Geoapify Map Tiles : 'Carto' map style used to show the location of Mall of America, MN
    • Open Planetary Basemap Tiles : demonstrates mars and moon basemaps
  • Map event listeners : demonstrates click & dblclick event listeners
  • Map marker colors : adding different marker icons to maps
  • Lab 6: Longest US Bridges Map : demonstrates creating maps, adding custom markers, with looping over multiple bridges


• Flickity: v2 - used for carousels
  • Winter images carousel
  • Text carousel : Android versions


• Glide JS: v3.6.0 - used for carousels
  • Fall images carousel


• Highlight JS: v11.8.0 - used for code highlighting
  • Programming languages


• Chart JS: v4 - used for graphs and charts
  • Soda chart : using vertical bar chart
  • Expenses chart : using doughnut chart
  • Lab 6: Longest US Bridges Chart : using horizontal bar chart


• Also see, Lab 6 assignment repository

ITEC 2560-60: Web Client and Server Programming
Minneapolis Community and Technical College (MCTC), Minneapolis, Minnesota
Prof. Clara James, Fall 2020
August 25, 2020 to December 15, 2020 (Tuesdays)