Landing : Athabascau University

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

 

onsubmit

If pattern does not match then alert

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)


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 : Misc