Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
T
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #8: Insiders Weather Chart50 points

Due Tuesday, April 2 @ 11:55pm

Overview

Further enhance your Insider's Guide site to let your visitors know what the local weather conditions are throughout the year by using a line chart to display temperatures, precipitation, and snowfall/sunshine.

The best place to find this data is on Wikipedia under your city's "climate" section. If your area doesn't have an entry in Wikipedia or the climate data isn't listed, use the data for the nearest large city and note it in the introductory paragraph.

Steps to Complete the Assignment

  1. In VS Code, be sure you are on the master branch of your Insider's Guide assignment. Perform a sync in the lower left corner by clicking the "two arrows in a circle" button. Sync your master branch Then add a new branch called pa8.
  2. HTML — Create a new file at the same level as your index.html document called weather.html. It should be structured as follows:
    • Set the title element for the page to "Insider's Guide to YOURCITYNAME: Climate Data"
    • Add a link element to "style.css"
    • Copy and paste the exact same header and footer from the body of your index page to your new page's body. Add an id attribute to your header with the value "bodyheader".
    • Add a section with the id of "calcintro" following your body's header that has its own header and second-level headline of "Climate Data". After the header, add a brief paragraph that explains to the user what this page is for. (Read ahead in the assignment first so that you also understand what it does.)
    • Add the canvas element for embedding a Chart.js chart on your page. Set its initial width to 800 and height to 400.
    • Add the script block to load the Chart.js API into your page.
    • Add another script block with the src attribute loading a file called "chart.js".
  3. JavaScript — Create a new file called "chart.js". Add the same comment from your cost estimator at the top of the file to make the page content fall below the header:
    document.body.onload = function () {
      document.getElementById("calcintro").style.marginTop = document.getElementById("bodyheader").offsetHeight + 25 + 'px';
    };          
  4. In "chart.js", use the Chart.js API to build a line chart with:
    1. The x-axis labelled by month names: "Jan", "Feb", etc.
    2. Those labels visible on the x-axis
    3. The following six datasets based on data for each month (choose the units below that are appropriate for your area: F vs. C / inches vs. millimeters vs. centimeters):
      1. Avg High (F or C) — This line should be fully RED. Add a background color that is also fully RED but with 50% transparency. Points along the line should have a size of "3". The area below the line should NOT be filled.
      2. Avg Low (F or C) — This line should be fully BLUE. Add a background color that is also fully BLUE but with 50% transparency. Points along the line should have a size of "3". The area below the line should NOT be filled.
      3. Record High (F or C) — This line should be dark RED. Add a background color that is also dark RED but with 50% transparency. Points along the line should have a size of "3". The area below the line should NOT be filled.
      4. Record Low (F or C) — This line should be dark BLUE. Add a background color that is also dark BLUE but with 50% transparency. Points along the line should have a size of "3". The area below the line should NOT be filled.
      5. Avg Precip (in or cm or mm) — This line should be fully GREEN. Add a background color that is also fully GREEN but with 50% transparency. Points along the line should have a size of "5" and be in the shape of a triangle. The area below the line SHOULD be filled.
      6. Avg Snowfall (in or cm or mm) — This line should be GRAY. Add a background color that is also GRAY but with 50% transparency. Points along the line should have a size of "5" and be in the shape of a star. The area below the line SHOULD be filled.

        If your city never gets snow, change the label to "Avg Sunshine (hrs)" with the color YELLOW.
    4. Set the following options on the chart:
      1. Display a title for the entire chart with the text "Annual Weather Conditions for YOURCITYNAME" and a font size of 24. You must use the option in Chart.js to set the font size.
      2. Make a tooltip display ALL of the data for a particular month when you hover anywhere above the corresponding month.

        Hint: set "intersect" to false, and try various options for the "mode" property.
      3. Make the labels that appear in the legend appear in 12pt Helvetica
      4. Make the entire legend appear to the right of the chart.
      5. Allow the aspect ratio to change freely and make the entire chart be responsive.
  5. Test everything! Be sure that your chart draws with all 6 datasets included, with points displaying, and the tooltips working.
  6. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa8 branch into the master branch. Please DO NOT delete the pa8 branch when finished.

Expectations

HTML, CSS, and JavaScript should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dci110w19.github.io/insiders-YOURUSERNAME/weather.html (e.g. "https://dci110w19.github.io/insiders-mickelj/weather.html") to see that it is completely uploaded and working.

Your page should look similar to this:

Sample image for how the results of PA 8 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML and JavaScript coding rules and conventions discussed in class and in the textbook

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.