Program 1: MapPopup

This javascript class will show a pop-up of the marina’s current location when the user hovers over the marina link.
The MapPopup class will use the leafletjs library.
This program will also be used to satisfy Unit 6: Using Libraries.

Pseudocode:

function MapPopup(popUpDiv){
const popUpDiv = document.createElement('div', id = popUpDiv) – create div to hold map
let olddata-lat – holds data-lat to compare if link is old or new
}

MapPopup.prototype.start = function(){
let atags = load all <a> tags containing data-lat

for(a in atags){
add MapPopup.popIn() as mouseover event listener to a tag
add MapPopup.popOut() as mouseover event listener to a tag
}
}

MapPopup.prototype.popIn = function(event){
load data-lat, data-lon from tag
load innerHTML as marina name
set popUpDiv position to mouse position

if(data-lat != olddata-lat){ - only update map if link changes
olddata-lat = data-lat
set leaflet map to lat,lon
show pop-up in map
display popUp div
}
}

MapPopup.prototype.popOut = function(event){
hide popUpDiv
}

Program 2: LoadWeather

This javascript class loads the weather from the Environment Canada web service at: https://dd.weather.gc.ca/cgi-bin/bulletin_search.pl?product=fq&location=cn13&issuer=cwvr
The data is formatted based on the locations selected by the user, with the locations saved in a cookie.
The formatted data is displayed on the weather page of the website.
This program will also be used to satisfy Unit 7: Using external data sources

Pseudocode:

function LoadWeather(wxdiv){
const wxDiv - keep div used to hold wx
const islandAreas = new Map(['westlisland',true]...) - map to hold user selected island areas
const forecastAreas = new Map(['westisland',['area1',...]],...) - map that references forecast areas based on island areas selected
let combinedAreas - array that holds the forecast areas from forecastAreas based on the selected islandAreas
}

LoadWeather.prototype.loadCookie = function(){ - run on page load
load cookie data
set islandAreas based on cookie data
update toggle buttons on web page for islandAreas

_fetchWeather()
}

LoadWeather.prototype.saveCookie = function(){ - attached to checkmark buttons on web page
save cookie data from checkmark buttons
set islandAreas based on checkmark buttons

_fetchWeather()
}

LoadWeather.prototype._fetchWeather = function(){
XMLHTTPRequest weatherrequest

if(weatherrequest success)
_parseWeather(weatherrequest.text)
else
wxDiv.innerHTML = "Unable to fetch weather"
}

LoadWeather.prototype._parseWeather = function(wxtext){
fill combinedAreas from forecastAreas in islandAreas

split wxtext up into array using "End" line as deliminator - forecast query can return multiple times
keep last non-empty array location as most recent weather
split up recent weather entry into new tempweather array using empty line as deliminator

first and second tempweather array entry is header

let weatherarray = []
weatherarray.push(tempweather[0])
weatherarray.push(tempweather[1])

for(var i = 2;i < weatherentry.length;i++){
for( area in combinedAreas){
if(tempweather[i] line starts with area)
weatherarray.push(tempweather[i])
}
}

fill wxDiv with weatherarray
set line style to 'warning' if line contains 'warning' - sets red colour on line
put <br> between weatherarray items
}

Program 3: QuizGame

This javascript class creates a multichoice quiz on the page, keeping track of the users score, and the time taken to finish the quiz.

function QuizGame(quizdiv){
let quizdiv = quizdiv - keep reference to div used to hold quiz on page
let quiz = [['quiz text','image url','ans1',...,correct_answer],...]
let score, time
}

QuizGame.prototype.startQuiz = function(){
clear quizdiv

for(q in quiz){
create question div and fill with quizz data
append div to quizdiv
}
append finish button
show quiz div
}

QuizGame.protoype.finishQuiz = function(){
clear quizdiv
check selected radio button for each question to see if correct
update score
append time taken, score, and message to quizdiv
append startquiz button
}