Session 1: Today we will begin demonstrations for the Simple JS Calculator Web Application assigned on week 3. During studio time you will be expected to prepare for the JS Calculator milestones described below under session 2.

Session 2: Today we will continue our discussion on JavaScript and demonstrate adding functionality to the JS Calculator Web Application. This will including looking at the JavaScript Math object.

Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method’s argument. Constants are defined with the full precision of real numbers in JavaScript. –MDN

During studio time please have the following milestones prepared for feedback.

Simple JS Calculator Web Application Milestones
1. Have your calculator UI constructed using HTML5 and CSS
2. A minimum of four JavaScript functions must be implemented
3. Several alternative functions must be in preparation

Session 1: Please be prepared to present the JS Calculator Web Application following studio time today. During studio time we will work on resolving any bugs present in your calculator code and validating user input.

Session 2: Today we will cover the first of our three exercises: CSS3 Transitions. CSS3 transitions are time-based effects and animations that have the advantage of being applied using the familiar technique of CSS rather than using complicated JavaScript behaviours. CSS3 transitions and animations are supported in most modern browsers including IE 10 (older versions of IE are not supported), Chrome, Safari, Firefox, and Opera.

.animated_box {
    background: black;
    border: 1px solid #000;
    -webkit-animation: rotRect 3s ease-in-out 3s infinite alternate;
    animation: rotRect 3s ease-in-out 3s infinite alternate;
}
@-webkit-keyframes rotRect {
    0%   {background: rgba(0,0,0,128); -webkit-transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); -webkit-transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); -webkit-transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); -webkit-transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); -webkit-transform: rotate(180deg); width: 20%;}
}
@keyframes rotRect {
    0%   {background: rgba(0,0,0,128); transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); transform: rotate(180deg); width: 20%;}
}

Exercise 1: CSS3 Transitions
Due: Session 2, Week 6 (5 points)

Description:
Create single page with page-jump navigation to a minimum of five examples of CSS3 transitions and animations. Write a brief explanation of each effect below each example. A zip file of the environment and the examples must be uploaded by session 2 of week 6.

Requirements:
1. Build a single page with a minimum of five content areas.
2. Each content area must contain an example of a CSS transitions or animation.
3. Each example must be distinct (i.e. do not repeat a color transition).
4. Upload to your student webspace before class on session 2 of Week 5.

Points Breakdown:
1 point awarded per distinct and functional transition or animation

Relevant Resources:
W3Schools CSS3 Transitions
MDN: Using CSS3 Transitions
CSS: Animation Using CSS Transforms

Session 1: Today we will continue looking at CSS3 transitions. In addition we will discuss the requirements for the next exercise: jQuery Gallery. jQuery is a JavaScript library or framework that makes complicated tasks easier to create. It is often used to enhance the UX of web applications by providing advanced user interface tools including accordions, tooltips, easing, menu systems, ajax, and more.

More on CSS3 Transitions:
Transitions and Animations
Easing Functions Cheat Sheet

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open source software, licensed under the MIT License. –Wikipedia

Exercise 2: jQuery Gallery
Due: Session 2, Week 7 (5 points)

Description:
Use one of the many examples of jQuery images viewers to create a gallery of nine images. Build the application into a single page that includes a 3 x 3 grid of thumbnails used as interface items for exploring the gallery. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (images, JavaScript files, html files, etc.) must be uploaded by session 2 of week 7.

Requirements:
1. Build a single page with a 3 x 3 grid of thumbnail images.
2. Implement a jQuery image viewer so that each images enlarges on clicking the thumbnail.
3. Set up the images in a gallery so that navigation to the previous and next images is available.
4. Upload to your student webspace by session 2 of Week 7.

Points Breakdown:
3 points will be awarded for properly implementing a jQuery gallery plugin.
2 points will be awarded for creating an effective thumbnail interface.

Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins

Session 2: Today we will be presenting the CSS3 Transitions Exercise. Following the presentations we will continue demonstrating how to implement jQuery gallery plugins.

Session 1: As we approach mid-term it is important to keep sight on the overall goals and outcomes expected for the class. The following is a list of the upcoming exercises and projects for the rest of the semester:

Exercise 3: jQuery UI (5 points)
Assignment 3: Interactive Form (15 points)
Assignment 4: Final Template (10 points)
Final Web Application (25 points)

The final template is a component of the Final Web Application. In addition you will be required to write a final project proposal and get approval for your proposal from me before starting on your template. The proposal will include a project summary, a feature list, screen schematics, mockups, and a bid (estimated hours broken out into design, content, development, and implementation).

Exercise 3: jQuery UI
Due: Session 2, Week 8 (5 points)

Description:
Implement a minimum of five examples of jQuery UI behaviors. Build the application into a single page that includes each example in a different area of the page. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (JavaScript files, css files, html files, etc.) must be uploaded by session 2 of week 8.

Requirements:
1. Implement five or more examples of jQuery UI behaviors.
2. Examples may include show, toggle, accordion, datepicker, slider, menu, and progressbar.
3. Set up the examples to work with or with internet access on a single html page.
4. Upload a zip of your gallery application to the D2L by session 2 of Week 7.

Points Breakdown:
4 points will be awarded for properly implementing five jQuery UI behaviors.
1 points will be awarded for implementing the examples on an html page.

Relevant Resources:
jQuery
jQuery UI

Session 2: Today we will look at your jQuery Gallery exercises. Following the presentations we will continue demonstrations for the jQuery UI exercise.