Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit

unit5 JS Design

  • Public
By Calvin Carley in the group COMP 266 January 14, 2021 - 8:27pm

controlpanel.JPG “Control Panel”  Lightmode and Change Speed

I will need to create the button objects. Four separate rectangular buttons to adjust speed from 0-4. These are the constants states: off, slow, medium, and fast.  Each with their onclick event and a function with a conditional updating the current speed variable. A second function will be needed to access each

tag or child of the container and change the style object based on the value of the current speed variable. 

The circle will call the change of the light mode. Majority of that is CSS.


  • Proposal - Animation speeds


Variable – state - 0 1 2 3

Const – speeds - Slow Medium Fast Off

Function - updateSpeed


Pseudocode UpdateSpeed

Start with the speed set to medium

  • on click

            if the speed is off change style sheet

            else if the speed is slow

                        then make the transitions x seconds apart

            elseif the speed is set to medium

                        then make the transitions y seconds apart

            else the speed is fast, and transitions are  z seconds apart



  • Proposal: String replacement


Variable-  minuteSelected, currentActivity, maxTime, temp

const - activities

2functions: conditionals 

1 loop while minute < maxTime


If breathing clicked, then do nothing

Else if activity x clicked then search all the text and replace every occurrence with

Else if activity y clicked then find and replace

Else activity z clicked then find and replace



  • Proposal: Form validation

On submit

If input less than minLength then alert

Else if input than maxLength then alert



If pattern does not match then alert